ECMAScript 2018（ES9）中的 Rest/Spread 属性还能做什么？

在 ES6 中，引入了 Rest 和 Spread 属性，用于处理函数参数和数据结构的展开。而在 ES9 中，这两个属性又有了更多的应用场景。本文将介绍 Rest 和 Spread 属性的新用法，以及如何在实际项目中使用。

Rest 属性

Rest 属性用于将一个不定数量的参数转化为一个数组。在 ES6 中，Rest 属性主要用于函数参数的处理，如下所示：

function myFunction(...args) {
  console.log(args);
}
myFunction(1,2,3); // [1,2,3]

在 ES9 中，Rest 属性不仅可以用于参数处理，还可以用于对象解构，如下所示：

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

上面的例子中，Rest 属性将对象中除了 x 和 y 之外的属性都转化为一个名为 z 的对象。

Spread 属性

Spread 属性用于将一个数组展开成一个序列，或将一个对象展开成一个键值对序列。在 ES6 中，Spread 属性主要用于数组的操作，如下所示：

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

在 ES9 中，Spread 属性不仅可以用于数组的操作，还可以用于对象的操作。比如，可以将两个对象的属性合并成一个新对象，如下所示：

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

如何在实际项目中使用 Rest/Spread 属性

Rest/Spread 属性在实际项目中有很多应用场景，比如：

• 将多个对象合并成一个新对象
• 将多个数组合并成一个新数组
• 将多个函数合并成一个新函数

下面是一个将多个数组合并成一个新数组的示例：

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

下面是一个将多个函数合并成一个新函数的示例：

function sum(a, b) {
  return a + b;
}
function multiply(a, b) {
  return a * b;
}
function divide(a, b) {
  return a / b;
}
let funcs = [sum, multiply, divide];
function compose(...funcs) {
  return function(value) {
    return funcs.reduceRight((acc, func) => {
      return func(acc);
    }, value);
  }
}
let composed = compose(...funcs);
console.log(composed(2)); // 0.5

上面的示例中，compose 函数可以将多个函数合并成一个新函数，这个新函数会依次执行传入的函数。compose 函数的核心代码如下：

return function(value) {
  return funcs.reduceRight((acc, func) => {
    return func(acc);
  }, value);
}

这里使用了 Rest 属性将多个函数转化为数组，再使用 Spread 属性将这个数组展开成 compose 函数的参数。

总结

Rest/Spread 属性在 ES9 中可以处理更多的数据结构，使得代码更加简洁和易于维护。在实际项目中，Rest/Spread 属性有着广泛的应用场景，可以大大提高开发效率，同时也可以让代码更加可读和简洁。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659f80acadd4f0e0ff81812e