JavaScript Array、Object、数组、对象等数据转换及处理总结（二）

数组对象去重

数组对象去重，在从读取数据的时候，由于用户不断地新增数据，会导致依据 pageNo 获取回来的数据不准确出现重复，如：

let data = [
  { id: 1, name: 'didi', age: 13 },
  { id: 2, name: 'nene', age: 12 },
  { id: 3, name: 'aiai', age: 14 },
  { id: 4, name: 'riri', age: 15 },
  { id: 1, name: 'didi', age: 13 },
]

对于有重复的数据，这时候就要用到数据对象去重，个人封装一个对象变量去重法函数即可

对象变量去重法

let data = [ // 第一条数据和第五条数据重现了重复
  { id: 1, name: 'didi', age: 13 },
  { id: 2, name: 'nene', age: 12 },
  { id: 3, name: 'aiai', age: 14 },
  { id: 4, name: 'riri', age: 15 },
  { id: 1, name: 'didi', age: 13 },
]

// 封装
function deWeight(data, primaryKey) {
  // primaryKey 就是每一条数据的唯一标识，例如 id
  let obj = {} // 初始化
  data.forEach(item => {
    // 利用变量赋值覆盖的特性来做去重
    obj[item[primaryKey]] = item
  })
  // 使用 Object.values() 这个方法可以很方便的直接再次从对象里取出值
  return Object.values(obj) 
}

deWeight(data, 'id')

深拷贝

由于 JS 的引用特性，我们很多时候都会改变到原数据，一份数据要多份用的时候也会因为 JS 的引用特性导致原数据改变，这时候我们就需要用到深拷贝，深拷贝如果你足够的自信不犯错，那可直接用懒狗JSON格式化来深拷贝。如果怕犯错，那就用递归深拷贝也是不错。

JSON 格式化深拷贝

let data = [
  { id: 1, name: 'didi', age: 13 },
  { id: 2, name: 'nene', age: 12 }
]

function deepClone(data) {
  return JSON.parse(JSON.stringify(data))
}

let dataCopy = deepClone(data)

dataCopy[0].age = 0 // 改变其中一个值

data[0].age === dataCopy[0].age // 结果为 false 则说明已经成功的拷贝了一份不影响原数据的数据

递归深拷贝

let data = [
  { id: 1, name: 'didi', age: 13 },
  { id: 2, name: 'nene', age: 12 }
]

function deepClone(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return data
  }
  // 初始化返回结果
  let result = obj instanceof Array ? [] : {}
  // 遍历判断
  for (let key in obj) {
      // 保证 key 不是原型的属性
      if (obj.hasOwnProperty(key)) {
          // 递归
          result[key] = deepClone(obj[key])
      }
  }
  return result;
}

let dataCopy = deepClone(data)

dataCopy[0].age = 0 // 改变其中一个值

data[0].age === dataCopy[0].age // 结果为 false 则说明已经成功的拷贝了一份不影响原数据的数据

数组对象排序

有时候业务逻辑过多的话还是把升降序封装一下比较好

升序

let data = [
  { id: 2, name: 'nene', money: 2000 },
  { id: 1, name: 'didi', money: 1000 },
  { id: 3, name: 'mimi', money: 3000 }
]

function ascendingSort(data, key) {
  return data.sort((a, b) => (a[key] - b[key]))
}

ascendingSort(data, 'money')

降序

let data = [
  { id: 2, name: 'nene', money: 2000 },
  { id: 1, name: 'didi', money: 1000 },
  { id: 3, name: 'mimi', money: 3000 }
]

function ascendingSort(data, key) {
  return data.sort((a, b) => (b[key] - a[key]))
}

ascendingSort(data, 'money')

数组对象求和

经常会算钱嘛，就用到了求和。

reduce

封装reduce，理由如上

let data = [
  { id: 2, name: 'nene', money: 2000 },
  { id: 1, name: 'didi', money: 1000 },
  { id: 3, name: 'mimi', money: 3000 }
]

function arraySum(data, key) {
  return data.reduce((prev, item) => prev + item[key], 0)
}

arraySum(data, 'money')