ES9 的操作符 rest/spread：如何将参数、对象和数组展开和收集

在 JavaScript 中，ES9 引入了 rest 和 spread 操作符，这两个操作符可以帮助我们更方便地处理参数、对象和数组的展开和收集。本文将详细介绍这两个操作符的用法，并提供示例代码以便读者更好地理解。

rest 操作符

rest 操作符（...）可以将不定数量的参数收集到一个数组中。这个操作符通常用于函数参数的处理，可以将一组参数收集到一个数组中，然后在函数中对这个数组进行操作。

函数参数的收集

下面是一个简单的示例，展示如何使用 rest 操作符收集函数的参数：

function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3, 4)); // 输出 10
console.log(sum(5, 10, 15)); // 输出 30

在上面的示例中，我们定义了一个名为 sum 的函数，并使用 rest 操作符收集了函数的所有参数。在函数体中，我们使用 reduce 方法对这个数组进行求和操作，并返回最终结果。

数组的展开

除了函数参数的收集外，rest 操作符还可以用于数组的展开。下面是一个示例，展示如何使用 rest 操作符将两个数组合并成一个数组：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const arr3 = [...arr1, ...arr2];

console.log(arr3); // 输出 [1, 2, 3, 4, 5, 6]

在上面的示例中，我们使用了 rest 操作符将两个数组展开，并将它们合并成一个新的数组。

spread 操作符

spread 操作符（...）与 rest 操作符类似，但它的作用是将一个数组或对象展开成多个参数或属性。这个操作符通常用于函数调用时的参数传递，可以将一个数组或对象展开成多个参数传递给函数。

函数参数的展开

下面是一个简单的示例，展示如何使用 spread 操作符将一个数组展开成多个参数：

function sum(a, b, c) {
  return a + b + c;
}

const arr = [1, 2, 3];
const result = sum(...arr);

console.log(result); // 输出 6

在上面的示例中，我们将一个包含三个元素的数组展开成三个参数，并传递给 sum 函数进行求和操作。

对象的展开

除了数组的展开外，spread 操作符还可以用于对象的展开。下面是一个示例，展示如何使用 spread 操作符将两个对象合并成一个新的对象：

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

const obj3 = { ...obj1, ...obj2 };

console.log(obj3); // 输出 {a: 1, b: 2, c: 3, d: 4}

在上面的示例中，我们使用了 spread 操作符将两个对象展开，并将它们合并成一个新的对象。

总结

本文介绍了 ES9 中的 rest 和 spread 操作符，这两个操作符可以帮助我们更方便地处理参数、对象和数组的展开和收集。在函数参数的处理中，rest 操作符可以将不定数量的参数收集到一个数组中，并在函数中对这个数组进行操作；在函数调用时的参数传递中，spread 操作符可以将一个数组或对象展开成多个参数或属性，并传递给函数。希望本文能够帮助读者更好地掌握这两个操作符的用法。

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