js 数组详细操作方法及解析

[sqliang]

1. 数组操作方法解析总结

问题

在前端开发过程中，处理数组和对象的场景太多了。因此，熟练使用简洁、高效、优雅的方式操作数组和对象是一种基本技能。

总结分析

最近也想自己总结一下这些基本技巧的注意点，可晚上看到奇舞周刊的一个总结特别好，挺全面，因此直接贴出链接，方便学习总结，后期如果有关于数组方面的操作技巧也放到这里。

【奇舞周刊的总结链接】：https://mp.weixin.qq.com/s/-qpjPRSvNlrHSVnA35WZzw
【奇舞周刊的另一个数组总结】：https://juejin.im/post/5b684ef9e51d451964629ba1

2. 单独聊一细js数组sort排序及其稳定性

TODO：单独记录一篇

3. 几个使用map 或 reduce来聚合数据的示例

// 使用reduce
const aggregateArr = inputArr => {
  let indexMap = {}
  return inputArr.reduce((newArr, item) => {
    const {id, eventName} = item
    if (!id) {
      newArr.push(item)
      return newArr
    }
    const index = indexMap[id]
    if (index === undefined) {
      indexMap[id] = newArr.length
      newArr.push(item)
      return newArr
    }
    // 根据list聚合属性
    const hadItem = newArr[index]
    const list = hadItem.list
    if (list) {
      hadItem.list.push(item)
    }
    else {
      newArr[index] = {
        id,
        eventName,
        list: [hadItem, item]
      }
    }
    return newArr
  }, [])
}

const inputArr = [
  {
    id: 1,
    eventName: '你好事件1'
  },
  {
    id: 2,
    eventName: '你好事件2'
  },
  {
    id: 2,
    eventName: '你好事件2'
  },
  {
    id: 3,
    eventName: '你不错'
  }
]
console.log(aggregateArr(inputArr))

// 使用map
const aggregateArr2 = inputArr => {
  let record = {}
  inputArr.map(n => {
    if (!record[n.id]) {
      record[n.id] = Object.assign({}, n)
    } else if (record[n.id].list) {
      record[n.id].list.push(n)
    } else {
      record[n.id].list = [Object.assign({}, record[n.id]), n]
    }
  })
  return Object.values(record)
}

// 测试
console.log(aggregateArr2(inputArr)))