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