js Tips and Tricks

1. 不要反向声明

我们应该变量声明是什么，而不是声明不是什么

// 这样是不好的 
let isNotEmail = false;
if(isNotEmail ){
	// .... 
}

// 这样是比较好的  
let isEmail = true;
if(isEmail ){
	sendEmail()
}

2. 当有多个选择条件

当有多个选项，应该把选项维护成数组，对象之类

// 这样是不好的 
let fruit;
if(fruit === 'apple' ||fruit === 'orange' || fruit === 'banana' ){
  // .... 
}

// 这样是比较好的 
let fruit;
let FRUITS = [ 'apple','orange', 'banana'];
if(FRUITS.includes(fruit)){
	// ... 
}

3. 从数组中找出某项

当我们从数组中找出某项，尝试使用Array的find方法

// 这样是不好的 
  const FRUITS = [
    {
      name: "apple",
      price: 9.9
    },
    {
      name: "orange",
      price: 4.9
    },
    {
      name: "banana",
      price: 3.9
    },
  ]
  
  let fruit;

  for(let a = 0; a< FRUITS.length; a++){
    if(FRUITS[a].price === 3.9){
      fruit = FRUITS[a];
    }
  }

// 这样是比较好的 
let fruit = FRUITS.find(fruit => fruit.price === 3.9)

4. 如果判断条件多，早点return

我们应该减少函数内的if else 嵌套

// 这样是不好的 
  function getPos(position) {
    if(position){
      if(position.province){
        if(position.city){
          return `position: ${position.province} ${position.city}`
        }else {
          return `position: ${position.province}`
        }
      }else {
        return "position: no province"
      }
    }else {
      return "NO position"
    }
  }

// 这样比较好 
  function getPos({province, city} = position) {
    if (!province && !city) return "NO position";
    if (!province) return "position: no province";
    if (!city) return `position: ${province}}`
    return `position: ${province} ${city}`
  }

5. 使用对象，而不是switch case

// 这样是不好的 
  function getAction(t) {
    switch(t){
      case 0:
        return function () {console.log(0)}
      case 1:
        return function () {console.log(1)}
      case 2:
        return function () {console.log(1)}
    }
  }

// 这样是好的 
  function getAction(t) {
    const actions = [
      function () {console.log(0)}, 
      function () {console.log(1)},
      function () {console.log(2)}
    ]
    return actions[t]
  }

6. Use Optional Chaining

// 这样是不好的 
  let a = res && res.data && res.data.model && res.data.model.code === 200 || 'default'

 let a = res ? .data ? .model ? .code ?? 'default'
 // 开启这种语法需要babel插件 
 // @babel/plugin-proposal-optional-chaining 

tip - 0 清空数组

const arr = [1,2,3,4]
arr.length = 0; // []

tip - 1 动态生成object

  const getUser = (emailIncluded = false) => {
    return {
      name: 'John',
      surname: 'Doe',
      ...emailIncluded && { email : '[email protected]' }
    }
  }

tip - 2 循环n次的简单方法

// Array(3) 是长度为3的数组，但是里边没值，这样无效 
Array(3).forEach(e => console.log(111))

// 这样有效 
for (let t of Array(3)) {console.log(111)}

相关资料

• Tips and Tricks for Better JavaScript Conditionals and Match Criteria
• 8 Useful JavaScript Tricks
• JavaScript Clean Code - Best Practices
• 10-javascript-tips-and-tricks-you-should-know
• 7 Useful Tricks For Writing More Concise and Performant Javascript