前言
自从 ES6 在 2015 年发布以来，Javascript 的标准化进程加快了，每年推出的新版本也越来越多，而这些版本的新特性都在不断地让开发者们的工作更加高效和舒适。本文将介绍 Javascript 中的 ES7、ES8、ES9 及 Future 版本，并讨论它们的发展趋势以及如何应用它们来提高我们的开发效率。
ES7（ECMAScript 2016）
ES7 引入了许多新特性，其中最为常用的是对象的属性访问器绑定语法，即使用 bind() 绑定 this 的属性访问器。例如，我们在 React 中经常需要绑定组件中的函数 this （如 onClick），可以这样写：
-- -------------------- ---- -------
----- -------------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
----------- - -- -- -
--------------- ------ ---------------- - - ---
-
-------- -
------ -
-----
------- ------------------------------------------------------
------
--
-
-在 ES7 中，我们就可以使用 bind() 绑定 handleClick() 函数的 this：
-- -------------------- ---- -------
----- -------------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
---------------- - ----------------------------
-
------------- -
--------------- ------ ---------------- - - ---
-
-------- -
------ -
-----
------- ------------------------------------------------------
------
--
-
-此外，ES7 还添加了幂运算符，用于进行幂运算。如下所示：
console.log(2 ** 3); // 8 console.log(Math.pow(2, 3)); // 8
ES8（ECMAScript 2017）
ES8 引入了 async/await，使得异步代码更加简洁易懂。在 ES8 之前，我们需要使用 Promise 或者回调函数来处理异步操作。使用 async/await，我们可以将异步操作看作同步操作，从而更容易地写出易读易懂的代码。例如，我们可以这样写：
async function requestData() {
const response = await fetch('https://example.com/data.json');
const data = await response.json();
return data;
}在 ES8 中还添加了 Object.values() 和 Object.entries() 方法，它们可以方便地遍历一个对象的属性值和属性名。如下所示：
const obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]
console.log(Object.entries(obj)); // [['foo', 'bar'], ['baz', 42]]此外，ES8 还添加了字符串填充方法 padStart() 和 padEnd()，这两个方法可以让字符串的长度满足我们期望的长度。如下所示：
console.log('hello'.padStart(10)); // ' hello'
console.log('hello'.padEnd(10)); // 'hello 'ES9（ECMAScript 2018）
ES9 引入了几个新特性，其中最为常用的是 Promise.prototype.finally()，这个方法可以在 Promise 被 resolve 或 reject 后调用一个函数。例如，我们可以这样写：
fetch('https://example.com/data.json')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
.finally(() => console.log('request finished'));在 ES9 中还添加了如下方法：
Rest/Spread 属性
我们可以在对象和数组字面量中使用 ... 标记来表示 Rest 和 Spread 属性。Rest 属性用于解构出数组中的剩余元素，而 Spread 属性用于展开对象和数组。例如：
const { first, second, ...rest } = { first: 1, second: 2, third: 3, fourth: 4 };
console.log(first, second, rest); // 1 2 { third: 3, fourth: 4 }
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [0, ...arr1, ...arr2, 7];
console.log(arr3); // [0, 1, 2, 3, 4, 5, 6, 7]Object.entries()
在 ES9 中，Object.entries() 方法也开始支持 Map 和 Set 对象，这个方法可以将一个 Map 或 Set 对象转换为键值对数组。例如：
const map = new Map([['foo', 'bar'], ['baz', 42]]); console.log(Object.entries(map)); // [['foo', 'bar'], ['baz', 42]] const set = new Set([1, 2, 3, 4, 5]); console.log(Object.entries(set)); // [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5]]
Future
除了 ES7、ES8、ES9 版本，Javascript 社区还在持续不断地开发新特性。有很多新的功能被提出，例如可选链运算符、Null 合并运算符、Promise.allSettled()、import() 等等。
可选链运算符
可选链运算符提供了一种方便的方式来测试一个属性是否存在并访问它的值，避免了在测试属性是否为 null 或者 undefined 时需要进行多次判断的问题。例如：
console.log(user?.address?.street); // 如果 user 或 address 不存在，返回 undefined
Null 合并运算符
Null 合并运算符是一个在特定条件下返回默认值的逻辑运算符。如果左侧的值为 null 或 undefined，则返回右侧的值。例如：
const foo = null ?? 'bar'; console.log(foo); // 'bar' const baz = undefined ?? 'qux'; console.log(baz); // 'qux'
Promise.allSettled()
Promise.allSettled() 方法同时解决了 Promise.all() 无法处理 rejected Promise 的问题。这个方法返回一个 Promise 对象，当所有 Promise 对象都被 settled 后，返回一个包含每个 Promise 对象状态的数组。例如：
-- -------------------- ---- ------- ----- -------- - - ----------------------- ------------------ ---------------- ---------------------- -- ----------------------------------------- -- ---------------------- -- -- -- ------- ------------ -- ------ ----- -- -- - -- ------- ----------- -- ------- ------ ----- -- -- - -- ------- ------------ -- ------ ----- -- --
import()
import() 方法是一个强大的动态导入方法，可以将依赖项导入为一个 Promise 对象。这个方法可以在运行时导入模块。例如：
async function loadModule() {
return import('./module.js');
}
loadModule().then(module => console.log(module));结论
以上是 ES7、ES8、ES9 及非标准化版本 Future 中的一些新特性和应用。这些新特性都能够大大简化我们的编码工作并提高我们的开发效率。值得注意的是，它们还不一定在所有浏览器中被广泛支持，所以我们需要仔细使用它们，并在需要时适当地进行 polyfill。相信随着 Javascript 的逐步发展，这些新特性会逐渐进入我们的日常工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f2652ba44b36ee5765d31a