「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」

前言

使用 JavaScript 时，我们经常需要处理很多条件语句，这里分享一些小技巧，可以让你编写更好/更清晰的条件语句。同时这篇文章也是对上篇学会这些鲜有人知的coding技巧，从此早早下班liao-JavaScript实战技巧篇的一些实战场景应用。

花草丛中过，花香赠与君；君若颜开笑，留下赞与情。

多个条件怎么处理

我们来看看下面的例子：

JavaScript 代码:

function test(animal) {
  if (animal == 'cat' || animal == 'dog'||animal == 'cattle') {
    console.log('yes');
  }
}

test函数中的条件语句看起来是没什么问题，但是如果在加几种呢？比喻说sheep、pig、chicken，这时候在看我们的条件语句，就已经十分臃肿了。

function test(animal) {
  if (animal == 'cat' || animal == 'dog'||animal == 'cattle'||animal == 'sheep'||animal == 'pig'||animal == 'chicken') {
    console.log('yes');
  }
}

这段代码看起来可读性以及可维护性已经很差了，如果再加上一些条件，感觉你看见了也会很烦躁。逻辑或||显然已经不太适合这种场景了，我们可以使用 Array.includes 重写上面的条件语句。

function test(animal) {
// 条件提取到数组中
  const yesArr = ['cat', 'dog', 'cherry', 'cattle','sheep','pig','chicken'];
 
  if (yesArr.includes(animal)) {
    console.log('yes');
  }
}

这样写一下是不是就很清晰，代码看起来也更整洁了。

恰到好处的 return 语句

让我们扩展前面的示例，再包含另外两个条件：

如果没有提供某种动物/非动物，抛出错误
接受动物数量 number（数量）参数，如果超过 20，则并打印相关信息。

function test(animal, number) {
  const yesArr = ['cat', 'dog', 'cherry', 'cattle','sheep','pig','chicken'];
 
  // 条件 1：animal 必须有值
  if (animal) {
    // 条件 2：必须为yesArr中的动物
    if (redFruits.includes(animal)) {
      console.log('yes');
      // 条件 3：数量必须大于 10
      if (number > 20) {
        console.log('quite a lot');
      }
    }
  } else {
    throw new Error('No animal!');
  }
}
 
// 测试结果
test(null); // 抛出错误：No animal!
test('cat'); // 打印：yes
test('cat', 20); // 打印：yes，quite a lot

这是我们平时随手就来的代码，看起来是没毛病，但是呢是否有可优化的空间和余地呢？看看上面的代码，我们有：

1 个 if / else 语句过滤掉无效条件
3 层 if 语句嵌套（分别是条件1,2和3）

在发现无效条件时提前throw new Error 。试试看

function test(animal, number) {
    const yesArr = ['cat', 'dog', 'cherry', 'cattle','sheep','pig','chicken'];
    // 条件 1：animal 必须有值,否则提前抛出错误
    if (!animal) throw new Error('No animal!');
    // 条件 2：必须为yesArr中的动物
    if (redFruits.includes(animal)) {
      console.log('yes');
      // 条件 3：数量必须大于 10
      if (number > 20) {
        console.log('quite a lot');
      }
    }
}
 
// 测试结果
test(null); // 抛出错误：No animal!
test('cat'); // 打印：yes
test('cat', 20); // 打印：yes，quite a lot

可以看到，减少一层嵌套，看起来已经舒服了不少。我们在看公司老项目时，长篇大论的if(){}else if(){}是否让你痛哭流涕，一边哭泣一边mmp还不忘慢慢寻找问题到底出在哪？欢迎大家把长篇大论的if(){}else if(){}图片留在评论区，让hxd也能体会出你的痛苦，你不是一个人在痛苦😫，还有一堆hxd在你身旁同仇敌忾（比惨大赛可不能不道德的笑出声哦~😂）

回归正题，如果通过反转条件并提前 return ，我们可以进一步减少嵌套。请查看下面的条件 2 ，看看我们是如何做到的：

function test(animal, number) {
    const yesArr = ['cat', 'dog', 'cherry', 'cattle','sheep','pig','chicken'];
    // 条件 1：animal 必须有值,否则提前抛出错误
    if (!animal) throw new Error('No animal!');
    // 条件 2：必须为yesArr中的动物
    if (!redFruits.includes(animal)) return
    // 条件 3：数量必须大于 10
    if (number > 20) {
    console.log('quite a lot');
    }
}
 
// 测试结果
test(null); // 抛出错误：No animal!
test('cat'); // 打印：yes
test('cat', 20); // 打印：yes，quite a lot

可以看到，减少一个条件语句的使用，不但可以节约性能，更能够极大的提高代码的可读性以及愉悦性，最起码看起来很舒服，不会出现多么痛的领悟！！！可以得出结论

减少嵌套，代码看起来舒服很多
减少嵌套，可以减少思考，少掉头发

追求更少的嵌套，提前return，但是不要过度哦~。

劲酒虽好，可不要贪杯哦~

函数的默认参数和解构

在使用 JavaScript 时总是需要检查 null / undefined 值并分配默认值：

function test(animal, number) {
  if (!animal) return;
  const count = number || 1; // 如果没有提供 number 参数，则默认为 1
 
  console.log(`${count}只${animal}!`);
}
 
// 测试结果
test('pig'); // 1只pig!
test('pig', 2); // 2只pig!

我们可以通过分配默认函数参数来消除变量 count ,

function test(animal, number=1) {
  if (!animal) return;
  console.log(`${number}只${animal}!`);
}
 
// 测试结果
test('pig'); // 1只pig!
test('pig', 2); // 2只pig!

如果我们的 animal 是一个 Object 对象怎么办？我们可以指定默认参数吗？答案是肯定的。

function test(animal) { 
  // 如果有值，则打印 animal.name
  if (animal && animal.name)  {
    console.log (animal.name);
  } else {
    console.log('what???');
  }
}
 
//测试结果
test(undefined); // what???
test({ }); // what???
test({ name: 'pig', sex: 'boy' }); // pig

看看上面的例子，我们想要的是如果 animal.name 可用则打印水果名称，否则将打印 what??? 。我们可以使用默认函数参数和解构(destructing) 来避免animal && animal.name这样的检查。

function test({name}={}) { 
  console.log (name || 'what???');
}
 
//测试结果
test(undefined); // what???
test({ }); // what???
test({ name: 'pig', sex: 'boy' }); // pig

由于我们只需要来自 animal 的 name 属性，我们可以使用 {name} 来解构参数，然后我们可以在代码中使用 name 作为变量来取代animal.name。

我们还将空对象 {} 指定为默认值。如果我们不这样做，你将在执行行测试时遇到test(undefined) – Cannot destructure property name of 'undefined' or 'null'.(无法解析’undefined’或’null’的属性名称)。因为 undefined中没有 name 属性。

Switch语句真的好？

先来个例子吧,根据颜色打印对应的水果

function test(color) {
  // 使用 switch case 语句，根据颜色找出对应的水果
  switch (color) {
    case 'red':
      return ['apple', 'strawberry'];
    case 'yellow':
      return ['banana', 'pineapple'];
    case 'purple':
      return ['grape', 'plum'];
    default:
      return [];
  }
}
 
//测试结果
test(null); // []
test('yellow'); // ['banana', 'pineapple']

代码看起来是不是很冗长，有没有更好的写法呢？使用具有更清晰语法的 object 字面量试试吧。

// 使用对象字面量，根据颜色找出对应的水果
  const fruitColor = {
    red: ['apple', 'strawberry'],
    yellow: ['banana', 'pineapple'],
    purple: ['grape', 'plum']
  };
 
function test(color) {
  return fruitColor[color] || [];
}

使用 Map 来试试看：

// 使用 Map ，根据颜色找出对应的水果
  const fruitColor = new Map()
    .set('red', ['apple', 'strawberry'])
    .set('yellow', ['banana', 'pineapple'])
    .set('purple', ['grape', 'plum']);
 
function test(color) {
  return fruitColor.get(color) || [];
}

Map 是 ES2015(ES6) 引入的新的对象类型，允许您存储键值对。

更简单的写法

Array.filter来实现也是可以哒。编码的乐趣需要用心体会哦~什么是快乐星球？？？

 const fruits = [
    { name: 'apple', color: 'red' }, 
    { name: 'strawberry', color: 'red' }, 
    { name: 'banana', color: 'yellow' }, 
    { name: 'pineapple', color: 'yellow' }, 
    { name: 'grape', color: 'purple' }, 
    { name: 'plum', color: 'purple' }
];
function test(color) {
  // 使用 Array filter  ，根据颜色找出对应的水果
  return fruits.filter(f => f.color == color);
}

总有些惊奇的际遇,比方说当我遇见你。

Array.every 和 Array.some来处理条件语句

使用Javascript Array函数可以有效的减少代码行，下面看代码：

const fruits = [
    { name: 'apple', color: 'red' },
    { name: 'banana', color: 'yellow' },
    { name: 'grape', color: 'purple' }
  ];
 
function test() {
  let isAllRed = true;
 
  // 条件：所有的水果都必须是红色
  for (let f of fruits) {
    if (!isAllRed) break;
    isAllRed = (f.color == 'red');
  }
 
  console.log(isAllRed); // false
}

使用 Array.every 试试吧：

const fruits = [
    { name: 'apple', color: 'red' },
    { name: 'banana', color: 'yellow' },
    { name: 'grape', color: 'purple' }
  ];
 
function test() {
  // 条件：简短方式，所有的水果都必须是红色
  const isAllRed = fruits.every(f => f.color == 'red');
 
  console.log(isAllRed); // false
}

如果我们想要检查是否有至少一个水果是红色的，我们可以使用 Array.some 仅用一行代码就实现出来。

const fruits = [
    { name: 'apple', color: 'red' },
    { name: 'banana', color: 'yellow' },
    { name: 'grape', color: 'purple' }
];
 
function test() {
  // 条件：是否存在红色的水果
  const isAnyRed = fruits.some(f => f.color == 'red');
 
  console.log(isAnyRed); // true
}

总结

恰到好处的使用一些技巧，不但可以让你的Coding速度与质量得到升华，而且可以起到无法估量的价值。毕竟让一个人快乐是无法用价值估量的，你说呢？

写在最后

我是凉城a，一个前端，热爱技术也热爱生活。

与你相逢，我很开心。

如果你想了解更多，请点这里，期待你的小⭐⭐

文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞👍和关注😊
本文首发于掘金，未经许可禁止转载💌

这些Coding技巧教会你如何更好地编写JavaScript(ES6)中的条件语句

前言