17 个你需要知道的 JavaScript 优化技巧


你可能一直在使用JAVAScript搞开发,但很多时候你可能对它提供的最新功能并不感冒,尽管这些功能在无需编写额外代码的情况下就可以解决你的问题。

作为前端开发人员,我们必须了解这些,以便让我们的工作变得更轻松。下面就是2021年你必须知道的JavaScript编码技巧,包含普通写法和简写方法供大家借鉴哦。

1. 多个条件的判断

我们可以在数组中存储多个值,并且我们可以使用数组的includes方法。

 //普通写法 if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') { //logic } //简写方法 if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {    //logic } 

2. If true ... else简写方法

if-else条件的内部不包含更大的逻辑时,简写方法会更好使。我们可以直接使用三元运算符。

 // 普通方法 let test= boolean; if (x > 100) { test = true; } else { test = false; } // 简写方法 let test = (x > 10) ? true : false; //or we can simply use let test = x > 10; console.log(test); 

嵌套条件后,我们保留如下所示的内容:

 let x = 300, let test2 = (x > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100'; console.log(test2); // "greater than 100" 

3. Null、Undefined、空检查

当我们创建新的变量时,有时要检查我们为值引用的变量是否不为nullUndefined。JavaScript有一个非常好的简写方法来实现这些功能。

 // 普通方法 if (first !== null || first !== undefined || first !== '') { let second = first; } // 简写方法 let second = first|| ''; 

4. 空值检查和分配默认值

 let first = null, let second = first || ''; console.log("null check", test2); // output will be "" 

5. 未定义值检查和分配默认值

 let first= undefined, let second = first || ''; console.log("undefined check", test2); // output will be "" 

6. foreach循环简写

下面是关于迭代的简写方法

 // 普通方法 for (var i = 0; i < testData.length; i++) // 简写方法 for (let i in testData) or  for (let i of testData) 

每个变量的数组

 function testData(element, index, array) {   console.log('test[' + index + '] = ' + element); } [11, 24, 32].forEach(testData); // prints: test[0] = 11, test[1] = 24, test[2] = 32 

7. 比较返回

return语句中使用比较可以将代码从5行减少到1行。

 // 普通方法 let test; function checkReturn() {     if (!(test === undefined)) {         return test;     } else {         return callMe('test'); } } var data = checkReturn(); console.log(data); //output test function callMe(val) { console.log(val); } // 简写方法 function checkReturn() { return test || callMe('test'); } 

8. 短函数调用

我们可以使用三元运算符来实现这类函数。

 // 普通方法 function test1() {   console.log('test1'); }; function test2() {   console.log('test2'); }; var test3 = 1; if (test3 == 1) {   test1(); } else {   test2(); } // 简写方法 (test3 === 1? test1:test2)(); 

9.switch代码块简写

我们可以将条件保存在key-value对象中,然后可以根据条件使用。

 // 普通方法 switch (data) {   case 1:     test1();   break;     case 2:     test2();   break;     case 3:     test();   break;   // And so on... } // 简写方法 var data = {   1: test1,   2: test2,   3: test}; data[anything] && data[anything](); 

10. 多行字符串简写方法

当我们在代码中处理多行字符串时,可以这样做:

 // 普通方法 const data = 'abc abc abc abc abc abcnt' + 'test test,test test test testnt' // 简写方法 const data = `abc abc abc abc abc abc          test test,test test test test` 

11. 隐式返回简写方法

通过使用箭头函数,我们可以直接返回值,而无需编写return语句。

 // 普通方法 function getArea(diameter) {   return Math.PI * diameter } // 简写方法 getArea = diameter => (   Math.PI * diameter; ) 

12.查找条件简写方法

如果我们有代码来检查类型并根据类型需要调用不同的方法,那么我们往往或选择使用多个else if或选择使用switch,但是如果我们有比这更好的简写方法呢?

 // 普通方法 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); } // 简写方法 var types = {   test1: test1,   test2: test2,   test3: test3,   test4: test4 }; var func = types[type]; (!func) && throw new Error('Invalid value ' + type); func(); 

13. Object.entries()

该特性可以将一个对象转换成一个对象数组。

 const data = { test1: 'abc', test2: 'cde', test3: 'efg' }; const arr = Object.entries(data); console.log(arr);/** Output: [ [ 'test1', 'abc' ],   [ 'test2', 'cde' ],   [ 'test3', 'efg' ] ] **/ 

14. Object.values()

这也是ES8中引入的一个新功能,执行函数类似于Object.entries(),但没有key部分:

 const data = { test1: 'abc', test2: 'cde' }; const arr = Object.values(data); console.log(arr); /** Output: [ 'abc', 'cde'] **/ 

15. 多次重复一个字符串

为了多次重复相同的字符,我们可以使用for循环并将它们添加到同一个循环中,如何简写呢?

 //普通方法  let test = '';  for(let i = 0; i < 5; i ++) {    test += 'test ';  }  console.log(str); // test test test test test  //简写方法  'test '.repeat(5); 

16. 幂的简写方法

数学指数幂函数的简写方法如下:

 //普通方法  Math.pow(2,3); // 8 //简写方法  2**3 // 8 

17. 数字分隔符

你现在只需使用 _ 即可轻松分隔数字。这将使处理大量数据变得更加轻松。

 //old syntax let number = 98234567 //new syntax let number = 98_234_567 

如果你想使用JavaScript最新版本(ES2021/ES12)的最新功能,请检查以下内容:

1.replaceAll():返回一个新字符串,其中所有匹配的模式都被新的替换词替换。

2.Promise.any():需要一个可迭代的Promise对象,当一个Promise完成时,返回一个带有值的Promise。

3.weakref:此对象持有对另一个对象的弱引用,不阻止该对象被垃圾收集。

4.FinalizationRegistry:让你在对象被垃圾回收时请求回调。

5.私有方法:方法和访问器的修饰符:私有方法可以用#声明。

6.逻辑运算符:&&||运算符。

7.Intl.ListFormat:此对象启用对语言敏感的列表格式。

8.Intl.DateTimeFormat:该对象启用对语言敏感的日期和时间格式。

希望这篇教程能对大家有所帮助。祝编码快乐!

本文收集自互联网,如果发现有涉嫌侵权或违法违规的内容,请联系6532516@qq.com以便进行及时清除
分享到