js优化技巧

Posted 2021-07-19 火腿肠烧烤大赛冠军

1、使用 Array.includes 来处理多个条件
请看下面的列子：
// condition
function test(fruit) {
if (fruit == ‘apple’ || fruit == ‘strawberry’) {
console.log(‘red’);
}
}
上面的列子看起来似乎没有什么问题。但是，如果我们还有更多的红色水果呢？是否要用
更多的 || 操作符来扩展该语句，这时可以利用 Array.includes重写上面的条件语句

function test(fruit) {
// 条件提取到数组中
const redFruits = [‘apple’, ‘strawberry’, ‘cherry’, ‘cranberries’];

if (redFruits.includes(fruit)) {
console.log(‘red’);
}
}
将所有的可能性条件提取到一个数组中。这样，可以让代码看起来更整洁
2、减少嵌套，提前使用 return 语句
扩展前面的示例，在包含另外两个条件：
1.如果没有提供水果，抛出错误；
2.接受水果数量参数，如果超过10，则打印出相关信息；
function test(fruit, quantity) {
const redFruits = [‘apple’, ‘strawberry’, ‘cherry’, ‘cranberries’];
// 条件 1：fruit 必须有值
if (fruit) {
// 条件 2：必须为红色
if (redFruits.includes(fruit)) {
console.log(‘red’);

   // 条件 3：数量必须大于 10
   if (quantity > 10) {
     console.log('big quantity');
   }
 }

} else {
throw new Error(‘No fruit!’);
}
}

// 测试结果
test(null); // 抛出错误：No fruits
test(‘apple’); // 打印：red
test(‘apple’, 20); // 打印：red，big quantity

上面的代码，我们有：
1.1个 if/elss 语句过滤掉无效条件
2.3层 if 语句嵌套（分别是条件1，2和3）
其实可以遵循一般规则是 在发现无效条件时提前 return

/* 在发现无效条件时提前 return */
function test(fruit, quantity) {
const redFruits = [‘apple’, ‘strawberry’, ‘cherry’, ‘cranberries’];
// 条件 1：提前抛出错误
if (!fruit) return flase;
// 条件2：必须为红色
if (redFruits.includes(fruit)) {
console.log(‘red’);
// 条件 3：数量必须大于 10
if (quantity > 10) {
console.log(‘big quantity’);
}
}
}
这样做，我们可以减少一个嵌套层级，这种编码风格很好，特别是当你的if 语句很长时，
如果通过反条件并提前return ，我们可以进一步减少嵌套，

 /* 在发现无效条件时提前 return */

function test(fruit, quantity) {
const redFruits = [‘apple’, ‘strawberry’, ‘cherry’, ‘cranberries’];
if (!fruit) throw new Error(‘No fruit!’); // 条件 1：提前抛出错误
if (!redFruits.includes(fruit)) return; // 条件 2：当 fruit 不是红色的时候，提前 return
console.log(‘red’);
// 条件 3：必须是大量存在
if (quantity > 10) {
console.log(‘big quantity’);
}
}
3、使用函数的默认参数 和解构
下面的代码可能看起来很熟悉，我们在使用javascript时总是需要检查null/undefined值并分配默认值
function test(fruit, quantity) {
if (!fruit) return;
const q = quantity || 1; // 如果没有提供 quantity 参数，则默认为 1
console.log(We have ${q} ${fruit}!);
}

// 测试结果
test(‘banana’); // We have 1 banana!
test(‘apple’, 2); // We have 2 apple!

实际上，我们可以通过分配默认函数参数来消除变量q
function test(fruit, quantity = 1) { // i如果没有提供 quantity 参数，则默认为 1
if (!fruit) return;
console.log(We have ${quantity} ${fruit}!);
}

// 测试结果
test(‘banana’); // We have 1 banana!
test(‘apple’, 2); // We have 2 apple!

如果参数fruit是一个 Object 对象怎么办，我们可以指定默认参数吗
function test(fruit) {
// 如果有值，则打印 fruit.name
if (fruit && fruit.name) {
console.log (fruit.name);
} else {
console.log(‘unknown’);
}
}

//测试结果
test(undefined); // unknown
test({ }); // unknown
test({ name: ‘apple’, color: ‘red’ }); // apple
看看上面的例子，我们想要的是如果 fruit.name 可用则打印水果名称，
否则将打印 unknown 。我们可以使用默认函数参数和解构(destructing)
来避免 fruit && fruit.name 这样的检查。

// 解构 —— 只获得 name 属性
// 参数默认分配空对象 {}
function test({name} = {}) {
console.log (name || ‘unknown’);
}
//测试结果
test(undefined); // unknown
test({ }); // unknown
test({ name: ‘apple’, color: ‘red’ }); // apple
4、选择 Map/Object 字面量，而不是 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 ，根据颜色找出对应的水果
const fruitColor = new Map()
.set(‘red’, [‘apple’, ‘strawberry’])
.set(‘yellow’, [‘banana’, ‘pineapple’])
.set(‘purple’, [‘grape’, ‘plum’]);

function test(color) {
return fruitColor.get(color) || [];
}

亦或者
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);
}
5、使用 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
}