JavaScript Array、Object、数组、对象等数据转换及处理总结(三)

459 阅读2分钟

这一篇总结一下基础的数组遍历和对象遍历的对比、结合、技巧

JS 对象的遍历

先上题目

现需要将对象数据 cityInfo 转变为 cityInfoArr 用于饼图统计图显示这个班级的性别占比,如果城市非常的多,那么不可能一个个属性取值再一个个赋值,需要用到对象遍历

let cityInfo = {
  Guangzhou: 48,
  Shenzhen: 48,
  Beijing: 48
}
let cityInfoArr = [
  {city: 'Guangzhou', value: 48},
  {city: 'Shenzhen', value: 48},
  {city: 'Beijing', value: 48}
]

for...in...

for (const key in cityInfo) {
  key // 键
  cityInfo[key] // 值
}
const result = []
for (const key in cityInfo) {
  result.push({city: key, value: cityInfo[key]})
}

Object.keys()

Object.keys(cityInfo) 
// ["Guangzhou", "Shenzhen", "Beijing"] 键的集合
const result = []
Object.keys(cityInfo).forEach(key => {
  result.push({city: key, value: cityInfo[key]})
})

Reflect.ownKeys()

Reflect.ownKeys(cityInfo) 
// ["Guangzhou", "Shenzhen", "Beijing"] 键的集合(如果有,包括不可枚举属性)
const result = []
Reflect.ownKeys(cityInfo).forEach(key => {
  result.push({city: key, value: cityInfo[key]})
})

Object.entries()

Object.entries(cityInfo) 
// [["Guangzhou",48],["Shenzhen",48],["Beijing",48]] [['键', 值]]
// 每一项 item,item[0] 是键,item[1]是值
const result = Object.entries(cityInfo).map(([city, value]) => ({city, value}))

Array 遍历总结

先上题目

现需要将数组数据计算出用于显示占比,将 classArr 转变为 classArrStat

let classArr = [
  {className: 'class1', male: 20, female: 20},
  {className: 'class2', male: 30, female: 10},
  {className: 'class3', male: 10, female: 30}
]

let classArrStat = [
  {className: 'class1', male: 20, female: 20, malePercent: '50%', female: '50%'},
  {className: 'class2', male: 30, female: 10, malePercent: '75%', female: '25%'},
  {className: 'class3', male: 10, female: 30, malePercent: '25%', female: '7s%'}
]

Array.prototype.map

classArr.map(item => ({...item})) // map 返回一个新的数组,数组的每一项可以单独处理
let result = classArr.map(({ className, male, female }) => {
  let sum = male + female
  let malePercent = (male / sum).toFixed(4) + '%'
  let femalePercent = (female / sum).toFixed(4) + '%'
  return { className, male, female, malePercent, femalePercent }
})

for...in...

for (const key in classArr) {} // 对于数组来说,这个 key 就是 index 索引
let result = []
for (const index in classArr) {
  const { className, male, female } = classArr[index]
  let sum = male + female
  let malePercent = (male / sum).toFixed(4) + '%'
  let femalePercent = (female / sum).toFixed(4) + '%'
  result.push({ className, male, female, malePercent, femalePercent })
}

forEach

classArr.forEach((item, index) => {}) // item 为数组的每一项,index 为数组的每一项的索引
let result = []
classArr.forEach((item, index) => {
  const { className, male, female } = item
  let sum = male + female
  let malePercent = (male / sum).toFixed(4) + '%'
  let femalePercent = (female / sum).toFixed(4) + '%'
  result.push({ className, male, female, malePercent, femalePercent })
})

for...of...

for(let value of classArr) {} // 对于数组来说 value 就是数组的每一项
let result = []
for (const value of classArr) {
  const { className, male, female } = value
  let sum = male + female
  let malePercent = (male / sum).toFixed(4) + '%'
  let femalePercent = (female / sum).toFixed(4) + '%'
  result.push({ className, male, female, malePercent, femalePercent })
}

filter

如果再加一个要求,要求过滤出男生大于等于20个人的班级,那么可以用到 filter 的过滤功能和对象的引用特性并且直接在里面处理数据计算(改方法会改变原数组,有特殊需要可以自己做深拷贝),而不需要额外的再去用 map 处理,直接在一次循环当中解决

classArr.filter(item => judge) // filter 会根据返回的 judge 这个结果的 true 和 false 决定是否过滤掉当前的 item
let result = classArr.filter(item => {
  const { male, female } = item
  let sum = male + female
  let malePercent = (male / sum).toFixed(4) + '%'
  let femalePercent = (female / sum).toFixed(4) + '%'
  item.malePercent = malePercent
  item.femalePercent = femalePercent
  return male >= 20
})