關於JS陣列中相同物件屬性值歸類方法的一點思考

Spdino發表於2018-08-03
JS陣列物件

各位看官老爺們好，在工作中經常會遇到對於資料的操作，下面是我工作當中遇到的關於陣列中相同物件屬性值歸類的一點思考（菜鳥，輕噴，歡迎討論）：

首先:

有一個這樣的陣列

const arr = [
  {1:'1',color:'白色'},
  {2:'2',color:'白色'},
  {3:'3',color:'白色'},
  {4:'4',color:'白色'},
  {5:'5',color:'白色'},
  {6:'6',color:'黑色'},
  {7:'7',color:'黑色'},
  {8:'8',color:'黑色'},
  {9:'9',color:'黑色'},
  {10:'10',size:'mini',color:'黑色'},
]
複製程式碼

解決方法:

function formateData(data){
  let Arr = []
  let obj = arr.reduce((ret,next) => {
  if(ret.color === next.color) {
    Object.assign(ret,next)
  }else{
    Arr.push(ret)
    ret = next
  }
  if(next === data[data.length-1]){
    Arr.push(ret)
  }
  return ret
 },arr[0])
 return Arr
}
複製程式碼

返回值:

[ { '1': '1', '2': '2', '3': '3', '4': '4', '5': '5', color: '白色' },
  { '6': '6','7': '7','8': '8','9': '9','10': '10',color: '黑色',size: 'mini' } ]
複製程式碼

但是

對於這樣的陣列

const arr = [
  {1:'1',color:'白色'},
  {2:'2',color:'黑色'},
  {3:'3',color:'白色'},
  {4:'4',color:'黑色'},
  {5:'5',color:'白色'},
  {6:'6',color:'黑色'},
  {7:'7',color:'白色'},
  {8:'8',color:'黑色'},
  {9:'9',color:'白色'},
  {10:'10',size:'mini',color:'黑色'},
]
複製程式碼

返回值卻變成:

[ { '1': '1', color: '白色' },
  { '2': '2', color: '黑色' },
  { '3': '3', color: '白色' },
  { '4': '4', color: '黑色' },
  { '5': '5', color: '白色' },
  { '6': '6', color: '黑色' },
  { '7': '7', color: '白色' },
  { '8': '8', color: '黑色' },
  { '9': '9', color: '白色' },
  { '10': '10', size: 'mini', color: '黑色' } ]
複製程式碼

這顯然是不符合需求的，所以這種方法不可取

所以，我們這樣做:

function formateData(data){
  let obj = {}  // 申明一個大物件用來歸類
  let Arr = []  // 申明一個陣列倉庫
  data.forEach(item => {
    let key = Object.keys(item)
    key.forEach((el,index) => {
      !obj[item.color] && (obj[item.color] = {})   // 初始化，賦值初始值  
      obj[item.color][el] = item[el]   // 根據color往大物件下的子物件賦值
    })
  })
  // 最後合併，把大物件裡的所有值push進Arrr陣列中
  Object.values(obj).forEach(item => {
    Arr.push(item)
  })
  return Arr
}
複製程式碼

返回值:

[ { '1': '1', '3': '3', '5': '5', '7': '7', '9': '9', color: '白色' },
  { '2': '2','4': '4','6': '6','8': '8','10': '10',color: '黑色',size: 'mini' } ]
複製程式碼

這樣的話就滿足我們的需求了

封裝：

/**
引數:
    data:傳入需要歸類的陣列
    name:需要歸類的物件屬性名
*/
function formateData(data,name){
    // 檢測傳參
   if(!name && typeof data !== Array && typeof name !== String){
    return 
  }
  let obj = {}  // 申明一個大物件用來歸類
  let Arr = []  // 申明一個陣列倉庫
  data.forEach(item => {
    let key = Object.keys(item)
    key.forEach((el,index) => {
      !obj[item[name]] && (obj[item[name]] = {})   // 初始化，賦值初始值  
      obj[item[name]][el] = item[el]   // 根據color往大物件下的子物件賦值
    })
  })
  // 最後合併，把大物件裡的所有值push進Arrr陣列中
  Object.values(obj).forEach(item => {
    Arr.push(item)
  })
  return Arr
}
複製程式碼

最後對於前面arr陣列我們就可以這樣呼叫 formateData(arr,'color') 返回已經歸類的新陣列

相關文章