微信小程序-代码优化方式

三目运算场景(||、&&、??) — ES11

逻辑或操作符 ||:

• 含义：判断问号左边是否有值，即会使用Boolean将左边进行转化，若为true，返回左值，若为false，返回右值
• 原语句：leftData ? leftData : rightData
• 简化：leftData || rightData
• 适合场景：isClick ? ‘’ : ‘hidden’

空值合并运算符 &&:

• 含义：判断问号左边是否有值，即会使用Boolean将左边进行转化，若为false，返回左值，若为true，返回右值
• 原语句：leftData ? rightData : leftData
• 简化：leftData && rightData

空值合并操作符 ??:

• 含义：ES2020 新增，当左侧的操作数为 null 或者 undefined时，返回其右侧操作数，否则返回左侧操作数
• 关键：只要leftData不为undefined或null 就返回leftData
• 原语句：leftData !== null && leftData !== undefined ? leftData : rightData
• 简化：leftData ?? rightData

逻辑运算符和赋值表达式(&&=，||=，??=) — ES12

&&=

• 含义：x &&= y 等价于 x &&(x=y): 意思是当 x 为 true 时，x = y
• 示例：

  let a = 1;
  let b = 0;
  
  a &&= 2;
  console.log(a); // 2
  
  b &&= 2;
  console.log(b);  // 0

||=

• 含义： x ||= y 等价于 x || (x = y)：意思是当 x 为 false 的时，x = y

• 示例：

  const a = { duration: 50, title: '' };
  
  a.duration ||= 10;
  console.log(a.duration);  // 50
  
  a.title ||= 'title is empty.';
  console.log(a.title);  // "title is empty"

• ??=

  • 含义：x ??= y 等价于 x ?? (x = y)：意思是当 x 为 null 或 undefined 的时，x = y
  • 示例：

    const a = { duration: 50 };
    
    a.duration ??= 10;
    console.log(a.duration);  // 50
    
    a.speed ??= 25;
    console.log(a.speed);  // 25

代码优化方式

场景一：页面使用复杂的表达式，可以在函数中返回结果，直接调用函数

• 示例：disabled: !a && b && c && d
• 解决：

  disabled: isDisabled
  const isDisabled = () => {
  	return !a && b && c && d
  }

场景二：页面存在重复节点，一般存在表单页面

• 解决：将数据存在数组中，遍历出来

场景三：if else switch + 要校验，表单

• 将提示信息，校验的key值，和是否必填(可以通过ts的类型校验忽略或排除)写成一个数组对象
• 通过判断这个key对应的value的布尔类型时候为undefined，是就提示并返回
• 注意点：
  • 有两个数组，数组一是存放key和value的数组对象，数组二是存放要检验的key和提示信息
  • 这个校验方式是按顺序的，所以数组的顺序要和页面的表单顺序一致

场景三：从后端获取参数存进对象中，但有几个数据要单独处理

• 示例：

  const params = {}
  params.id = this.formItem.id
  params.time = this.formItem.time.format('YYYY-MM-DD')
  ...次数省略多个重复代码

• 解决：使用解构，不处理的直接存，处理的拎出来处理

  const {time,...params} = this.formItem   // 这里输出params就可以得到params对象
  params.time = this.formItem.time.format('YYYY-MM-DD')

场景四：常量使用枚举保存好

场景五：css用BEM命名法

• BEM命名法

场景六：switch 比 if/else在 执行效率高

场景七：优化switch

策略模式：简单理解一个函数对应一个方法

• 解决：使用对象存储，然后在函数中返回
• 本质：在工厂函数中使用策略模式
• 示例：

  const weekFun = (opt: number) => {
  	// 使用对象字面量
  	const status: Record<number, string> = {
  		0: '周日',  // value可以是函数
  		1: '周一',
  		2: '周二',
  		3: '周三',
  		4: '周四',
  		5: '周五',
  		6: '周六',
  	}
  	return status[opt] ?? 'weekFun is not get useful num'
  }

场景八：优化if/else代码块

• Map写法

  const opt = {
  	0: "add",
  	1: "even",
  	2: "divided",
  	3: "multi"
  }
  
  const actions = new Map([
   ["add", "成功,444444444444"],
   ["even", "失败,44444444"],
   ["divided", "进行中,11111111"],
   ["multi", "未开始"]
  ])
  // 调用
  actions.get(opt[0])
  console.log(actions.get(opt[0])) // "成功,444444444444"