1. ? 替换 if…else 语句
const age = 12;
let adultOrChild;
if (age >= 18) {adultOrChild = 'Adult';} else {adultOrChild = 'Child';}
// 简写
adultOrChild = age >= 18 ? 'Adult' : 'Child';
/**
* 函数的状况
*/
if (age >= 18) {doAdultThing();
} else {doChildThing();
}
// 简写
(age >= 18 ? doAdultThing : doChildThing)();
2. && 短路替换 if 语句
const age = 18;
let adultOrChild;
if (age >= 18) {adultOrChild = 'Adult';}
// 简写
age >= 18 && (adultOrChild = 'Adult');
3. includes 压缩多个 if 语句
const num = 3;
if (num === 1 || num === 2 || num === 3) {console.log('OK');
}
// 简写
if ([1, 2, 3].includes(num)) {console.log('OK');
}
// 还能够用 && 进一步简写
[1, 2, 3].includes(num) && console.log('OK');
4. 应用对象替换 if…else…if 语句
const name = 'Tom';
let judge = '';
if (name = 'Jack') {judge = 'good';} else if (name = 'John') {judge = 'normal';} else if (name = 'Tom') {judge = 'bad';}
// 简写
const judgeObj = {
Jack: 'good',
John: 'normal',
Tom: 'bad'
}
let judge = judgeObj[name];
5. ** 指数运算
Math.pow(6, 3); // 216
// 简写
6 ** 3; // 216
6. ~~ 实现向下取整
Math.floor(6.3); // 6
// 简写
~~6.3 // 6
7. !! 把值转为布尔类型
!!'test' // true
!!true // true
!!3 // true
!![] // true
8. 应用 + 把字符串转化为数字
Number('89') // 89
+'89' // 89
// 如果字符串含有非数字字符，则会变成 NaN
+'3A96' // NaN
9. ?. 防解体解决
const person = {
name: 'Jack',
age: 18,
otherInfo: {height: 178}
}
console.log(person && person.otherInfo && person.otherInfo.height);
// 简写
console.log(person?.otherInfo?.height); // ?. 是 ES11 里的内容，目前 Chrome 浏览器控制台不反对
10. 应用?? 判断 null 与 undefined
const count = 0; // 当 count 为 null 和 undefined 时打印 -，其余状况打印 count
if (count === null || count === undefined) {console.log('-');
} else {console.log(count);
}
// 简写
console.log(count ?? '-');
11. 应用扩大运算符 …
// 复制数组的场景
const arr = [1, 2, 3, 4];
const copyArr1 = arr.slice();
const copyArr2 = [...arr];
// 合并数组的场景
const newArr = [5, 6, 7, 8];
const mergeArr1 = arr.concat(newArr);
const mergeArr2 = [...arr, ...newArr];
// 同样实用于对象
const person = {
name: 'Jack',
age: 18
}
const newPerson = {...person, height: 180}
12. 应用 Set 给数组去重
const arr = [1, 1, 2, 3, 4, 4];
const uniqueArr = [...new Set(arr)];
13. 用一行代码给多个变量赋值
let a, b, c, d;
a = 1;
b = 2;
c = 3;
d = 4;
// 简写
let a = 1, b = 2, c = 3, d = 4;
// 或者应用解构赋值
[a, b, c, d] = [1, 2, 3, 4];
解构赋值用于 js 对象：
let student = {
name: 'Jack',
age: 18
}
let name = student.name;
let age = student.age;
// 简写
let {name, age} = student;
14. 替换两个变量的值
let x = 1;
let y = 2;
let temp = x;
x = y;
y = temp;
// 简写
[x, y] = [y, x];
15. 应用 Array.find() 从数组中查找特定元素
const personList = [{ name: 'Jack', age: 16},
{name: 'Tom', age: 18},
]
let JackObj = {};
for (let i = 0, len = personList.length; i < len; i++) {if (personList[i].name === 'Jack') {JackObj = personList[i];
}
}
// 简写
JackObj = personList.find(person => person.name === 'Jack');
16. 应用 Array.some() 检测数组是否有元素满足指定条件
const personList = [{ name: 'Jack', age: 16},
{name: 'Lily', age: 18}
]
let hasAdult = false;
personList.forEach(item => {item.age >= 18 && (hasAdult = true);
})
// 简写
hasAdult = personList.some(item => item.age >= 18);
17. 同名对象属性简写
const name = 'Jack',
age = 18;
const personObj = {
name: name,
age: age
}
// 简写
const personObj = {
name,
age
}
本文由 mdnice 多平台公布