JavaScript 代码技巧mark

2021-03-04 04:27

阅读:601

标签:some   nbsp   des   对象   变量赋值   console   fun   color   asc   

分享一些我常用的代码优化技巧,希望对你有帮助。

 

1. 多表达式多 if 判断

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

1 //
2 if (x === ‘abc‘ || x === ‘def‘ || x === ‘ghi‘ || x ===‘jkl‘) {  //logic}
3 //
4 if ([‘abc‘, ‘def‘, ‘ghi‘, ‘jkl‘].includes(x)) {  //logic}

 

2. 简写 if else

如果 if-else 的逻辑比较降低,可以使用下面这种方式镜像简写,当然也可以使用三元运算符来实现。

1 //
2 let test: boolean;
3 if (x > 100) {  test = true;} else {  test = false;}
4 //
5 let test = (x > 10) ? true : false;
6 // 也可以直接这样
7 let test = x > 10;

 

3. 合并变量声明

当我们声明多个同类型的变量时,可以像下面这样简写。

1 //
2 let test1;let test2 = 1;
3 //
4 let test1, test2 = 1;

 

4. 合并变量赋值

当我们处理多个变量并将不同的值分配给不同的变量时,这种方式非常有用。

1 //
2 let test1, test2, test3;
3 test1 = 1;
4 test2 = 2;
5 test3 = 3;
6 //
7 let [test1, test2, test3] = [1, 2, 3];

 

5. && 运算符

如果仅在变量值为 true 的情况下才调用函数,则可以使用 && 运算符。

1 //
2 if (test1) { callMethod(); } 
3 //
4 test1 && callMethod();

 

6. 箭头函数

1 //
2 function add(a, b) {    return a + b; } 
3 //
4 const add = (a, b) => a + b;

 

7. 短函数调用

可以使用三元运算符来实现这些功能。

1 const fun1 = () => console.log(‘fun1‘);
2 const fun2 = () => console.log(‘fun2‘);
3 //
4 let test = 1;
5 if (test == 1) {  fun1();} else{  fun2();}
6 //
7 (test === 1? fun1:fun2)();

 

8. Switch 简记法

我们可以将条件保存在键值对象中,并可以根据条件使用。

 1 //
 2 switch (data) {  
 3   case 1:    test1();  break;
 4   case 2:    test2();  break;
 5   case 3:    test();  break;  
 6   // And so on...
 7 }
 8 //
 9 const data = {  1: test1,  2: test2,  3: test};
10 data[something] && data[something]();

 

9. 默认参数值

 1 //
 2 function add(test1, test2) {  
 3  if (test1 === undefined)    
 4     test1 = 1;  
 5  if (test2 === undefined)    
 6     test2 = 2;  
 7 return test1 + test2;
 8 }
 9 //
10 const add = (test1 = 1, test2 = 2) => (test1 + test2);

 

10. 扩展运算符

 1 // 长-合并数组
 2 const data = [1, 2, 3];
 3 const test = [4 ,5 , 6].concat(data);
 4 // 短-合并数组
 5 const data = [1, 2, 3];
 6 const test = [4 ,5 , 6, ...data];
 7 
 8 // 长-拷贝数组
 9 const test1 = [1, 2, 3];
10 const test2 = test1.slice();
11 // 短-拷贝数组
12 const test1 = [1, 2, 3];
13 const test2 = [...test1];

 

11. 模版字符串

1 //
2 const welcome = ‘Hi ‘ + test1 + ‘ ‘ + test2 + ‘.‘
3 //
4 const welcome = `Hi ${test1} ${test2}`;

12. 简写对象

1 let test1 = ‘a‘;
2 let test2 = ‘b‘;
3 //
4 let obj = {test1: test1, test2: test2}; 
5 //
6 let obj = {test1, test2};

 

13. 在数组中查找最大值和最小值

1 const arr = [1, 2, 3];
2 Math.max(…arr); // 3
3 Math.min(…arr); // 1

 


JavaScript 代码技巧mark

标签:some   nbsp   des   对象   变量赋值   console   fun   color   asc   

原文地址:https://www.cnblogs.com/ldw-blogs/p/14373725.html


评论


亲,登录后才可以留言!