首页-教程-Web前端

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

 4513

本篇文章我们一起来看一下JavaScript的18个优化技巧，适合所有正在使用 JavaScript 编程的开发人员阅读，本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作，希望对大家有帮助。


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


1. 多个条件的判断

当我们需要进行多个值的判断时，我们可以使用数组的includes方法。

  1. //Bad
  2. if (x === 'iphoneX' || x === 'iphone11' || x === 'iphone12') {
  3. //code... 
  4. }
  5. //Good
  6. if (['iphoneX', 'iphone11', 'iphone12'].includes(x)) {
  7. //code...
  8. }


2. If true … else

当if-else条件的内部不包含更大的逻辑时，三目运算符会更好。

  1. // Bad
  2. let test= boolean;
  3. if (x > 100) {
  4.   test = true;
  5. } else {
  6.   test = false;
  7. }
  8. // Good
  9. let test = (x > 10) ? true : false;
  10. //or we can simply use
  11. let test = x > 10;

嵌套条件后，我们保留如下所示的内容（复杂点的三目）：

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


3. Null、Undefined、’’ 空值检查

有时要检查我们为值引用的变量是否不为null或Undefined 或 '' ,我们可以使用短路写法

  1. // Bad
  2. if (first !== null || first !== undefined || first !== '') {
  3.   let second = first;
  4. }
  5. // Good 短路写法
  6. let second = first|| '';


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

当我们赋值，发现变量为空需要分配默认值 可以使用以下短路写法

  1. let first = null,
  2. let second = first || 'default'
  3. console.log(second)


5. 双位操作符

位操作符是 JavaScript 初级教程的基本知识点，但是我们却不常使用位操作符。因为在不处理二进制的情况下，没有人愿意使用 1 和 0。

但是双位操作符却有一个很实用的案例。你可以使用双位操作符来替代 Math.floor( )。双否定位操作符的优势在于它执行相同的操作运行速度更快

  1. // Bad
  2. Math.floor(4.9) === 4  //true
  3. // Good
  4. ~~4.9 === 4  //true


6. ES6常见小优化 - 对象属性

  1. const x,y = 5
  2. // Bad
  3. const obj = { x:x, y:y }
  4. // Good
  5. const obj = { x, y }


7. ES6常见小优化-箭头函数

  1. //Bad
  2. function sayHello(name) {
  3.   console.log('Hello', name);
  4. }
  5. setTimeout(function() {
  6.   console.log('Loaded')
  7. }, 2000)
  8. list.forEach(function(item) {
  9.   console.log(item)
  10. })
  11. // Good
  12. const sayHello = name => console.log('Hello', name)
  13. setTimeout(() => console.log('Loaded'), 2000)
  14. list.forEach(item => console.log(item))


8. ES6常见小优化-隐式返回值

返回值是我们通常用来返回函数最终结果的关键字。只有一个语句的箭头函数，可以隐式返回结果（函数必须省略括号（{ }），以便省略返回关键字）。

要返回多行语句（例如对象文本），需要使用（）而不是{ }来包裹函数体。这样可以确保代码以单个语句的形式进行求值。

  1. //Bad
  2. function calcCircumference(diameter) {
  3.   return Math.PI * diameter
  4. }
  5. // Good
  6. const calcCircumference = diameter => (
  7.   Math.PI * diameter
  8. )


9. ES6常见小优化-解构赋值

  1. const form = { a:1, b:2, c:3 }
  2. //Bad
  3. const a = form.a
  4. const b = form.b
  5. const c = form.c
  6. // Good
  7. const { a, b, c } = form


10. ES6常见小优化-展开运算符

返回值是我们通常用来返回函数最终结果的关键字。只有一个语句的箭头函数，可以隐式返回结果（函数必须省略括号（{ }），以便省略返回关键字）。

要返回多行语句（例如对象文本），需要使用（）而不是{ }来包裹函数体。这样可以确保代码以单个语句的形式进行求值。

  1. const odd = [ 1, 3, 5 ]
  2. const arr = [ 1, 2, 3, 4 ]
  3. // Bad
  4. const nums = [ 2, 4, 6 ].concat(odd)
  5. const arr2 = arr.slice( )
  6. // Good
  7. const nums = [2 ,4 , 6, ...odd]
  8. const arr2 = [...arr]


11. 数组常见处理

掌握数组常见方法，记在脑子里，不要写的时候再去看API了，这样可以有效提升编码效率，毕竟这些方法每天都在用

every some filter map forEach find findIndex reduce includes

  1. const arr = [1,2,3]
  2. //every 每一项都成立，才会返回true
  3. console.log( arr.every(it => it>0 ) ) //true
  4. //some 有一项都成了，就会返回true
  5. console.log( arr.some(it => it>2 ) ) //true
  6. //filter 过滤器
  7. console.log( arr.filter(it => it===2 ) ) //[2]
  8. //map 返回一个新数组
  9. console.log( arr.map(it => it==={id:it} ) ) //[ {id:1},{id:2},{id:3} ]
  10. //forEach 没有返回值
  11. console.log( arr.forEach(it => it===console.log(it)) ) //undefined
  12. //find 查找对应值 找到就立马返回符合要求的新数组
  13. console.log( arr.find(it => it===it>2) ) //3
  14. //findIndex 查找对应值 找到就立马返回符合要求新数组的下标
  15. console.log( arr.findIndex(it => it===it>2) ) //2
  16. //reduce 求和或者合并数组
  17. console.log( arr.reduce((prev,cur) => prev+cur) ) //6
  18. //includes 求和或者合并数组
  19. console.log( arr.includes(1) ) //true
  20. //数组去重
  21. const arr1 = [1,2,3,3]
  22. const removeRepeat = (arr) => [...new Set(arr1)]//[1,2,3]
  23. //数组求最大值
  24. Math.max(...arr)//3
  25. Math.min(...arr)//1
  26. //对象解构 这种情况也可以使用Object.assign代替
  27. let defaultParams={
  28.     pageSize:1,
  29.     sort:1
  30. }
  31. //goods1
  32. let reqParams={
  33.     ...defaultParams,
  34.     sort:2
  35. }
  36. //goods2
  37. Object.assign( defaultParams, {sort:2} )


12. 比较返回

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

  1. // Bad
  2. let test
  3. const checkReturn = () => {
  4.     if (test !== undefined) {
  5.         return test;
  6.     } else {
  7.         return callMe('test');
  8.     }
  9. }
  10. // Good
  11. const checkReturn = () => {
  12.     return test || callMe('test');
  13. }


13. 短函数调用

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

  1. const test1 =() => {
  2.   console.log('test1');
  3. }
  4. const test2 =() => {
  5.   console.log('test2');
  6. }
  7. const test3 = 1;
  8. if (test3 == 1) {
  9.   test1()
  10. } else {
  11.   test2()
  12. }
  13. // Good
  14. test3 === 1? test1():test2()


14.switch代码块(ifelse代码块)简写

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

  1. // Bad
  2. switch (data) {
  3.   case 1:
  4.     test1();
  5.   break;
  6.   case 2:
  7.     test2();
  8.   break;
  9.   case 3:
  10.     test();
  11.   break;
  12.   // And so on...
  13. }
  14. // Good
  15. const data = {
  16.   1: test1,
  17.   2: test2,
  18.   3: test
  19. }
  20. data[anything] && data[anything]()
  21. // Bad
  22. if (type === 'test1') {
  23.   test1();
  24. }
  25. else if (type === 'test2') {
  26.   test2();
  27. }
  28. else if (type === 'test3') {
  29.   test3();
  30. }
  31. else if (type === 'test4') {
  32.   test4();
  33. } else {
  34.   throw new Error('Invalid value ' + type);
  35. }
  36. // Good
  37. const types = {
  38.   test1: test1,
  39.   test2: test2,
  40.   test3: test3,
  41.   test4: test4
  42. };
  43. const func = types[type];
  44. (!func) && throw new Error('Invalid value ' + type); func();


15. 多行字符串简写

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

  1. // Bad
  2. const data = 'abc abc abc abc abc abc\n\t'
  3. + 'test test,test test test test\n\t'
  4. // Good
  5. const data = `abc abc abc abc abc abc
  6.          test test,test test test test`


16. Object.entries() Object.values() Object.keys()

Object.entries() 该特性可以将一个对象转换成一个对象数组。

Object.values()可以拿到对象value值

Object.keys()可以拿到对象key值

  1. const data = { test1: 'abc', test2: 'cde' }
  2. const arr1 = Object.entries(data)
  3. const arr2 = Object.values(data)
  4. const arr3 = Object.keys(data)
  5. /** arr1 Output:
  6. [ 
  7.     [ 'test1', 'abc' ],
  8.     [ 'test2', 'cde' ],
  9. ]
  10. **/
  11. /** arr2 Output:
  12. ['abc', 'cde']
  13. **/
  14. /** arr3 Output:
  15. ['test1', 'test2']
  16. **/


17. 多次重复一个字符串

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

  1. //Bad 
  2. let test = ''; 
  3. for(let i = 0; i < 5; i ++) { 
  4.   test += 'test,'; 
  5. } 
  6. console.log(str);// test,test,test,test,test,
  7. //good 
  8. console.log('test,'.repeat(5))


18. 幂的简写

数学指数幂函数的good如下：

  1. //Bad 
  2. Math.pow(2,3)// 8
  3. //good 
  4. 2**3 // 8


19. 数字分隔符

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

  1. //old syntax
  2. let number = 98234567
  3. //new syntax
  4. 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：该对象启用对语言敏感的日期和时间格式。


TAG标签：
本文网址：https://www.zztuku.com/index.php/detail-10431.html
站长图库 - 18个你需要知道的JavaScript优化技巧
申明：本文转载于《CSDN》，如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐