深入学习 ES7（2）—— ES7 新增的属性 spread operator & rest parameters-JavaScript中文网-JavaScript教程资源分享门户

在 ES6 中，我们已经看到了一些新的语言特性和方法，比如箭头函数、模板字符串、解构赋值、Promise 等等。而在 ES7 中，又新增了一些有用的特性，其中包括 spread operator 和 rest parameters。这些特性可以帮助开发人员提高代码的可读性和简洁性，同时还可以简化开发流程。在本文中，我们将深入学习 ES7 的这两个新属性。

Spread Operator

Spread operator 又称为展开操作符，它是 ES7 中新增加的 JavaScript 语言特性。它的作用是可以将一个数组或对象的内容展开成为单独的元素。我们可以使用 ...（三个点）来表示这个操作符。

下面是一个简单的例子，我们可以使用 spread operator 来将两个数组合并成为一个新的数组：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6]

在上面的例子中，我们使用了 spread operator 将 arr1 和 arr2 中的元素展开后合并成为了一个新的数组 arr3。这个操作符可以简化我们合并数组的代码，让代码更具可读性和清晰度。

除了上述的用法外，spread operator 还可以用在多个地方，比如函数调用、对象赋值等等。下面是一些常见的用法。

函数调用

我们可以使用 spread operator 在函数调用时传递一个数组作为函数参数。这样我们就可以不用手动去将数组中的元素一个一个传递给函数了，这样可以大大简化代码。

function sum(a, b, c) {
  return a + b + c;
}
let arr = [1, 2, 3];
let result = sum(...arr);
console.log(result); // 6

对象赋值

我们也可以使用 spread operator 将一个对象中的所有属性展开到另一个对象中。这样可以实现对象浅拷贝的效果。

let obj1 = { x: 1, y: 2 };
let obj2 = { ...obj1, z: 3 };
console.log(obj2); // { x: 1, y: 2, z: 3 }

在上述例子中，我们使用 spread operator 将 obj1 中的所有键值对展开到一个新的对象 obj2 中。这样我们就很容易地得到了一个新的对象。

Rest Parameters

Rest parameters 是另一个在 ES7 中新增加的属性，它可以让我们将传递给函数的参数以数组的形式收集起来。它使用 ...（三个点）来表示。下面是一个简单的例子：

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

在上述例子中，我们使用了 Rest parameters 来将传递给函数的参数收集成为了一个数组 args。这样我们就可以方便地对所有参数进行遍历和求和了。

接下来，我们来看一下 Rest parameters 在函数定义时的一些使用方法。

带有原始参数的函数定义

我们可以将 Rest parameters 与其他参数一起使用，这样可以很容易地实现传递任意数量的参数。在这种情况下，Rest parameters 必须是最后一个参数。

function concat(separator, ...args) {
  return args.join(separator);
}
console.log(concat('-', 'a', 'b', 'c')); // a-b-c
console.log(concat('_', 'd', 'e', 'f', 'g')); // d_e_f_g

带有默认值的 Rest parameters

我们也可以为 Rest parameters 设置默认值。这样在调用函数时如果没有传递参数就可以使用默认值。

function concat(separator = '-', ...args) {
  return args.join(separator);
}
console.log(concat('_', 'a', 'b', 'c')); // a_b_c
console.log(concat(undefined, 'd', 'e', 'f', 'g')); // d-e-f-g
console.log(concat()); // undefined

总结

在本文中，我们详细介绍了 ES7 中的两个新属性 spread operator 和 rest parameters，并通过示例代码来说明它们的用法和优势。这些新的特性可以帮助我们提高代码质量和可读性，减少开发时间和复杂度。如果你想学习更多关于 ES7 中的其他特性，请继续阅读我们的博客。

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