ES9（ECMAScript 2018）是 JavaScript 的最新版本之一，其中包含了许多新特性，如 Async/Await、Promise.finally、Trailing Commas 等等。在本文中，我们将重点介绍 Rest/Spread properties，这是 ES9 中非常有用的一个新特性。
什么是 Rest/Spread properties？
Rest/Spread properties 是一种新的语法，它可以将多个参数传递给函数或将对象合并成一个新的对象。Rest properties 用于参数列表中，而 Spread properties 则用于对象字面量中。
Rest properties
在 ES6 之前，我们通常使用 arguments 对象来获取函数中的所有参数，但 arguments 对象是一个类数组对象，它没有数组的方法和属性。使用 Rest properties 可以方便地将多个参数打包成一个数组。
下面是一个简单的示例代码，演示如何在函数参数中使用 Rest properties：
function sum(...numbers) {
return numbers.reduce((acc, val) => acc + val, 0);
}
console.log(sum(1, 2, 3)); // 输出：6在这个例子中，我们定义了一个 sum 函数，它接受任意个数的参数。在函数定义中我们使用了 ...numbers，这表示将所有参数打包成一个名为 numbers 的数组。在函数体中，我们使用了 reduce() 方法来将数组中的所有元素相加。
Spread properties
Spread properties 可以将一个对象中的所有属性展开到另一个对象中。它使用 ... 运算符加上一个对象作为操作数。这种语法可以方便地将两个对象合并成一个新的对象。
下面是一个示例代码，演示如何使用 Spread properties 合并两个对象：
const obj1 = {a: 1, b: 2};
const obj2 = {c: 3, d: 4};
const mergedObj = {...obj1, ...obj2};
console.log(mergedObj); // 输出：{a: 1, b: 2, c: 3, d: 4}在这个例子中，我们定义了两个对象 obj1 和 obj2，并使用 Spread properties 合并它们。我们可以看到，合并后的 mergedObj 对象包含了两个原始对象中的所有属性。
如何使用实验环境下的 Rest/Spread properties
虽然 Rest/Spread properties 是 ES9 中的新特性，但不是所有浏览器都支持它。我们需要使用实验环境下的 Babel 转换器来将 ES9 代码转换为 ES5 代码以实现跨浏览器兼容性。
以下是引入 Rest/Spread properties 的步骤：
1. 安装 Babel
npm install --save-dev @babel/core @babel/cli @babel/plugin-proposal-object-rest-spread
2. 创建 .babelrc 文件
在项目根目录下创建名为 .babelrc 的文件，并将以下内容添加到文件中：
{
"presets": [
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-proposal-object-rest-spread"
]
}3. 编写代码
现在我们可以在代码中使用 Rest/Spread properties 了，例如：
-- -------------------- ---- ------- -- ---- ---------- ----- -------- ------------------ - ------------------ - ------------ -- --- -- ------ -- -- -- ------ ---------- ----- ----- ---- - --- -- -- --- ----- ---- - --- -- -- --- ----- --------- - --------- --------- ----------------------- -- ------ -- -- -- -- -- -- --
4. 使用 Babel 转换代码
最后，我们需要使用 Babel 转换器将 ES9 代码转换为 ES5 代码。在项目根目录下执行以下命令：
npx babel src --out-dir dist --source-maps inline
以上命令将 src 目录中的 ES9 代码转换为 ES5 代码，并将转换后的代码输出到 dist 目录中。--source-maps inline 参数可以用来生成行内 sourcemap。
总结
Rest/Spread properties 是 ES9 中非常有用的特性，它能够简化我们的代码，减少一些冗余的语法。由于不是所有浏览器都支持它，我们需要使用实验环境下的 Babel 转换器来实现跨浏览器兼容性。除此之外，Rest/Spread properties 也可以在 React、Redux、MobX 等库中使用，它们使用这个特性来简化代码并提高代码的复用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654371497d4982a6ebd36738