优化JS代码的34种方法
1. 含有多个条件的if语句
我们可以在数组中存储多个值，也可以使用数据的includes方法。
1
2
3
4
5
6
7
8
| // longhand
if (x=== 'abc' || x === 'def' || x === 'ghi' || x ===jkl') {
// logic
}
// shorthand
if ([ 'abc ', 'def', 'ghi', 'jkl' ].includes (x)) {
// logic
}
|
2. If … else的缩写法
当我们在if-else条件下的逻辑比较简单时，我们可以使用三元条件运算符。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| // Longhand
let test: boolean;
if(x > 100){
test = true;
}else {
test = false;
}
// shorthand
let test = (x > 10) ? true : false;
// or we can use directly
let test = x > 10;
console.log (test) ;
|
如果包含嵌套条件，也可以使用这种方法。
1
2
3
4
5
| let x = 300,
test2 = (x > 100) ? 'greater 100' : (x<50) ? 'less 50' : 'between50 and 100';
console.log (test2); // "greater than 100"
|
3. 定义变量
当我们想要定义两个变量，并且这两个变量拥有相同的值或者类型的话，我们可以运用此种简略的表达方式。
1
2
3
4
5
6
| // Longhand
let testl;
let test2 = 1;
// Shorthand
let test1, test2 = 1;
|
4. 关于Null, undefined的检查
当我们创建新的变量时，有时候需要检查我们引用变量的值是否为null或是undefined，js本身就有一种缩写法能实现这个功能
1
2
3
4
5
6
7
| // Longhand
if (testl !== null || test1 !== undefined || test1 !== '') {
let test2 - test1;
}
// shorthand
let test2 = test1 || '';
|
5. Null值检查与指定默认赋值
1
2
3
4
| let test1 = null,
test2 = test1 || '';
console.log ("null check", test2); // output will be ""
|
6. Undefined值检查与默认赋值
1
2
3
4
| let testl = undefined,
test2 = testl l| '';
console.log ("undefined check", test2); // output will be ""
|
正常值检查
1
2
3
4
| let test1 = 'test',
test2 = test1 || '';
console.log(test2); // output: 'test'
|
（现在我们可以在4、5、6条中使用 ?? 运算符了）
7. 聚合运算符
**??**是聚合运算符，如果左值为null或undefined，就返回右值。默认返回左值。
1
2
3
4
5
| const test= null ?? 'default';
console.log(test);
// expected output: "default"const test1 =0 ?? 2;
console.log(test1);
// expected output: 0
|
8. 为多个变量赋值
当我们处理多个变量，想为不同的变量赋不同的值时，就会真正发现这种简略的表达方式的实用之处了。
1
2
3
4
5
6
7
8
| // Longhand
let test1, test2, test3;
test1 = 1;
test2 = 2;
test3 = 3;
// Shorthand
let [testl, test2, test3] = [1，2，3];
|
9. 赋值运算符简略的表达方式
通常，我们会在程序中处理大量的算术运算符。而对于JavaScript变量的赋值运算符来说，这是其中一个实用的技巧。
1
2
3
4
5
6
7
8
9
| // Longhand
testl = testl + l;
test2 = test2 - 1;
test3 = test3 *20;
// Shorthand
test1++;
test2--;
test3 *= 20;
|
10. 判断变量是否存在的缩写法
