这一篇总结一下基础的数组遍历和对象遍历的对比、结合、技巧
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
})