ECMAScript 2018 中的数组展开运算符应用技巧

ECMAScript 2018 中的数组展开运算符应用技巧

数组展开运算符在 ECMAScript 6 中被引入，它的作用是将数组或类数组对象转换为一组参数。这一特性在 ECMAScript 2018 中得到了增强，本文将介绍数组展开运算符的应用技巧。

1. 数组浅拷贝

使用展开运算符可以很方便地对数组进行浅拷贝。例如：

const arr1 = [1, 2, 3];
const arr2 = [...arr1];

console.log(arr2);  // [1, 2, 3]

在上面的代码中，...arr1 表示将 arr1 展开成一组参数，相当于直接写成 1, 2, 3。由于这是一个新的数组，所以修改 arr2 不会影响 arr1。

1. 数组拼接

使用展开运算符可以很方便地对数组进行拼接。例如：

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [...arr1, ...arr2];

console.log(arr3);  // [1, 2, 3, 4]

在上面的代码中，...arr1 和 ...arr2 表示将它们分别展开成一组参数，然后用逗号将它们连接起来。

1. 数组合并

使用展开运算符可以很方便地将多个数组合并成一个数组。例如：

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

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

在上面的代码中，...arr1、...arr2 和 ...arr3 表示将它们分别展开成一组参数，然后用逗号将它们连接起来。

1. 剩余参数

使用展开运算符可以很方便地在函数定义中使用剩余参数。例如：

function getSum(...numbers) {
  return numbers.reduce((sum, num) => sum + num);
}

console.log(getSum(1, 2, 3));  // 6
console.log(getSum(4, 5));     // 9

在上面的代码中，...numbers 表示将传入的所有参数作为一个数组赋值给 numbers。

1. 数组最大值与最小值

使用展开运算符可以很方便地求出数组中的最大值和最小值。例如：

const arr = [1, 2, 3];

const max = Math.max(...arr);
console.log(max);  // 3

const min = Math.min(...arr);
console.log(min);  // 1

在上面的代码中，...arr 表示将 arr 展开成一组参数传递给 Math.max 和 Math.min 函数。

总结

使用数组展开运算符可以让代码变得更加简洁和易于理解。本文介绍了数组浅拷贝、数组拼接、数组合并、剩余参数以及求出数组最大值和最小值等常见用法。希望读者在实际开发中能够灵活运用这些技巧。

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