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

JS 对象转数组

应用场景实例：将某年级一班的对象格式转成数组格式

Object.entries 方法返回一个给定对象自身可枚举属性的键值对数组

Array.prototype.map 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

Object.entries + Array.prototype.map

let class1 = {
    male: 31,
    female: 29
}

let data = Object.entries(class1).map(([gender, num]) => ({gender, num}))
console.log(data) // [{gender: 'male', value: 31}, {gender: 'female', num: 29}]
复制代码

Object.keys + Array.prototype.map

let class1 = {
    male: 31,
    female: 29
}

let data = Object.keys(class1).map(gender => ({gender, num: class1[gender]}))
console.log(data) // [{gender: 'male', value: 31}, {gender: 'female', num: 29}]
复制代码

JS 数组转对象

应用场景实例：将某年级一班的数组格式转成对象格式

Object.fromEntries 方法把键值对列表转换为一个对象。

Array.prototype.map 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

Object.fromEntries + Array.prototype.map

let data = [{gender: 'male', value: 31}, {gender: 'female', num: 29}]

let class1 = Object.fromEntries(data.map(item => ([item.gender, item.value])))
console.log(class1) // { male: 31, female: 29 }
复制代码

JS 一维数组转、树形结构数组相互转换

如果有用到权限树，一般都少不了一维数组转树形结构，或者树形结构转一位数组扁平化

let data = [
  { id: 1, pid: 0 },
  { id: 2, pid: 1 }
]
let tree = [
  {
    id: 1,
    pid: 0,
    children: [
      {
        id: 2,
        pid: 1
        children: []
      }
    ]
  }
]
复制代码

递归方法转树形结构数据

• 计算量大
• 不会改变原有数据

let data = [
  { id: 1, pid: 0 },
  { id: 2, pid: 0 },
  { id: 3, pid: 1 },
  { id: 4, pid: 2 },
  { id: 5, pid: 3 },
  { id: 6, pid: 4 },
  { id: 7, pid: 5 },
  { id: 8, pid: 6 },
]

function toTreeData(data, pidName = 'pid', pidVal = 0, childName = 'children') {
  let result = []

  data.forEach(item => {
    if (item[pidName] === pidVal) {
      result.push({
        ...item,
        [childName]: toTreeData({ data, pidName, pidVal: item.id })
      })
    }
  })

  return result
}

toTreeData(data)
复制代码

对象引用法转树形结构数据

• 计算量小
• 不使用深拷贝则会改变原始数据

let data = [
  { id: 1, pid: 0 },
  { id: 2, pid: 0 },
  { id: 3, pid: 1 },
  { id: 4, pid: 2 },
  { id: 5, pid: 3 },
  { id: 6, pid: 4 },
  { id: 7, pid: 5 },
  { id: 8, pid: 6 },
]

function toTreeData(data, pidName = 'pid', childName = 'children' ) {
  let obj = {}
  let result = []

  data.forEach(item => {
    obj[item.id] = item
  })
  
  for (let i = 0; i < data.length; i++) {
    let item = data[i]
    let parent = obj[item[pidName]]
    if (parent) {
      (parent[childName] || (parent[childName] = [])).push(item)
    } else {
      result.push(item)
    }
  }

  return result
}

toTreeData(data)
复制代码

广度法树形结构数据扁平化

• 不使用深拷贝则会改变原始数据

function cutTree(data, childName = 'children') {
  let result = [];

  while (data.length != 0) {
    let shift = data.shift();
    let children = shift[childName]
    delete shift[childName]
    result.push(shift)

    if (children) {
      children.forEach(item => {
        data.push(item)
      })
    }
  }
  return result
}
复制代码