vue中數(shù)組加Key

代碼： 

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

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

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

這是普通數(shù)組

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

vue數(shù)組操作

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

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

splice說明：

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

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

如：

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

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

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

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

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

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

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

案例：

對數(shù)組進行操作：

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

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

總結(jié)

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

最新評論