JS编写常用优化方式

为了使代码更加优雅美观并提高性能，现总结前端在编写JS时常用的一些开发技巧。

1. 使用 Array.includes() 来处理多重条件

// 条件判断时
function test(item) {
  if (item == 'dog' || item == 'cat') {
    console.log('animal');
  }
}

如果此时有多重判断条件时，建议

// 把多重条件提取到数组中
function test(item) {
  const allItem = ['dog', 'cat', 'pig', 'fish', 'sheep'] 
  if (allItem.includes(item)) {
    console.log('animal');
  }
}

2. 在书写时尽量少写嵌套，在不满足条件时尽早返回

function test(item, num) {
  const allItem = ['dog', 'cat', 'pig', 'fish', 'sheep'] 
  // 判断条件一：item必须存在值
  if (item){
    // 判断条件二：必须是allItem里的元素
    if (allItem.includes(item)) {
      console.log('animal')
      // 判断条件三：数量要大于10
      if (num > 10) {
        console.log('Over Ten animals')  
      }
    }
  }
} else {
  throw new Error('No animals');
}

​ 以上通过 if...else...来进行判断，但是 if 判断条件代码嵌套层级太深，建议修改为少些嵌套并在遇到不符合的条件时尽早返回的形式。

function test(item, num) {
  const allItem = ['dog', 'cat', 'pig', 'fish', 'sheep'] 
  // 判断条件一：item必须存在值
  if (!item) throw new Error('No animals');
  // 判断条件二：必须是allItem里的元素，不是就立刻返回
  if (!allItem.includes(item)) return;
  console.log('animal')
  // 判断条件三：数量要大于10
  if (num > 10) {
    console.log('Over Ten animals')  
  }
}

3. 使用函数默认参数以及解构

function test(material, num) {
  if (!material) return;
  const q = num || 1;
  console,log('We have ${{q}} ${{material}}')
}

可以使用ES6默认参数的方式来去掉q

function test(material, num = 1) {
  if (!material) return;
  console,log('We have ${{num}} ${{material}}')
}

4. 相较于 switch，Map/Object 是更好的选择

function test(item) {
  // 使用 switch case 来找到对应的分类
  switch (item) {
    case 'animal':
      return ['cat', 'dog'];
    case 'person':
      return ['name', 'age'];
    case 'color':
      return ['red', 'green'];
    default:
      return [];      
  }
}

可以使用Map来实现同样的效果：

const itemClass = new Map()
  .set('animal', ['cat', 'dog'])
  .set('person', ['name', 'age'])
  .set('color', ['red', 'green']);

function test(item) {
    return itemClass.get(item) || [];
}

5. 使用 Array.every 和 Array.some 来处理全部或者部分满足条件

const itemArr = [
  { name: 'Jay Chou', job: 'singer'},
  { name: 'Kobe Bryant', job: 'athletes'},
  { name: 'Jackie Chan', job: 'actor'}
]

function onlySinger (){
  let isAllSinger = true;
  // 判断条件：所有人都是歌手
  for (let i of itemArr) {
    if (!isAllSinger) break;
    isAllSinger = (i.job === 'singer');
  }
  console.log(isAllSinger);   //false
}

可以通过 Array.every 来缩减代码

const itemArr = [
  { name: 'Jay Chou', job: 'singer'},
  { name: 'Kobe Bryant', job: 'athletes'},
  { name: 'Jackie Chan', job: 'actor'}
]

function onlySinger (){
  const isAllSinger = itemArr.every(item => item.job === 'singer');
  console.log(isAllSinger);   //false
}

若要检查至少有个人是歌手，同样可以使用 Array.some 来缩减代码，且不用全部遍历

const itemArr = [
  { name: 'Jay Chou', job: 'singer'},
  { name: 'Kobe Bryant', job: 'athletes'},
  { name: 'Jackie Chan', job: 'actor'}
]

function onlySinger (){
  const isAnySinger = itemArr.some(item => item.job === 'singer');
  console.log(isAnySinger);   //true
}

数组遍历 for、forEach 、map、filter、reduce、every、some要根据不同业务场景合理使用