2022年你需要了解的 13 种 JavaScript 代码技巧
分享一些我常用的代码优化技巧,希望对你有帮助。
1.多表达式多 if 判断
我们可以在数组中存储多个值,并且可以使用数组include方法。
1 2 3 4 5 6 7 8
| if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') { }
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) { }
|
2.简写 if else
如果 if-else 的逻辑比较降低,可以使用下面这种方式镜像简写,当然也可以使用三元运算符来实现。
1 2 3 4 5 6 7 8 9 10 11
| let test: boolean; if (x > 100) { test = true; } else { test = false; }
let test = (x > 10) ? true : false;
let test = x > 10;
|
2.合并变量声明
当我们声明多个同类型的变量时,可以像下面这样简写。
1 2 3 4 5
| let test1; let test2 = 1;
let test1, test2 = 1;
|
3.合并变量赋值
当我们处理多个变量并将不同的值分配给不同的变量时,这种方式非常有用。
1 2 3 4 5 6 7
| let test1, test2, test3; test1 = 1; test2 = 2; test3 = 3;
let [test1, test2, test3] = [1, 2, 3];
|
5.&& 运算符
如果仅在变量值为 true 的情况下才调用函数,则可以使用 && 运算符。
1 2 3 4 5 6
| if (test1) { callMethod(); }
test1 && callMethod();
|
6. 箭头函数
1 2 3 4 5 6
| function add(a, b) { return a + b; }
const add = (a, b) => a + b;
|
7. 短函数调用
可以使用三元运算符来实现这些功能。
1 2 3 4 5 6 7 8 9 10 11
| const fun1 = () => console.log('fun1'); const fun2 = () => console.log('fun2');
let test = 1; if (test == 1) { fun1(); } else{ fun2(); }
(test === 1? fun1:fun2)();
|
8. Switch 简记法
我们可以将条件保存在键值对象中,并可以根据条件使用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| switch (data) { case 1: test1(); break;
case 2: test2(); break;
case 3: test(); break; }
const data = { 1: test1, 2: test2, 3: test };
data[something] && data[something]();
|
9. 默认参数值
1 2 3 4 5 6 7 8 9 10
| function add(test1, test2) { if (test1 === undefined) test1 = 1; if (test2 === undefined) test2 = 2; return test1 + test2; }
const add = (test1 = 1, test2 = 2) => (test1 + test2);
|
10. 扩展运算符
1 2 3 4 5 6 7 8 9 10 11 12 13
| const data = [1, 2, 3]; const test = [4 ,5 , 6].concat(data);
const data = [1, 2, 3]; const test = [4 ,5 , 6, ...data];
const test1 = [1, 2, 3]; const test2 = test1.slice()
const test1 = [1, 2, 3]; const test2 = [...test1];
|
11. 模版字符串
1 2 3 4
| const welcome = 'Hi ' + test1 + ' ' + test2 + '.'
const welcome = `Hi ${test1} ${test2}`;
|
12. 简写对象
1 2 3 4 5 6
| let test1 = 'a'; let test2 = 'b';
let obj = {test1: test1, test2: test2};
let obj = {test1, test2};
|
13. 在数组中查找最大值和最小值
1 2 3
| const arr = [1, 2, 3]; Math.max(…arr); Math.min(…arr);
|