JS 数组对象根据下标拆分成新的数组

真为难啊！

var arr = [
  {guigeArr:['蓝色','XL','3','S']},
  {guigeArr:['蓝色','L','6','S']},
  {guigeArr:['蓝色','L','3','S']},
  {guigeArr:['蓝色','XL','6','S']},

  {guigeArr:['黑色','XL','3','S']},
  {guigeArr:['黑色','L','6','S']},
  {guigeArr:['黑色','L','3','S']},
  {guigeArr:['黑色','XL','6','S']},
]

var newArr = []
var length = arr[0].guigeArr.length;
for(var i=0;i<length;i++){
  var arrs = [];
  newArr.push(arrs)
}
console.log(newArr)
// [[], [], [], []]

arr.forEach(({guigeArr})=>{
  guigeArr.forEach((v,i)=>{
    if(!newArr[i].includes(v))
      newArr[i].push(v)
  })
})

console.log(newArr)
// [["蓝色", "黑色"], ["XL", "L"], ["3", "6"], ["S"]]

* 备注

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。