ES6 中的数组扩展运算符及解决合并多个数组的问题

在前端开发中，经常会用到数组的操作，例如合并多个数组、去重、过滤等。ES6 中新增的数组扩展运算符可以方便地解决这些问题。

数组扩展运算符

数组扩展运算符用三个点（...）表示，可以将一个数组转为用逗号分隔的参数序列。例如：

const arr = [1, 2, 3];
console.log(...arr); // 1 2 3

数组扩展运算符还可以将一个数组复制到另一个数组中：

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

数组扩展运算符还可以与其他参数一起使用，例如：

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

const arr = [1, 2, 3];
console.log(sum(...arr)); // 6

合并多个数组

在前端开发中，经常需要将多个数组合并成一个数组。ES6 中可以使用数组扩展运算符轻松实现这个功能。例如：

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

上述代码中，使用了三个数组扩展运算符将三个数组合并成了一个数组。

解决多维数组合并问题

如果要合并的数组是多维数组，可以使用递归函数来解决问题。例如：

function flatten(arr) {
  return arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val), []);
}

const arr1 = [1, 2, [3, 4, [5, 6]]];
const arr2 = [7, 8, [9, [10, 11]]];
const mergedArr = [...flatten(arr1), ...flatten(arr2)];
console.log(mergedArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

上述代码中，使用了递归函数 flatten 将多维数组展开成一维数组，然后再使用数组扩展运算符将多个一维数组合并成一个数组。

总结

ES6 中的数组扩展运算符可以方便地解决合并多个数组的问题。在实际开发中，如果要合并多维数组，可以使用递归函数来解决问题。掌握了这些技巧，可以提高前端开发的效率。

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