从 ES8 to ES20，JavaScript 的历届大事件
JavaScript 的历史可以追溯到1995年，自从那时候开始，这门语言一直在快速地发展。ES8到ES20是最新的一波版本更新，为了在前端领域里跟上时代步伐，我们需要了解这些版本带来的变化和新特性。
ES8
ES8，也叫ECMAScript 2017，出现于2017年6月。ES8给开发者带来了一些新特性，其中包括：
- Async/Await
Async/Await是ES8版本中最引人注目的特性。它使得我们可以使用同步编程风格写异步代码，而不需要使用回调或Promise。举个例子，比如我们需要用异步方式获取一个API的数据，然后展示在页面上：
async function getDataFromAPI() { const response = await fetch('https://example.com/api/data'); const data = await response.json(); displayDataOnPage(data); }
上面这段代码等同于：
function getDataFromAPI() { fetch('https://example.com/api/data') .then(response => response.json()) .then(data => displayDataOnPage(data)); }
- Object.values/Object.entries
JavaScript 中有很多方法可以帮助我们操作对象，其中包括Object.keys方法。ES8添加了两个新方法：Object.values和Object.entries，以使我们可以更容易地操作对象的值和其对应的键值对。
const obj = { a: 1, b: 2, c: 3 }; const objValues = Object.values(obj); // [1, 2, 3] const objEntries = Object.entries(obj); // [['a', 1], ['b', 2], ['c', 3]]
- String padding
ES8添加了String padding功能，以使我们更容易地创建固定长度的字符串。
const paddingString = "hello".padStart(10, " "); // " hello" const paddingStringAgain = "hello".padEnd(10, " "); // "hello "
ES9
ES9，也叫ECMAScript 2018，出现于2018年6月。这一版本相较于ES8变化较小，但仍有一些值得注意的特性。
- Rest/Spread Properties
我们可以在对象属性中使用Rest/Spread操作符，以便更好地管理对象上的属性。
const obj1 = { a: 1, b: 2, c: 3 }; const obj2 = { ...obj1, d: 4 }; const { c, ...rest } = obj2;
- Asynchronous Iteration
ES9还在异步迭代器上添加了支持，这使得我们可以更容易地对异步函数进行迭代操作。
const asyncGenerator = (async function*() { yield await fetch('https://example.com/1'); yield await fetch('https://example.com/2'); yield await fetch('https://example.com/3'); })();
for await (const result of asyncGenerator) { console.log(result); }
ES10
ES10，也叫ECMAScript 2019，出现于2019年6月。ES10版本给JavaScript带来了一些重大的变化，其中包括：
- Array.flat/flatMap
Array.flat和flatMap方法允许我们更轻松地将多层嵌套的数组平坦化。
const array = [1, [2, [3, [4]]]]; const flatArray = array.flat(Infinity); // [1, 2, 3, 4]
- Object.fromEntries
ES10添加了Object.fromEntries方法，它允许我们将一个由键值对组成的数组转换为一个对象。
const entries = [['a', 1], ['b', 2], ['c', 3]]; const obj = Object.fromEntries(entries); // { a: 1, b: 2, c: 3 }
ES11
ES11，也叫ECMAScript 2020，于2020年6月推出。ES11是一个令人兴奋的版本，因为它引入了一些非常实用的特性。
- Optional Chaining
Optional Chaining是ES11中最受欢迎的特性之一。它允许我们使用“？”操作符连接对象的嵌套属性，如果该属性不存在，则返回undefined而不会抛出错误。
const obj = { a: { b: { c: 1 } } }; const cValue = obj?.a?.b?.c; // 1 const dValue = obj?.a?.d?.e; // undefined
- Nullish Coalescing Operator
Nullish Coalescing Operator使得我们可以更好地控制变量默认值。如果变量值是null或者undefined，则Nullish Coalescing Operator会选择使用其右侧的默认值，而不是falsy值。
const value1 = null ?? 'default value'; // 'default value' const value2 = undefined ?? 'default value'; // 'default value' const value3 = '' ?? 'default value'; // ''
结语
ES8到ES20的版本变化和新特性是前端开发中非常重要的一部分。通过了解这些特性，我们可以更好地管理和掌控JavaScript代码。虽然JavaScript的语言版本在不断更新，但是理解一些基础核心知识可以帮助我们更好地编写JavaScript代码，并且使其更加可维护和可读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cdfa8ce46428fe9e7bf5ef
