关于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') 返回已经归类的新数组