vue項目中向數(shù)組添加元素的3種方式
方法:
push()unshift()splice()
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ù)組指定位置添加/刪除項目,然后返回被刪除的項目。
使用方式:數(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ù)來確定相應(yīng)的位置。比如傳遞的值是-3,數(shù)組的length為6,此時slice(-3)對應(yīng)的就是slice(3)?;蛘呖梢詮臄?shù)組的末尾開始計算起,最末尾的是-1。
分析圖如下所示:
特別要注意的點:
傳遞的第二個參數(shù)也可以是負(fù)數(shù),而且還可以正數(shù)和負(fù)數(shù)混合使用。
特別注意:slice()傳遞的兩個參數(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ù)組中的所有項創(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é): 此時它只是復(fù)制當(dāng)前數(shù)組,并且返回一個副本。
總結(jié): concat()方法是在數(shù)組的副本上進(jìn)行操作并返回新構(gòu)建的數(shù)組,并不會影響到原來的數(shù)組。
到此這篇關(guān)于vue項目中向數(shù)組添加元素的3種方式的文章就介紹到這了,更多相關(guān)vue向數(shù)組添加元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用vue-router切換頁面時實現(xiàn)設(shè)置過渡動畫
今天小編就為大家分享一篇使用vue-router切換頁面時實現(xiàn)設(shè)置過渡動畫。具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10基于node+vue實現(xiàn)簡單的WebSocket聊天功能
最近學(xué)習(xí)了一下websocket的即時通信,感覺非常的強(qiáng)大,這里我用node啟動了一個服務(wù)進(jìn)行websocket鏈接,然后再vue的view里面進(jìn)行了鏈接,進(jìn)行通信,廢話不多說,直接上代碼吧2020-02-02在Vue中使用CSS3實現(xiàn)內(nèi)容無縫滾動的示例代碼
這篇文章主要介紹了在Vue中使用CSS3實現(xiàn)內(nèi)容無縫滾動的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11Vue項目打包并部署nginx服務(wù)器的詳細(xì)步驟
vue項目開發(fā)好之后需要部署到服務(wù)器上進(jìn)行外網(wǎng)訪問,下面這篇文章主要給大家介紹了關(guān)于Vue項目打包并部署nginx服務(wù)器的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07Vue3除了keep-alive還有哪些實現(xiàn)頁面緩存詳解
Vue3中的keep-alive組件用于緩存頁面,以便在切換頁面時保留其狀態(tài),下面這篇文章主要給大家介紹了關(guān)于Vue3除了keep-alive還有哪些實現(xiàn)頁面緩存的相關(guān)資料,需要的朋友可以參考下2024-04-04vue三元運算之多重條件判斷方式(多個枚舉值轉(zhuǎn)譯)
這篇文章主要介紹了vue三元運算之多重條件判斷方式(多個枚舉值轉(zhuǎn)譯),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09