开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第12天，点击查看活动详情
一、ECMAScript发布的版本
ECMAScript现在没有数字版本号，只有年份版本号。
从 ECMAScript 2016（ES7）开始，版本发布变得更加频繁，每年发布一个新版本。
| 名称 | 时间 |
|---|---|
| ECMAScript，第一个版本，就叫ECMAScript，没有简称，不是ECMAScript 1，也不是ECMAScript 1997。 | 1997年6月 |
| ECMAScript 2nd Edition，第二个版本，没有简称，不叫ECMAScript 2，也不叫ECMAScript 1998。 | 1998年6月 |
| ECMAScript 3rd Edition，第三个版本，没有简称，不叫ECMAScript 3，也不叫ECMAScript 1999。 | 1999年12月 |
| ECMAScript 5th Edition，第五个版本，没有简称，不叫ECMAScript 5，也不叫ECMAScript 2009。 | 2009年12月 |
| ES6 | 2015-06 |
| ES7 | 2016-06 |
| ES8 | 2017-06 |
| ES9 | 2018-06 |
| ES10 | 2019-06 |
| ES11 | 2020-06 |
| ES12 | 2021-06 |
| ES13 | 2022-06 |
二、工作中的实践
Array.prototype.includes()
includes() 函数用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回 false。includes 函数与 indexOf 函数很相似
let arr = ['react', 'angular', 'vue'];
if (arr.includes('react'))
{
console.log('react存在');
}
替代之前的indexOf()方法。
flat()
把多维数组拍平
如果不管有多少层嵌套，都要转成一维数组，可以用
Infinity关键字作为参数。
[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
flatMap()方法对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。
Object.values()
Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。
const obj = { foo: 'bar', baz: 42 };
Object.values(obj)
// ["bar", 42]
- 如果
Object.values方法的参数是一个字符串，会返回各个字符组成的一个数组。 Object.values会过滤属性名为 Symbol 值的属性，不会去遍历输出。Object.values只返回对象自身的可遍历属性。
const obj = Object.create({}, {p: {value: 42}});
Object.values(obj) // []
Object.entries()
Object.entries()方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。
const obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]
Object.hasOwn(object, property)
判断属性是否在当前对象中
const person = {name: 'lxm'}
console.log(Object.prototype.hasOwnProperty.call(person, 'name')) // true
console.log(Object.hasOwn(person, 'name')) // true
之前写的挺长的，现在只需要6个字母搞定。
at()方法
接受一个整数作为参数，返回对应位置的成员，并支持负索引。这个方法不仅可用于数组，也可用于字符串和类型数组（TypedArray）。
如果参数位置超出了数组范围，
at()返回undefined。
const arr = [5, 12, 8, 130, 44];
arr.at(2) // 8
arr.at(-2) // 130
------
const sentence = 'This is a sample sentence';
sentence.at(0); // 'T'
sentence.at(-1); // 'e'
sentence.at(-100) // undefined
sentence.at(100) // undefined
replaceAll
替换所有匹配到的字符串。返回一个全新的字符串。
代替之前的replace方法。
const str = "student is a real student";
const newStr = str.replaceAll('student', "hahaha");
console.log(newStr);
trimStart()，trimEnd()
去除字符串的前后空格
trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格，它们的行为与trim()一致。它们返回的都是新字符串，不会修改原始字符串。
const s = ' abc ';
s.trim() // "abc"
s.trimStart() // "abc "
s.trimEnd() // " abc"
?.运算符
优化我们之前的三元表达式?:
在链式调用的时候判断，左侧的对象是否为null或undefined。如果是的，就不再往下运算，而是返回undefined。
const firstName = message?.body?.user?.firstName || 'default';
a?.b
// 等同于
a == null ? undefined : a.b
a?.[x]
// 等同于
a == null ? undefined : a[x]
a?.b()
// 等同于
a == null ? undefined : a.b()
a?.()
// 等同于
a == null ? undefined : a()
?.运算符相当于一种短路机制，只要不满足条件，就不再往下执行。- 使用
?.运算符的场合，不应该使用圆括号。
??=、&&=、 ||=
增逻辑赋值操作符
先来介绍下 ?? .如果一个变量是空，需要给它赋值为一个默认值的情况。通常我们会这样写：let num = number || 222。，代码会有一个 bug。如果realCount的值是0，则会被当作取不到其值，会取到'无法获取'这个字符串。
如果我们使用了??，只有当操作符左边的值是**null或者undefined**的时候，才会取操作符右边的值：
// 等同于 a = a || b
a ||= b;
// 等同于 c = c && d
c &&= d;
// 等同于 e = e ?? f
e ??= f;
数字的下划线 (_) 分隔符
通常是一个逗号,增加数值的可读性。比如，
1000可以写作1,000。
ES2021，允许 JavaScript 的数值使用下划线（_）作为分隔符。
let budget = 1_000_000_000_000;
budget === 10 ** 12 // true
总结
对于前端来讲，每天都在更新着新的技术框架，我们也要与时俱进，不断督促自己进步。
