本文只提取了部分常用特性，具体特性可自行学习哇
ES6 （2015）
1.延展操作符
let a = [...'hello world'];
// ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]
ES7 （2016）
1.Array.prototype.includes()
console.log(['1','a','b'].includes('b'));
// true
ES8（2017）
1.async/await 异步
getData(id) {
console.log(1);
this.$http.post.xx.then(res => {
console.log(2);
});
console.log(3);
},
//执行顺序
// 1
// 3
// 2
async getData(id) {
console.log(1);
await this.$http.post.xx.then(res => {
console.log(2);
});
console.log(3);
},
//执行顺序
// 1
// 2
// 3
2.Object.values()
Object.values({a: 11, b: 22, c: 33});
// [11, 22, 33]
3.Object.entries()
Object.entries({a: 11, b: 22, c: 33});
// [["a", 11], ["b", 22], ["c", 33]]
ES9 （2018）
1.Rest/Spread 属性
//注意，rest参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。函数的length属性，不包括rest参数
add(...values) {
let sum = 0;
for (var num of values) {
sum += num;
}
return sum;
},
this.add(1, 2, 6, 7); // 15
const obj = {
name:'spread',
value:5
}
const obj2 = {
key:1,
num:['xxx']
}
let objh = {...obj,...obj2} //对象合并
// {name: "spread", value: 5, key: 1, num: Array(1)}
ES10（2019）
1.Object.fromEntries()
//Object.fromEntries()方法把Map列表转换为Object
const map = new Map([ ['a', 'b'], ['11', 42] ]);
Object.fromEntries(map);
// { a: "11", b: 42 }
2.Array.prototype.flat(depth)
flat()方法基本作用是数组降维，depth作为深度，默认为1， 可以利用flat()方法来去除数组的空项。
let arr = [1, 2, [3, 4]];
arr.flat(); // [1, 2, 3, 4]
let arr1 = [1, 2, [3, 4, [5, 6]]];
arr1.flat(); // [1, 2, 3, 4, [5, 6]]
arr1.flat(2); // [1, 2, 3, 4, 5, 6]
// 利用flat()方法的特性来去除数组的空项
let arr2 = [1, 2, , 4, 5];
arr2.flat(); // [1, 2, 4, 5]
3.Array.prototype.flatMap()
let arr = [1, 2, 3, 4];
arr.map(x => [x * 2]);
// [[2], [4], [6], [8]]
arr.map(x => [x * 2]).flat();
// [2, 4, 6, 8]
arr.flatMap(x => [x * 2]);
// [2, 4, 6, 8]
// flatMap函数返回的数组只会展开一层
arr.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]
4.String.trimStart()和String.trimEnd()
去除字符串首尾空白字符
let str = " aaa1 ";
str.trim(); // 删除字符串的头尾空白字符
str.trimStart(); // 删除字符串的头部空白字符
str.trimEnd(); // 删除字符串的尾部空白字符
ES11（2020）
1.Nullish coalescing Operator(空值处理)
// ?? 的左侧值为undefined或null，返回其右侧。
let data = {
a: 0,
b: false,
c: null,
d: undefined
e: '',
}
let a = data.a ?? 'hello1' // 0
let b = data.b ?? 'hello2' // false
let c = data.c ?? 'hello3' // hello3
let d = data.d ?? 'hello4' // hello4
let e = data.e ?? 'hello5' // ''
2.Optional chaining（可选链）
let user = {}
let u1 = user.son.name
// TypeError: Cannot read property 'name' of undefined
let u1 = user.son?.name
// undefined
//当要默认赋值时，无法确定接口传回的数组是否有值，直接获取第一个值会报错，可以加在数组后加？
let listA = [
{
name: "hello"
}
];
let listB = [];
listA[0].name;
//hello
listB[0]?.name;
//undefined
listB[0].name;
//Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')
ES12（2021）
1.String.prototype.replaceAll()
// 所有符合的字符都将被替换掉
let string = 'hello world, hello friends'
string.replace(/hello/g,'hi')
// hi world, hi friends
string.replaceAll(/hello/,'hi')
//注意:replaceAll 在使用正则表达式的时候，如果非全局匹配（/g），会抛出异常
//Uncaught TypeError: String.prototype.replaceAll called with a non-global
string.replaceAll('hello','hi')
// hi world, hi friends
2.数字分隔符
// 通过_下划线来分割数字，使数字更具可读性
const money = 1_000_000_000;
const money = 1000000000;
1_000_000_000 === 1000000000; // true
原文始发于微信公众号（Hephaestuses）：ES6-ES12特性总结
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/45038.html
