【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]