快捷導(dǎo)航

vue項(xiàng)目中向數(shù)組添加元素的3種方式

更新時(shí)間：2023年10月17日 10:38:50 作者：努力學(xué)編程呀(???_????)

這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中向數(shù)組添加元素的3種方式,在Vue中添加元素到數(shù)組非常簡單,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1、push()

含義： push() 結(jié)尾添加

使用方式：數(shù)組.push(元素)

示例代碼如下：
this.list.push(newList)  
//push()  在數(shù)組末端添加一條數(shù)據(jù) 
console.log(this.list)

2. unshift()

含義：unshift() 頭部添加

使用方式：數(shù)組.unshift(元素)　

示例代碼如下：
let newList = {
   id:'4'
   name1:'a4',
   name2:'b4',
 }
this.list.unshift(newList)  //unshift()在數(shù)組頭部添加一條數(shù)據(jù) 
console.log(this.list)

3. splice()

含義： splice() 方法向/從數(shù)組指定位置添加/刪除項(xiàng)目，然后返回被刪除的項(xiàng)目。

使用方式：數(shù)組.splice(index,0,newList)

說明：第一個參數(shù)為需要操作數(shù)據(jù)的下標(biāo)，

第二個參數(shù)為操作添加/刪除(0為添加，1為不操作，2為刪除，3為刪除多條數(shù)據(jù))，

第三個參數(shù)可選

示例代碼如下：
   let newList = {
     id:time.id,
     name1:time.name1,
     name2:time.name2,
   }
   //第一個參數(shù)為需要操作數(shù)據(jù)的下標(biāo)，第二個參數(shù)為操作添加/刪除(0為添加，1為不操作，2為刪除，3為刪除多條數(shù)據(jù))，第三個參數(shù)可選
   this.list.splice(index,0,newList) 
   console.log(this.list)

分析圖如下所示：

第一種情形：傳遞一個參數(shù)

第二種情形：傳遞兩個參數(shù)

第三種情形：傳遞的參數(shù)為負(fù)值

slice()傳遞的參數(shù)還可以是負(fù)值。當(dāng)參數(shù)中有一個負(fù)值時(shí)，則用數(shù)組長度加上該數(shù)來確定相應(yīng)的位置。比如傳遞的值是-3，數(shù)組的length為6，此時(shí)slice(-3)對應(yīng)的就是slice(3)?；蛘呖梢詮臄?shù)組的末尾開始計(jì)算起，最末尾的是-1。

分析圖如下所示：

特別要注意的點(diǎn)：

傳遞的第二個參數(shù)也可以是負(fù)數(shù)，而且還可以正數(shù)和負(fù)數(shù)混合使用。

特別注意：slice()傳遞的兩個參數(shù)時(shí)，第一個參數(shù)和第二個參數(shù)位置相同或者第一個參數(shù)在第二個參數(shù)之后時(shí)，得到的新數(shù)組是一個空值（負(fù)值也是類似，但負(fù)值與數(shù)值長度之和再作對比）。

簡言之，結(jié)束位置小于或等于開始位置，將返回一個空數(shù)組。

分析圖如下圖所示：

4、concat() // 數(shù)組合并

//示例代碼如下：
let arrA = [1,2,3]
let arrB = [4,5,6]
arrA.concat(arrB) // 輸出 1,2,3,4,5,6
let arrC = [7,8,9]
arrA.concat(arrB,arrC) // 輸出 1,2,3,4,5,6,7,8,9

concat()方法:

含義：我們可以將其理解為合并數(shù)組。

原理：基于當(dāng)前數(shù)組中的所有項(xiàng)創(chuàng)建一個新數(shù)組，即，concat()先給當(dāng)前數(shù)組創(chuàng)建一個副本，然后將接收到的參數(shù)添加到這個副本（數(shù)組）的末尾，最后返回一個新的數(shù)組。

第一種情形：傳遞一個參數(shù)或多個參數(shù)
var arr = [`1`,'2','3'];
console.log(arr);
結(jié)果輸出：
 // ["1", "2", "3"]
var arr2 = arr.concat('4','5','6');
console.log(arr2);
結(jié)果輸出
 // ["1", "2", "3", "4", "5",'6']

第二種情形：
 傳遞一個或多個數(shù)組
 示例代碼如下：
 var arr = ["1","2",'3'];
console.log(arr);
結(jié)果輸出
 // ["1", "2",'3']
var arr2 = arr.concat(10,["4","5",'6'],["7","8","9"]);
console.log(arr2);
輸出結(jié)果
 // ["1", "2",'3',10, "4", "5", "6", "7", "8",'9']

第三種情形：
傳遞空值（也就是說沒有傳遞參數(shù)）
示例代碼如下：
var arr = [1,2,3];
console.log(arr); // [1, 2，3]
var arr2 = arr.concat();
console.log(arr2); // [1, 2，3]
總結(jié)：
此時(shí)它只是復(fù)制當(dāng)前數(shù)組，并且返回一個副本。

總結(jié)： concat()方法是在數(shù)組的副本上進(jìn)行操作并返回新構(gòu)建的數(shù)組，并不會影響到原來的數(shù)組。

到此這篇關(guān)于vue項(xiàng)目中向數(shù)組添加元素的3種方式的文章就介紹到這了,更多相關(guān)vue向數(shù)組添加元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: