一、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 (!!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
####七、for循环简写
无效代码：for (let i = 0; i < arr.length; i++)
有效代码：for (let index in arr)
八、十进制指数
描述：当需要写数字带有很多零时（如10000000），可以采用指数（1e7）来代替这个数字：
九、对象属性简写
描述：如果属性名与key名相同
无效代码：const obj = { x:x, y:y };
有效代码：const obj = { x, y };
十、双重非位运算简写
无效代码：Math.floor(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<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' }
十二、对象取值
无效代码：
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。否则会报错，故要给被解构的对象一个默认值。
十三、对象动态属性名
无效代码：可以用 [] 号set/get对象属性，而且它还可以写表达式
有效代码：
obj = {};
let index = 1;
obj[`key${index}`] = '内容';
十四、合并数据
无效代码：
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先处理下,Array.from(new Set( ))不兼容ie
十五、拼接字符串
描述：别用加号拼接了，用模板字符串好吗
无效代码：
const name = '小明';
const score = 59;
let result = '';
result = name + score>60?'的考试成绩及格'的考试成绩不及格':
有效代码：
const name = '小明';
const score = 59;
let result = '';
result = `${ name }的考试成绩&{ score>60?'':'不' }及格`
补充：模板字符串里可以写表达式，千万别写出下面这种代码，会被鄙视的
十六、扁平化数组
描述：一个班级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()方法的参数，可以将任意维度的数组扁平化
十七、判断条件后给对象添加属性
无效代码：
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' }
}
补充：利用了扩展运算符，解构赋值和&& 逻辑运算符
网友评论