数组的合并方法

在 JavaScript 里，有多种方法可以合并数组，下面为你详细介绍几种常见的数组合并方法：

1. 使用扩展运算符 (...)

扩展运算符是 ES6 引入的新特性，它可以把数组展开，这种方法简单直观，并且不会改变原数组。

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = [...array1, ...array2];
console.log(mergedArray); // 输出: [1, 2, 3, 4, 5, 6]

2. 使用 concat() 方法

concat() 方法用于合并两个或多个数组，它会返回一个新数组，不会改变原数组。

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = array1.concat(array2);
console.log(mergedArray); // 输出: [1, 2, 3, 4, 5, 6]

3. 使用 push() 方法

push() 方法能够向数组末尾添加一个或多个元素，并且返回新的长度。你可以借助循环或者扩展运算符将一个数组的元素添加到另一个数组中。

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
// 使用扩展运算符
array1.push(...array2);
console.log(array1); // 输出: [1, 2, 3, 4, 5, 6]

// 或者使用循环
const array3 = [1, 2, 3];
const array4 = [4, 5, 6];
for (let i = 0; i < array4.length; i++) {
  array3.push(array4[i]);
}
console.log(array3); // 输出: [1, 2, 3, 4, 5, 6]

4. 使用 splice() 方法

splice() 方法可以在数组的指定位置添加或删除元素。你可以利用它在数组末尾添加另一个数组的元素。

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
array1.splice(array1.length, 0, ...array2);
console.log(array1); // 输出: [1, 2, 3, 4, 5, 6]

总结

• 扩展运算符 (...)：代码简洁，适合在大多数场景下使用。
• concat() 方法：传统方法，兼容性好。
• push() 方法：会改变原数组，适合在需要直接修改原数组的场景下使用。
• splice() 方法：可以在指定位置插入元素，功能更强大，但代码相对复杂。

你可以根据具体的需求来选择合适的方法。在你的 Vue 项目中，如果要合并 this.referenceContent 数组，就可以使用上述方法。例如：

const newData = [7, 8, 9];
this.referenceContent = [...this.referenceContent, ...newData];

这样就能把 newData 数组合并到 this.referenceContent 数组中。