前言
在使用 JavaScript 的时候，有时我们会处理大量条件语句，这里有5个技巧帮助我们编写更简洁的条件语句。
一、对多个条件使用 Array.includes
例子：
function condition(fruit) {
if (fruit == 'apple' || fruit == 'banana') {
console.log(fruit);
}
}
上面的例子看起来不错，但如果有更多水果需要判断呢，比如桃子、草莓、橙子等等，我们要用更多的 || 来扩展这个表述吗？
我们可以使用 Array.includes 重写上面的条件
function condition(fruit){
const allFruit = ['apple','banana','peach'，'Strawberry','orange'];
if(allFruit.includes(fruit)){
console.log(fruit)
}
}
这样做之后，代码看起来更简洁。
二、更少的嵌套，尽早返回
例子：
// 尽早返回不存在的条件
function condition(fruit, quantity) {
const allFruits = ['apple','banana','peach'，'Strawberry','orange'];
if (!fruit) throw new Error('No fruit!');
if (allFruits.includes(fruit)) {
console.log(fruit);
if (quantity > 10) {
console.log(quantity);
}
}
}
通过反转条件和提早返回，我们可以进一步减少嵌套：
function condition(fruit, quantity) {
const allFruits = ['apple','banana','peach'，'Strawberry','orange'];
if (!fruit) throw new Error('No fruit!');
if (!allFruits.includes(fruit)) return ;
console.log(fruit)
if (quantity > 10) {
console.log(quantity);
}
}
三、使用默认的函数参数和解构
例子：
function condition(fruit, quantity) {
if (!fruit) return;
const q = quantity || 1;
console.log(`We have ${q} ${fruit}!`);
}
condition('banana'); // We have 1 banana!
condition('apple', 2); // We have 2 apple!
使用默认参数和解构：
function condition({name} = {}, quantity = 1) {
console.log (name || 'unknown');
}
condition(undefined); // unknown
condition({ }); // unknown
condition({ name: 'apple', color: 'red' }); // apple
四、选择 Map 或对象字面量，而不是 Switch 语句
例子：
function condition(color) {
switch (color) {
case 'red':
return ['apple', 'strawberry'];
case 'yellow':
return ['banana', 'pineapple'];
case 'purple':
return ['grape', 'plum'];
default:
return [];
}
}
condition(null); // []
condition('yellow'); // ['banana', 'pineapple']
上面的代码似乎没有什么问题，但我发现它相当冗长。同样的结果可以通过对象字面量和更简洁的语法来实现：
对象字面量：
const fruitColor = {
red: ['apple', 'strawberry'],
yellow: ['banana', 'pineapple'],
purple: ['grape', 'plum']
};
function condition(color) {
return fruitColor[color] || [];
}
使用 Map 实现相同效果：
const fruitColor = new Map()
.set('red', ['apple', 'strawberry'])
.set('yellow', ['banana', 'pineapple'])
.set('purple', ['grape', 'plum']); function condition(color) {
return fruitColor.get(color) || [];
}
使用 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 condition(color) {
return fruits.filter(f => f.color == color);
}
五、所有或部分使用 Array.every & Array.some 的条件
例子：
检查所有水果都为红色：
const fruits = [
{ name: 'apple', color: 'red' },
{ name: 'banana', color: 'yellow' },
{ name: 'grape', color: 'purple' }
]; function condition() {
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 condition() {
const isAnyRed = fruits.some(f => f.color == 'red'); console.log(isAnyRed); // true
}