关于Vue数组合并的一些总结

1.concat函数合并数组

var array1 = ['1', '2', '3'];
var array2 = ['4', '5', '6'];
var array3 = ['7', '8', '9'];
//它可以接受任意数量的参数，每个参数都可以是数组或值。
var array4 = array1.concat(array2);
console.log(array4); //["1", "2", "3", "4", "5", "6"]
//也可以把多个数组结合成一个数组。
var array5 = array1.concat(array2, array3);
console.log(array5); // ["1", "2", "3", "4", "5", "6", "7", "8", "9"]

扩展运算符（…）是JavaScript的新功能，它允许在某些情况下展开数组或对象

var array1 = ['1', '2', '3'];
var array2 = ['4', '5', '6'];
var array3 = ['7', '8', '9'];
var array4 = [...array1, ...array2, ...array3];
console.log(array4); // ["1", "2", "3", "4", "5", "6", "7", "8", "9"]

3.splice函数合并数组(也就是将数组2插入到数组1的指定位置上)

（splice()方法会直接改变原数组）splice方法接受三个参数：索引（表示新元素应该插入的位置）、0（表示不删除任何元素）和要添加到数组中的新元素

var array1 = ['1', '2', '3'];
var array2 = ['4', '5', '6'];
//将array2数组插入array1数组的索引1位置，得到新的array1数组。
array1.splice(1, 0, ...array2);
console.log(array1); // ["1", "4", "5", "6", "2", "3"]

4.ES6中的Array.from()方法

ES6引入了一个名为Array.from()的方法。（Array.from()方法返回一个新的、浅拷贝的数组实例）
这个方法可以将类似数组或可迭代对象转换成真正的数组。

var set = new Set(['1', '2', '3']);
//这里我们通过Array.from()方法将set对象转换为数组。
var array1 = Array.from(set);
console.log(array1); // ["1", "2", "3"]

5.使用Vue.observable()

Vue提供了一个叫做Vue.observable()的方法，它可以将Javascript对象转换为可响应式的对象。
当添加、修改或删除对象属性时，它可以在Vue的响应式系统中触发更新。

const vm = Vue.observable({
  array1: ['1', '2', '3'],
  array2: ['4', '5', '6']
});
//这里，我们使用Vue.observable将对象转换为可观察的对象，然后合并两个数组array1和array2 ，得到新数组array3。
vm.array3 = [...vm.array1, ...vm.array2];
console.log(vm.array3); // Array ["1", "2", "3", "4", "5", "6"]

总结

以上是本人在项目中用到的比较常见的数组合并方式（concat，扩展运算符，splice），以及学习到的一些方法（Array.from和Vue.observable） 如有需要，敬请参考，希望这篇文章对您有所帮助。