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时打印 - ，其余状况打印countif (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多平台公布