在做單詞本的時候,由于后臺直接把所有的單詞返回給我,所以需要自己將它們按首字母A-Z進行分類且放進新的數組里頭。
先看看處理前的數據 :
處理前的數據.png
Share my code...
let WordList = [];//處理后的數組
for(let i=0;i<26;i++){
const key = String.fromCharCode(65+i) //A-Z賦給key當作鍵
let map = {}
map[key] = {
title: key,
items: []
}
this.data.List.map((v,k)=>{ //遍歷單詞本
let firstIndex = v.WordName.substr(0, 1);//首字母
if(firstIndex.toUpperCase() == String.fromCharCode(65+i)){//統一轉成大寫進行逐個判斷
map[key].items.push(v.WordName)//push進相對應的數組里頭
}
})
//如果當前的數組里頭為空,則跳過。
if(map[key].items === undefined || map[key].items.length == 0){
continue;
}else{
WordList.push(map[key])//將分類好的每個對象 合并在一個數組里面
}
}
//給data里頭聲明的WordList賦值。(這里的情景是小程序)
this.setData({
WordList:WordList
})
這是處理后的數據截圖。順利將單詞按A-Z分類~
處理后.png
小結
這種處理方式雖然能實現效果但是在性能方面影響很大。
想一想,for循環嵌套map遍歷,如果原來的數組長度很大,那個處理速度一定很慢。
參考下我同事的做法~簡單明了。比?
封裝個formatList(arr,keyword)
方法。arr
需要處理的數組名稱,keyword
數組里頭的字段名。
function formatList(arr,keyword) {
let newArr1 = [];
let tempArr = [];
let reg = /\b(\w)|\s(\w)/g;
let k = 0;
let firstWord = arr[0][keyword].charAt(0).toUpperCase();//獲取第一個分類字母
arr.map((v) => {
v[keyword] = v[keyword].replace(reg,m=>m.toUpperCase());//首字母大寫
if(firstWord == v[keyword].charAt(0)){
tempArr.push(v);
newArr1[k] = {
Title:firstWord,
List:tempArr
}
}else{
//這里循環到這表示已經第二個字母了
firstWord = v[keyword].charAt(0);//設置第二字母
tempArr = [];//把之前的清除掉
tempArr.push(v);//添加第一個
newArr1[++k] = {//自增
Title: firstWord,
List : tempArr
}
}
});
return newArr1;
}
方法調用
var newList = formatList(list,'WordName');
好了~學習一波先。
喜歡的小伙伴們可以點個贊哦。