分享几个js小技巧

原创

薛定喵君 2021-07-26 13:53:28 ©著作权

文章标签 学习 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者薛定喵君的原创作品，请联系作者获取转载授权，否则将追究法律责任

几个小技巧，让你写出更干净、漂亮的条件语句。

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

例子：

// 条件语句
function test(fruit) {
if (fruit == 'apple' || fruit == 'strawberry') {
console.log('red');
}
}

可以使用 Array.includes(Array.includes) 重写以上条件句。

function test(fruit) {
// 把条件提取到数组中
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
if (redFruits.includes(fruit)) {
console.log('red');
}
}

少写嵌套，尽早返回

让我们为之前的例子添加两个条件：

如果没有提供水果，抛出错误。
如果该水果的数量大于 10，将其打印出来。

function test(fruit, quantity) {
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
// 条件 1：fruit 必须有值
if (fruit) {
// 条件 2：必须为红色
if (redFruits.includes(fruit)) {
console.log('red');
// 条件 3：必须是大量存在
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 个 if/else 语句来筛选无效的条件
3 层 if 语句嵌套（条件 1，2 & 3）

个人而言，遵循的一个总的规则是当发现无效条件时尽早返回。

/_ 当发现无效条件时尽早返回 _/
function test(fruit, quantity) {
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
// 条件 1：尽早抛出错误
if (!fruit) throw new Error('No fruit!');
// 条件2：必须为红色
if (redFruits.includes(fruit)) {
console.log('red');
// 条件 3：必须是大量存在
if (quantity > 10) {
console.log('big quantity');
}
}
}

如此一来，我们就少写了一层嵌套。这是种很好的代码风格，尤其是在 if 语句很长的时候。
如果反转一下条件，我们还可以进一步地减少嵌套层级。注意观察下面的条件 2 语句，看看是如何做到这点的：

/_ 当发现无效条件时尽早返回 _/
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 不是红色的时候，直接返回
console.log('red');
// 条件 3：必须是大量存在
if (quantity > 10) {
console.log('big quantity');
}
}

通过反转条件 2 的条件，现在我们的代码已经没有嵌套了。当我们代码的逻辑链很长，并且希望当某个条件不满足时不再执行之后流程时，这个技巧会很好用。

使用函数默认参数和解构

我猜你也许很熟悉以下的代码，在 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) { // 如果没有提供 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 赋予一个默认值：function test(fruit = 'unknown', quantity = 1)。

那么如果 fruit 是一个对象（Object）呢？我们还可以使用默认参数吗？

function test(fruit) {
// 如果有值，则打印出来
if (fruit && fruit.name) {
console.log (fruit.name);
} else {
console.log('unknown');
}
}
//测试结果
test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple

观察上面的例子，当水果名称属性存在时，我们希望将其打印出来，否则打印『unknown』。我们可以通过默认参数和解构赋值的方法来避免写出 fruit && fruit.name 这种条件。

// 解构 —— 只得到 name 属性
// 默认参数为空对象 {}
function test({name} = {}) {
console.log (name || 'unknown');
}
//测试结果
test(undefined); // unknown
test({ }); // unknown
test({ name: 'apple', color: 'red' }); // apple

既然我们只需要 fruit 的 name 属性，我们可以使用 {name} 来将其解构出来，之后我们就可以在代码中使用 name 变量来取代 fruit.name。

我们还使用 {} 作为其默认值。如果我们不这么做的话，在执行 test(undefined) 时，你会得到一个错误 Cannot destructure property name of 'undefined' or 'null'.，因为 undefined 上并没有 name 属性。（译者注：这里不太准确，其实因为解构只适用于对象（Object），而不是因为undefined 上并没有 name 属性（空对象上也没有）。）

如果你不介意使用第三方库的话，有一些方法可以帮助减少空值（null）检查：