vue項目中向數(shù)組添加元素的3種方式
方法:
push()unshift()splice()
1、push()
含義: push() 結尾添加
使用方式:數(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ù)的下標,
第二個參數(shù)為操作添加/刪除(0為添加,1為不操作,2為刪除,3為刪除多條數(shù)據(jù)),
第三個參數(shù)可選
示例代碼如下: let newList = { id:time.id, name1:time.name1, name2:time.name2, } //第一個參數(shù)為需要操作數(shù)據(jù)的下標,第二個參數(shù)為操作添加/刪除(0為添加,1為不操作,2為刪除,3為刪除多條數(shù)據(jù)),第三個參數(shù)可選 this.list.splice(index,0,newList) console.log(this.list)
分析圖如下所示:
第一種情形:傳遞一個參數(shù)
第二種情形:傳遞兩個參數(shù)
第三種情形:傳遞的參數(shù)為負值
slice()傳遞的參數(shù)還可以是負值。當參數(shù)中有一個負值時,則用數(shù)組長度加上該數(shù)來確定相應的位置。比如傳遞的值是-3,數(shù)組的length為6,此時slice(-3)對應的就是slice(3)?;蛘呖梢詮臄?shù)組的末尾開始計算起,最末尾的是-1。
分析圖如下所示:
特別要注意的點:
傳遞的第二個參數(shù)也可以是負數(shù),而且還可以正數(shù)和負數(shù)混合使用。
特別注意:slice()傳遞的兩個參數(shù)時,第一個參數(shù)和第二個參數(shù)位置相同或者第一個參數(shù)在第二個參數(shù)之后時,得到的新數(shù)組是一個空值(負值也是類似,但負值與數(shù)值長度之和再作對比)。
簡言之,結束位置小于或等于開始位置,將返回一個空數(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ù)組。
原理:基于當前數(shù)組中的所有項創(chuàng)建一個新數(shù)組,即,concat()先給當前數(shù)組創(chuàng)建一個副本,然后將接收到的參數(shù)添加到這個副本(數(shù)組)的末尾,最后返回一個新的數(shù)組。
第一種情形:傳遞一個參數(shù)或多個參數(shù) var arr = [`1`,'2','3']; console.log(arr); 結果輸出: // ["1", "2", "3"] var arr2 = arr.concat('4','5','6'); console.log(arr2); 結果輸出 // ["1", "2", "3", "4", "5",'6']
第二種情形: 傳遞一個或多個數(shù)組 示例代碼如下: var arr = ["1","2",'3']; console.log(arr); 結果輸出 // ["1", "2",'3'] var arr2 = arr.concat(10,["4","5",'6'],["7","8","9"]); console.log(arr2); 輸出結果 // ["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] 總結: 此時它只是復制當前數(shù)組,并且返回一個副本。
總結: concat()方法是在數(shù)組的副本上進行操作并返回新構建的數(shù)組,并不會影響到原來的數(shù)組。
到此這篇關于vue項目中向數(shù)組添加元素的3種方式的文章就介紹到這了,更多相關vue向數(shù)組添加元素內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
使用vue-router切換頁面時實現(xiàn)設置過渡動畫
今天小編就為大家分享一篇使用vue-router切換頁面時實現(xiàn)設置過渡動畫。具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10基于node+vue實現(xiàn)簡單的WebSocket聊天功能
最近學習了一下websocket的即時通信,感覺非常的強大,這里我用node啟動了一個服務進行websocket鏈接,然后再vue的view里面進行了鏈接,進行通信,廢話不多說,直接上代碼吧2020-02-02在Vue中使用CSS3實現(xiàn)內容無縫滾動的示例代碼
這篇文章主要介紹了在Vue中使用CSS3實現(xiàn)內容無縫滾動的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-11-11Vue3除了keep-alive還有哪些實現(xiàn)頁面緩存詳解
Vue3中的keep-alive組件用于緩存頁面,以便在切換頁面時保留其狀態(tài),下面這篇文章主要給大家介紹了關于Vue3除了keep-alive還有哪些實現(xiàn)頁面緩存的相關資料,需要的朋友可以參考下2024-04-04