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