在做單詞本的時候，由于后臺直接把所有的單詞返回給我，所以需要自己將它們按首字母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');

好了~學習一波先。
喜歡的小伙伴們可以點個贊哦。