ES9 中的 "Object Rest/Spread Properties" 不再需要 babel

在过去的几年中，前端开发者使用 Babel 作为他们 JavaScript 代码的编译器。Babel 的主要目的是将新的 ECMAScript 年份版本（通常称为 ES2015、ES2016 等）转换为浏览器能够理解的代码。其中一个 Babel 的使用场景是将 ES2018 中新增的 Object Rest/Spread Properties 转换为 ES2015 的代码。然而，随着浏览器对 ES2018 的原生支持程度不断提高，这个转换过程变得不再必要了。这篇文章将介绍 ES9 中的 "Object Rest/Spread Properties" 的用法，并讨论它们在现代浏览器中的直接支持，最后给出示例代码进行说明。

什么是 "Object Rest/Spread Properties" ?

"Object Rest/Spread Properties" 是一个新的 ECMAScript 特性，它允许开发者快速地从 JavaScript 对象中提取出部分属性，并将这些属性复制到新的对象中。同时，它还可以将一个对象中的所有属性展开为另一个对象。

“对象展开”语法

最简单的用法就是展开语法，可以把一个对象的所有自身可枚举属性传递给另一个对象：

const original = {a: 1, b: 2, c: 3}
const expanded = {...original}
// 等价于
// const expanded = {a: 1, b: 2, c: 3}

可以把对象展开为某个对象的一部分，并且可以嵌套使用：

const original = {a: 1, b: 2, c: 3}
const expanded = { z: 0, ...original, x: 4 }
// 等价于
// const expanded = { z: 0, a: 1, b: 2, c: 3, x: 4 }

“对象收集”语法

除了展开语法，新的 ES9 特性还允许开发者使用 Rest 语法从对象中提取一个子集：

const { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
// x = 1, y = 2, z = { a: 3, b: 4 }

其中，Rest 语法 ...z 表示将除 x 和 y 以外的对象属性都存储到变量 z 中。需要注意的是，变量 z 只是一个对象的引用，不能修改 x 和 y 的值。

浏览器兼容性

在过去，这些功能需要使用 Babel 进行转译，以便在各种旧版浏览器中支持它们。但是，现代的浏览器都已经对 ES9 的这些功能提供了原生支持，不再需要 Babel 进行转译。

以下是各大主流浏览器对 ES2018 "Object Rest/Spread Properties" 的原生支持程度列表：

我们看到，目前各大主流浏览器都已经支持了 ES9 中 "Object Rest/Spread Properties" 的原生支持，开发者可以放心的在代码中使用。

示例代码

下面是一个在浏览器中正常工作的使用 "Object Rest/Spread Properties" 的代码示例：

-- -------------------- ---- -------
-- ------ ----
----- ---- - --- -- -- --
----- ---- - --- -- -- --
----- ------ - -
  --------
  -------
-
------------------- -- --- -- -- -- -- -- -- --

-- ------ ---- --
----- --- -- -------- - --- -- -- -- -- -- -- --
-------------- -- -
-------------- -- -
----------------- -- --- -- -- --

在这个示例中，我们使用了 "Object Rest/Spread Properties" 的两个主要用法：对象展开和对象Rest。

总结

本文简单介绍了 ES9 中的 "Object Rest/Spread Properties" 特性，并讨论了它们在现代浏览器的原生支持程度。通过此特性，可以让开发者更好地处理对象属性，提高代码效率和可读性。在较新的开发环境中，开发者可以不再需要使用 Babel 进行代码转译，而是直接使用语言本身提供的这些语法特性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6450b800980a9b385b9a86db