Loading... ## 前言 你可能一直在使用JavaScript搞开发，但很多时候你可能对它提供的最新功能并不感冒，尽管这些功能在无需编写额外代码的情况下就可以解决你的问题。 作为前端开发人员，我们必须了解这些，以便让我们的工作变得更轻松。下面就是2021年你必须知道的JavaScript编码技巧，包含普通写法和简写方法供大家借鉴哦。 ## 多个条件的判断 我们可以在数组中存储多个值，并且我们可以使用数组的 `includes`方法。 ```javascript let x = '???'; // 普通写法 if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') { // 省略代码 } // 简写方法 [推荐] if (['abc', 'def', 'ghi', 'jkl'].includes(x)) { // 省略代码 } ``` ## if - else 简写方法 当 `if-else`条件的内部不包含更大的逻辑时，简写方法会更好使。我们可以直接使用三元运算符。 ```javascript // 普通方法 let test = boolean; if (x > 100) { test = true; } else { test = false; } // 简写方法 [推荐] let test = (x > 10) ? true : false; // 当然，还有更加简洁的写法，如下 let test = x > 10; ``` 下面的代码是比较负责的多层嵌套条件判断： ```javascript let x = 300, let test2 = (x > 100) ? '大于100' : (x < 50) ? '小于50' : '在50到100之间'; console.log(test2); // 输出结果： "大于100" ``` ## Null、Undefined、空检查 当我们创建新的变量时，有时要检查我们为值引用的变量是否不为 `null`或 `Undefined`。JavaScript有一个非常好的简写方法来实现这些功能。 ```javascript // 普通方法 if (first !== null || first !== undefined || first !== '') { let second = first; } // 简写方法 [推荐] let second = first || ''; ``` ## foreach循环简写 下面是关于迭代的简写方法 ```javascript let arrayData = [8,6,4,2]; // 普通方法 for (var i = 0; i < arrayData.length; i++){ // 逻辑操作 } // 简写方法-1 for (let i in arrayData){ // 注意：此处的i为循环遍历时的数组下标 // 逻辑操作 console.log(i); //输出数组下标： 0,1,2,3 } // 简写方法-2 for (let i of arrayData){ // 注意：此处的i为循环遍历是的数组元素的值 // 逻辑操作 console.log(i); //输出数组元素的值： 8,6,4,2 } //简写方法-3 参数i,参数arr均可省略 xxx.forEach((v)=>{console.log(v)}); 参数名称可以自定义 arrayData.forEach((v,i,arr)=>{ // 逻辑操作 console.log(`${i} : ${v}`); //参数解释:v:数组的值,i:下标,arr:当前遍历的数组 }) ``` ## 比较返回 在 `return`语句中使用比较可以将代码从5行减少到1行。 ```javascript // 定义通用方法 function callMe(val) { console.log(val); } // 定义变量 let test; // 普通方法演示 function checkReturn() { if (!(test === undefined)) { return test; } else { return callMe('test'); } } // 简写方法演示 [此处类似于：Null、Undefined、空检查的板块功能] function checkReturn() { return test || callMe('test'); } // 执行调用 var data = checkReturn(); console.log(data); //输出：test ``` ## 短函数调用 我们可以使用三元运算符来实现这类函数。 ```javascript // 普通方法 function test1() { console.log('test1'); } function test2() { console.log('test2'); } var test3 = 1; if (test3 == 1) { test1(); } else { test2(); } // 简写方法 (test3 === 1 ? test1:test2)(); ``` ## switch代码块简写 我们可以将条件保存在 `key-value`对象中，然后可以根据条件使用。 ```javascript // 普通方法 switch (data) { case 1: test1(); break; case 2: test2(); break; case 3: test(); break; } // 简写方法 将条件保存在`key-value`对象 var data = { 1: test1, 2: test2, 3: test }; // 方法调用 anything：为键 data[key] && data[key](); ``` ## 多次重复一个字符串 为了多次重复相同的字符，我们可以使用 `for`循环并将它们添加到同一个循环中，如何简写呢？ ```javascript //普通方法 let test = ''; for(let i = 0; i < 5; i ++) { test += 'test '; } console.log(str); // test test test test test //简写方法 'test '.repeat(5); ``` 希望这篇教程能对大家有所帮助。祝编码快乐！ 最后修改：2022 年 09 月 08 日 © 允许规范转载 赞 都滑到这里了，不点赞再走！？
2 条评论
我知道还有一个好用的api array.forEach((当前值,[当前值的索引,当前元素所属的对象])=>当前值)
简写 array.forEach(value=>value)好像是这样子简写的吧
有的，晚点更新一下