2021年前端开发者需要知道的34种JS优化技巧

<div id="js_content">
星标公众号前端开发博客，回复“加群”
加入我们一起学习，天天进步
<img src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-f3dcf340516276735ce01cfeba48e537.png">
作者丨 Atit
译者丨王者
策划丨田晓旭
开发者总是在学习新东西，而跟上这些技术的变化不应该比之前更难。我写这篇文章的目的是介绍 JavaScript 的一些最佳实践，作为前端开发人员，掌握了这些最佳实践会让我们在 2021 年的工作变得更轻松。
你可能做了很长时间的 JavaScript 开发，但有时候你可能没有使用最新的 JavaScript 特性或技巧，这些特性和技巧可以在不需要编写额外代码的情况下解决你的问题。它们可以帮助你写出干净且优化的 JavaScript 代码。此外，如果你在 2021 年准备去参加面试，可以参考本文的内容。
1. 带有多个条件的 if 语句
把多个值放在一个数组中，然后调用数组的 includes 方法。
<pre class="blockcode"><code class="language-go">//longhand
if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
//logic
}
//shorthand
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
//logic
}
</code></pre>
2. 简化 if true...else
对于不包含大逻辑的 if-else 条件，可以使用下面的快捷写法。我们可以简单地使用三元运算符来实现这种简化。
<pre class="blockcode"><code class="language-go">// Longhand
let test: boolean;
if (x > 100) {
test = true;
} else {
test = false;
}
// Shorthand
let test = (x > 10) ? true : false;
//or we can use directly
let test = x > 10;
console.log(test);
</code></pre>
如果有嵌套的条件，可以这么做。
<pre class="blockcode"><code class="language-go">let x = 300,
test2 = (x > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100';
console.log(test2); // "greater than 100"
</code></pre>
3. 声明变量
当我们想要声明两个具有相同的值或相同类型的变量时，可以使用这种简写。
<pre class="blockcode"><code class="language-go">//Longhand
let test1;
let test2 = 1;
//Shorthand
let test1, test2 = 1;
</code></pre>
4. null、undefined 和空值检查
当我们创建了新变量，有时候想要检查引用的变量是不是为非 null 或 undefined。JavaScript 确实有一个很好的快捷方式来实现这种检查。
<pre class="blockcode"><code class="language-go">// Longhand
if (test1 !== null || test1 !== undefined || test1 !== '') {
let test2 = test1;
}
// Shorthand
let test2 = test1 || '';
</code></pre>
5. null 检查和默认赋值
<pre class="blockcode"><code class="language-go">let test1 = null,
test2 = test1 || '';
console.log("null check", test2); // output will be ""
</code></pre>
6. undefined 检查和默认赋值
<pre class="blockcode"><code class="language-go">let test1 = undefined,
test2 = test1 || '';
console.log("undefined check", test2); // output will be ""
</code></pre>
一般值检查
<pre class="blockcode"><code class="language-go">let test1 = 'test',
test2 = test1 || '';
console.log(test2); // output: 'test'
</code></pre>
另外，对于上述的 4、5、6 点，都可以使用?? 操作符。
如果左边值为 null 或 undefined，就返回右边的值。默认情况下，它将返回左边的值。
<pre class="blockcode"><code class="language-go">const test= null ?? 'default';
console.log(test);
// expected output: "default"
const test1 = 0 ?? 2;
console.log(test1);
// expected output: 0
</code></pre>
7. 给多个变量赋值
当我们想给多个不同的变量赋值时，这种技巧非常有用。
<pre class="blockcode"><code class="language-go">//Longhand
let test1, test2, test3;
test1 = 1;
test2 = 2;
test3 = 3;
//Shorthand
let [test1, test2, test3] = [1, 2, 3];
</code></pre>
8. 简便的赋值操作符
在编程过程中，我们要处理大量的算术运算符。这是 JavaScript 变量赋值操作符的有用技巧之一。
<pre class="blockcode"><code class="language-go">// Longhand
test1 = test1 + 1;
test2 = test2 - 1;
test3 = test3 * 20;
// Shorthand
test1++;
test2--;
test3 *= 20;
</code></pre>
9. if 判断值是否存在
这是我们都在使用的一种常用的简便技巧，在这里仍然值得