vue中數(shù)組加Key

代碼： 

const numberList = list.map(item => ({value: item}))

 其中 list是原數(shù)組，numberList是轉(zhuǎn)化后的數(shù)組，value是key的名稱

在使用element的el-autocomplete遠(yuǎn)程搜索組件時(shí)，普通的數(shù)組不能匹配，需要帶有可以的數(shù)組才可以。

這是普通數(shù)組

轉(zhuǎn)化成key為value的數(shù)組：

vue數(shù)組操作

1、數(shù)組的響應(yīng)式方法

• push(value)：從數(shù)組最后面添加元素
• unshift(value)：從數(shù)組最前面添加元素
• pop()：從數(shù)組最后一個(gè)元素開始刪除
• shift()：從數(shù)組第一個(gè)元素開始刪除
• splice(start,deleteCount)：從start開始刪除deleteCount個(gè)元素
• splice(start,deleteCount,…value)：從start開始替換deleteCount個(gè)元素，后面跟上要替換的元素。
• splice(start,0,…value)：從start開始插入value,后面跟上要添加的元素。

splice說明：

在進(jìn)行數(shù)組的中間插入操作時(shí)，vue是依次替換每一個(gè)數(shù)，然后再在最后添加一個(gè)新空間存儲(chǔ)原數(shù)組最后的元素。

這樣做是很沒有效率的，因此在進(jìn)行數(shù)組遍歷時(shí)，若想從中間插入一條數(shù)據(jù)，需要使用到key屬性。

如：

< li v-for=“item in arrays” :key=“item” >{{ item }}

所以，一句話概括，key的作用是為了高效的更新虛擬DOM.

2、數(shù)組的非響應(yīng)式方法

arr[0]=“aaa”，列表不會(huì)隨著數(shù)組的改變而響應(yīng)式渲染到頁面上。

3、數(shù)組的高階函數(shù)

類似lambda表達(dá)式函數(shù)時(shí)編程：

• filter()：過濾數(shù)組，參數(shù)傳遞一個(gè)回調(diào)函數(shù)，回調(diào)函數(shù)返回true時(shí)，函數(shù)內(nèi)部自動(dòng)講這次回調(diào)的數(shù)據(jù)保存到新數(shù)組中；當(dāng)回調(diào)函數(shù)返回false時(shí)，函數(shù)內(nèi)部過濾掉該數(shù)據(jù)。
• map()：遍歷操作數(shù)組，參數(shù)傳遞一個(gè)回調(diào)函數(shù)，可在回調(diào)函數(shù)中操作遍歷的每一個(gè)數(shù)組值，如加減乘除。
• reduce()：對(duì)數(shù)組中所有的內(nèi)容進(jìn)行匯總。

案例：

對(duì)數(shù)組進(jìn)行操作：

• 1，取出小于100的數(shù)
• 2，每個(gè)數(shù)乘2
• 3，匯總

newArray = array.filter(arr => arr < 100).map(arr => arr*2).reduce((arr,num) => arr+num);

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論