一、concat函數合并數組
Vue提供了一種方便的方法來合并兩個或更多的數組 - concat。（concat()方法返回一個新數組，不會改變原數組）
它可以接受任意數量的參數，每個參數都可以是數組或值。
var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];
var array3 = array1.concat(array2);
console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]
我們可以利用concat（）函數把多個數組結合成一個數組。
var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];
var array3 = ['g', 'h', 'i'];
var array4 = array1.concat(array2, array3);
console.log(array4);
// expected output: Array ["a", "b", "c", "d", "e", "f", "g", "h", "i"]這里array1、array2、array3合并成新的array4數組。
二、擴展運算符合并數組
Vue的另一個數組合并方法是使用擴展運算符。
擴展運算符（...）是JavaScript的新功能，它允許在某些情況下展開數組或對象。
var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];
var array3 = ['g', 'h', 'i'];
var array4 = [...array1, ...array2, ...array3];
console.log(array4);
// expected output: Array ["a", "b", "c", "d", "e", "f", "g", "h", "i"]
這里我們通過展開運算符...將三個數組合并成一個數組。
三、splice函數合并數組
Vue還提供了另一種方法來合并數組 - splice（splice()方法會直接改變原數組）。
splice方法接受三個參數：索引（表示新元素應該插入的位置）、0（表示不刪除任何元素）和要添加到數組中的新元素
var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];
array1.splice(1, 0, ...array2);
console.log(array1);
// expected output: Array ["a", "d", "e", "f", "b", "c"]這里，我們將array2數組插入array1數組的索引1位置，得到新的array1數組。
四、ES6中的Array.from()方法
ES6引入了一個名為Array.from()的方法。（Array.from()方法返回一個新的、淺拷貝的數組實例）
這個方法可以將類似數組或可迭代對象轉換成真正的數組。
var set = new Set(['a', 'b', 'c']);
var array1 = Array.from(set);
console.log(array1);
// expected output: Array ["a", "b", "c"]
這里我們通過Array.from()方法將set對象轉換為數組。
五、使用Vue.observable()
Vue提供了一個叫做Vue.observable()的方法，它可以將Javascript對象轉換為可響應式的對象。
當添加、修改或刪除對象屬性時，它可以在Vue的響應式系統中觸發更新。
const vm = Vue.observable({
array1: ['a', 'b', 'c'],
array2: ['d', 'e', 'f']
});
vm.array3 = [...vm.array1, ...vm.array2];
console.log(vm.array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]
這里，我們使用Vue.observable將對象轉換為可觀察的對象，然后合并兩個數組array1和array2 ，得到新數組array3。
總結
本文為您介紹了Vue中數組合并的五種方法：concat，擴展運算符，splice，Array.from和Vue.observable。
掌握了這些方法后，您就可以輕松地將多個數組合并為一個。希望這篇文章對您有所幫助。
京公網安備 11010802030320號