写了这么多年 JavaScript ，竟然还不知道这些技巧？
<p>不少人有五年的 <code>JavaScript</code> 经验，但实际上可能只是一年的经验重复用了五次而已。完成同样的逻辑和功能，有人可以写出意大利面条一样的代码，也有人两三行简洁清晰的代码就搞定了。简洁的代码不但方便阅读，还能减少复杂逻辑和出错的可能性。本文就介绍一些常用的<code>JavaScript</code>简化技巧，日常开发都用得上。</p><h2 id="1-简化条件表达式">1. 简化条件表达式</h2>
<p>经常碰到这种情况，要判断某个变量是否为指定的某些值，用常规的逻辑表达式会很长。我的做法是把这些值放进数组里：</p>
<pre><code>// 太长的逻辑表达式
if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
//其他逻辑
}
// 简写
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
//其他逻辑
}
</code></pre>
<h2 id="2-简化-if--else">2. 简化 if ... else</h2>
<p><code>if...else</code>太常用了，以至于很多人都忘了其实还有其他方式来判断条件。比如简单的变量赋值，完全没必要用这种冗长的语句，一行表达式就搞定了：</p>
<pre><code>// 新手的写法
let test= boolean;
if (x > 100) {
test = true;
} else {
test = false;
}
// 简写表达式
let test = (x > 10) ? true : false;
// 更直接的
let test = x > 10;
console.log(test);
</code></pre>
<p>三元表达式可以做复杂的条件分支判断，不过牺牲了一些可读性：</p>
<pre><code>let x = 300,
let test2 = (x > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100';
console.log(test2); // "greater than 100"
</code></pre>
<h2 id="3-判空并赋默认值">3. 判空并赋默认值</h2>
<p>Code Review 的时候我经常看到这样的代码，判断变量不是<code>null</code>，<code>undefined</code>，<code>''</code>的时候赋值给第二个变量，否则给个默认值：</p>
<pre><code>if (first !== null || first !== undefined || first !== '') {
let second = first;
}
// 简写
let second = first || '';
</code></pre>
<h2 id="4-简写循环遍历">4. 简写循环遍历</h2>
<p><code>for</code> 循环是最基本的，但是有点繁琐。可以用<code>for...in</code>、<code>for...of</code>或者<code>forEach</code>代替：</p>
<pre><code>// Longhand
for (var i = 0; i < testData.length; i++)
// Shorthand
for (let i in testData) orfor (let i of testData)
</code></pre>
<p>数组遍历：</p>
<pre><code>function testData(element, index, array) {
console.log('test[' + index + '] = ' + element);
}
.forEach(testData);
// 打印输出: test = 11, test = 24, test = 32
</code></pre>
<h2 id="4-简化-switch">4. 简化 switch</h2>
<p>这个技巧也很常用，把<code>switch</code>转换成对象的<code>key-value</code>形式，代码简洁多了：</p>
<pre><code>// Longhand
switch (data) {
case 1:
test1();
break;
case 2:
test2();
break;
case 3:
test();
break;
// And so on...
}
// Shorthand
var data = {
1: test1,
2: test2,
3: test
};
data && data();
</code></pre>
<h2 id="5-简化多行字符串拼接">5. 简化多行字符串拼接</h2>
<p>如果一个字符串表达式过长，我们可能会拆成多行拼接的方式。不过随着 ES6 的普及，更好的做法是用模板字符串：</p>
<pre><code>//longhand
const data = 'abc abc abc abc abc abc\n\t'
+ 'test test,test test test test\n\t'
//shorthand
const data = `abc abc abc abc abc abc
test test,test test test test`
</code></pre>
<h2 id="6-善用箭头函数简化-return">6. 善用箭头函数简化 return</h2>
<p>ES6 的箭头函数真是个好东西，当函数简单到只需要返回一个表达式时，用箭头函数最合适不过了，<code>return</code>都不用写：</p>
<pre><code>Longhand:
//longhand
function getArea(diameter) {
return Math.PI * diameter
}
//shorthand
getArea = diameter => (
Math.PI * diameter;
)
</code></pre>
<h2 id="7-简化分支条件语句">7. 简化分支条件语句</h2>
<p>又是你，<code>if...else if...else</code>！跟<code>switch</code>类似，也可以用<code>key-value</code>形式简化：</p>
<pre><code>// Longhand
if (type === 'test1') {
test1();
}
else if (type === 'test2') {
test2();
}
else if (type === 'test3') {
test3();
}
else if (type === 'test4') {
test4();
} else {
throw new Error('Invalid value ' + type);
}
// Shorthand
var types = {
test1: test1,
test2: test2,
test3: test3,
test4: test4
};
var func = types;
(!func) && throw new Error('Invalid value ' + type); func();
</code></pre>
<h2 id="8-重复字符串-n-次">8. 重复字符串 N 次</h2>
<p>有时候出于某种目的需要将字符串重复 N 次，最笨的方法就是用<code>for</code>循环拼接。其实更简单的方法是用<code>repeat</code>：</p>
<pre><code>//longhand
let test = '';
for(let i = 0; i < 5; i ++) {
test += 'test ';
}
console.log(str); // test test test test test
//shorthand
'test '.repeat(5);
</code></pre>
<h2 id="9-指数运算">9. 指数运算</h2>
<pre><code>//longhand
Math.pow(2,3); // 8
//shorthand
2**3 // 8
</code></pre>
<h2 id="10-数字分隔符">10. 数字分隔符</h2>
<p>这是比较新的语法，ES2021 提出来的，大数字在书写的时候可以用下划线分割，提高了可读性：</p>
<pre><code>// 旧语法
let number = 98234567
// 新语法
let number = 98_234_567
</code></pre>
<h2 id="总结">总结</h2>
<p>没啥好总结的，拿去用就是了。</p>
<p>这个图的信息量太大了，你们猜猜是什么</p>
<p><img src="https://img2020.cnblogs.com/blog/121167/202009/121167-20200914095203786-71350357.jpg" alt="" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/lzkwin/p/14372297.html
頁:
[1]