前言
记得我之前看一个阿里大佬的视频，他说他 “从来不可能写两层以上嵌套的 if 判断，基本上平常遇到的任何判断，都能用各种花里胡哨的语法展平” 。
如果你看过源码，想必也能发现有很多花里胡哨的语法，把你秀的头皮发麻。不过我个人认为，源码它是在技术底层的层面，不需要考虑代码可读性，减少代码量和提高性能才是关键。但是我们平常工作中的业务代码，还是要考虑下可读性的。当然了，不是说不能简写代码，是要遵守一些规范，比如命名规范什么的，对于一些复杂的操作如果简写了要做好注释。\
下面我给大家大概总结了一下平常可以用到的简写语法。如果有错误或者补充可以评论区告诉我~
ps: 下面的“无效”“有效”不是指代码有错误！
1. if判断多个值
描述： 判断值满足多个条件
无效代码： if (value === 'a' || value === 'b' || value === 'c') { ... }
有效代码： if (['a', 'b', 'c'].includes(value)) { ... }
2.或非判断
描述： 当条件为true或false时，执行某些操作或赋值
无效代码：
if(condition){
toto()
}
//或者
if(!condition){
toto()
}
有效代码：
condition && todo()
condition || todo()
const a = undefined
const value = a|| '1'; //短路求值
3. if条件语句有返回值，不要写else
无效代码：
if (...) {
return 'abin'
} else {
return 'ok'
}
有效代码：
if (...) {
return 'abin'
}
return 'ok'
4. if判断输入非空
无效代码： if(value !== null && value !== undefined && value !== ''){ //... }
有效代码： if((value??'') !== ''){ //... }
补充： 要注意 ?? 和 || 的区别：
- ??是空值合并操作符，它只判断null和undefined；
- || 是逻辑判断（或） 操作符，它判断的是boolean值，除了0、""、null、undefined、NaN和 false 是假值之外，其他的都是真值。
5. !!将任何变量转换成boolean
6. 判断对象的某些属性是否存在，可选项 .?
无效代码：
const toto = { a: { b: { c: 5 } } }
if (!!toto.a && !!toto.a.b && !!toto.a.b.c) { ... } // toto.a.b.c exist
有效代码：
if (!!toto.a?.b?.c) { ... } // toto.a.b.c exist，属性不存在会返回undefined
7. for循环简写
无效代码： for (let i = 0; i < arr.length; i++)
有效代码： for (let index in arr)
8. 十进制指数
描述： 当需要写数字带有很多零时（如10000000），可以采用指数（1e7）来代替这个数字：
9. 对象属性简写
描述： 如果属性名与key名相同
无效代码： const obj = { x:x, y:y };
有效代码： const obj = { x, y };
10. 双重非位运算简写
无效代码： Math.floor(4.9) === 4 //true
有效代码： ~~4.9 === 4 ``//true
11. 数组精确查找
无效代码： 遍历数组进行查找
const pets = [
{ type: 'Dog', name: 'Max'},
{ type: 'Cat', name: 'Karl'},
{ type: 'Dog', name: 'Tommy'},
]
function findDog(name) {
for(let i = 0; i<pets.length; ++i) {
if(pets[i].type === 'Dog' && pets[i].name === name) {
return pets[i];
}
}
}
有效代码：
pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }
12. 对象取值
无效代码：
const obj = {
a:1,
b:2,
}
//取值
const c = obj.a;
const d = obj.b;
const e = obj.a;
有效代码：
const obj = {
a:1,
b:2,
}
//取值
const { a, b} = obj
const c = a
const d = b
const e = a
补充： 要注意解构的对象不能为undefined、null。否则会报错，故要给被解构的对象一个默认 值。
13. 对象动态属性名
无效代码： 可以用 [] 号set/get对象属性，而且它还可以写表达式
有效代码：
obj = {};
let index = 1;
obj[`key${index}`] = '内容';
14. 合并数据
无效代码：
const a = [1,2,3];
const b = [1,5,6];
const c = a.concat(b);//[1,2,3,1,5,6]
const obj1 = {
a:1,
}
const obj2 = {
b:1,
}
const obj = Object.assign({}, obj1, obj2);//{a:1,b:1}
有效代码：
const a = [1,2,3];
const b = [1,5,6];
const c = [...new Set([...a,...b])];//[1,2,3,5,6]
const obj1 = {
a:1,
}
const obj2 = {
b:1,
}
const obj = {...obj1,...obj2};//{a:1,b:1}
补充： 数组合并考虑下去重，用Set先处理下
15. 拼接字符串
描述： 别用加号拼接了，用模板字符串好吗
无效代码：
const name = '小明';
const score = 59;
let result = '';
result = name + score>60?'的考试成绩及格'的考试成绩不及格':
有效代码：
const name = '小明';
const score = 59;
let result = '';
result = `${ name }的考试成绩&{ score>60?'':'不' }及格`
补充： 模板字符串里可以写表达式，千万别写出下面这种代码，会被鄙视的
const name = '小明';
const score = 59;
let result = '';
if(score > 60){
result = `${name}的考试成绩及格`;
}else{
result = `${name}的考试成绩不及格`;
}
16. 扁平化数组
描述： 一个班级JSON数据中，属性名是部门id，属性值是个部门成员id数组集合，现在要把所有部门的成员id都提取到一个数组集合中。
const deps = {
'一班':[13,21,42],
'二班':[34],
'三班':[45,134,79],
'四班':[33,64,15],
}
无效代码 ： 嵌套遍历取值
有效代码：
const deps = {
'一班':[13,21,42],
'二班':[34],
'三班':[45,134,79],
'四班':[33,64,15],
}
let member = Object.values(deps).flat(Infinity);
改写： Infinity作为flat()方法的参数，可以将任意维度的数组扁平化
17. 判断条件后给对象添加属性
无效代码 ：
const toto = { name: 'toto' }
const other = { other: 'other' }
// The condition is not important
const condition = true
if (condition) {
other.name = toto.name
}
有效代码 ：
const condition = true
const other = {
other: 'other',
...condition && { name: 'toto' }
}
补充： 利用了扩展运算符，解构赋值和&& 逻辑运算符
最后
以后再补充~ 也欢迎大家评论区给我补充，共同学习进步！
