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') 이미 분류된 새로운 수조를 되돌려줄 수 있다