【ES8系列】Object 快速遍历

Object.keys()

Object.values() 返回一个数组，其元素是在对象上找到的可枚举属性值。属性的顺序与通过手动循环对象的属性值所给出的顺序相同(for…in，但是for…in还会遍历原型上的属性值)。

Object 数据遍历：新旧语法对比 

// 取班级学生姓名，obj的key
let grade = {
  'lilei': 96,
  'hanmei': 99
}
let result = []
for (let k in grade) {
  result.push(k)
}
console.log(result) // ["lilei", "hanmei"]


// ES8 新语法
console.log(Object.keys(grade)) // ["lilei", "hanmei"]

Object 数据筛选、查找 ：新旧语法对比 

let grade = {
  'lilei': 96,
  'hanmei': 99
}
let result = []
for (let k in grade) {
  if (k === 'lilei') {
    result.push(k)
  }
}
console.log(result) // ["lilei"]

// ES8 Object.keys返回的是一个数组，因此可以用数组的方法来进行优雅的处理
console.log(Object.keys(grade).filter(item => item === 'lilei')) // ["lilei", "hanmei"]

Object.values()

Object.values 是在对象上找到可枚举的属性的值，所以只要这个对象是可枚举的就可以，不只是 {} 这种形式。

let grade = {
  'lilei': 96,
  'hanmei': 99
}
console.log(Object.values(grade).filter(item => item > 96)) //[99]

Object.entries()

Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for…in 循环遍历该对象时返回的顺序一致。（区别在于 for-in 循环也枚举原型链中的属性）

// Object 不可以直接遍历，因此这里会引发错误
let grade = {
  'lilei': 98,
  'hanmei': 87
}

for (let [key, value] of grade) {
  console.log(key, value) // Uncaught TypeError: grade is not iterable
}

利用 Object.entries() 把 object 对象转换成一个可遍历的键值对数组，因此Object.entries返回的是数组

let grade = {
  'lilei': 96,
  'hanmei': 99
}
let result = []
for (let [k, v] of Object.entries(grade)) { // 解构赋值
  console.log(k, v)  // lilei 96   hanmei 99
}


// 查看Object.entries的返回值，对应for...of...的解构赋值
console.log(Object.entries(grade))
//  [Array(2), Array(2)]
// 0: (2) ["lilei", 96]
// 1: (2) ["hanmei", 99]