JavaScript——对象的遍历

  • 属性的可枚举性
  • for…of
  • 对象的遍历
    • for…in
    • Object.getOwnPropertyNames()
    • Object.getOwnPropertySymbols()
    • Object.keys()
    • Object.values() | Object.entries()
    • Reflect.ownKeys()

属性的可枚举性

  • 可枚举属性是指那些内部“可枚举”(enumerable)标志设置为 true 的属性
    • Object.getOwnPropertyDescriptor静态方法返回一个对象，用于描述指定对象上的特定属性的配置。
  • 通过直接的赋值和属性初始化的属性，该标识值默认为即为 true
let obj = {name: "小明",age: 22}console.log(Object.getOwnPropertyDescriptor(obj, "name"));

  • 对于通过 Object.defineProperty 等定义的属性，该标识值默认为 false
    • Object.defineProperty() 静态方法会直接在一个对象上定义一个新属性，或修改其现有属性。
const obj = {}Object.defineProperty(obj, "name", {value: "小明",});console.log(Object.getOwnPropertyDescriptor(obj, "name"));

for…of

for...of 也可进行遍历，但是它只能对可迭代对象进行遍历，不能遍历普通对象。

那么怎么判断是否为迭代对象呢？

  • 为了实现可迭代，一个对象必须实现 @@iterator 方法，这意味着这个对象（或其原型链中的任意一个对象）必须具有一个键值为 Symbol.iterator 的属性。

    let arr = [10, 20, 30] let obj = {a:1,b:2}let str = "hello"let map1 = new Map([["k1","v1"], ["k2", "v2"]])console.log(arr[Symbol.iterator]) //ƒ values() { [native code] }console.log(obj[Symbol.iterator]) //undefinedconsole.log(str[Symbol.iterator]) //undefinedconsole.log(map1[Symbol.iterator]) //undefined

    除 Array 、Object、 String、 Map 外，还有 set 、Arguments、DOM集合。

虽然普通对象上不存在 Symbol.iterator属性，但我们可以手写实现。

let Alice = {heigh: 168,age: 19,hobby: ['sing', 'dance', 'speak'],todo:function(){console.log('dududu...');},[Symbol.iterator](){const this_ = thisconst key_value = Object.entries(this_)let index = 0return {next(){if(index < key_value.length){const ret = {value: key_value[index][1],done: false}index++return ret}else{return {value: undefined, done: true}}}}}}for(let val of classes){console.log(val);}

对象的遍历

for…in

  • 遍历对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。
let Alice = {height: "170", hobby: ['dance','sing','drawing'],point: "cook"}let sym = Symbol("foo")Alice[sym] = truefunction EnglishPeople(){this.birthPlace = "English"}EnglishPeople.prototype = Alicelet obj = new EnglishPeople();for(let prop in obj){console.log(`obj.${prop}=${obj[prop]}`);}

如果只考虑对象本身的属性，那么使用 hasOwnProperty() 或者 getOwnPropertyNames()来确定某属性是否是对象本身的属性。

  • Object.property.hasOwnProperty(prop)返回一个布尔值，表示对象自有属性中是否具有指定的属性。

Object.getOwnPropertyNames()

  • 返回一个数组，其包含给定对象中所有自有属性（包括不可枚举属性，但不包括使用 symbol 值作为名称的属性）
let Alice = {height: "170", hobby: ['dance','sing','drawing'],point: "cook",}// symbol属性let sym = Symbol("foo")Alice[sym] = true// 设置不可枚举属性Object.defineProperty(Alice, "legs", {value: 4})console.log(Object.getOwnPropertyNames(Alice));

Object.getOwnPropertySymbols()

返回一个包含给定对象所有自有 Symbol 属性的数组。

let Alice = {height: "170", hobby: ['dance','sing','drawing'],point: "cook",}let sym = Symbol("foo")Alice[sym] = trueconst objectSymbols = Object.getOwnPropertySymbols(Alice);console.log(objectSymbols);console.log(objectSymbols.length);

Object.keys()

Object.keys() 遍历对象本身的可枚举属性，返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。

const Alice = {height: "170", hobby: ['dance','sing','drawing'],point: "cook"}console.log(Object.keys(Alice))

  • 如果传入非对象参数会强制转换为对象，undefiend 和 null无法强制转换。另外只有字符串有自己的可枚举属性，其他类型都会返回空数组。
// 字符串具有索引作为可枚举的自有属性console.log(Object.keys("foo")); // ['0', '1', '2']// 其他基本类型（除了 undefined 和 null）没有自有属性console.log(Object.keys(100)); // []

Object.keys 与使用 for...in 循环迭代相同，但是 for...in循环还会枚举原型链中的属性。

因此大多数情况下推荐使用Object.keys替代 for...in。如果需要属性的值，请使用Object.values。如果键和值都需要，请使用 Object.entries

Object.values() | Object.entries()

Object.values 返回一个给定对象的自有可枚举字符串键属性值组成的数组。

Object.entries 返回一个包含给定对象自有的可枚举字符串键属性的键值对。

const Alice = {height: "170", hobby: ['dance','sing','drawing'],point: "cook"}console.log(Object.keys(Alice))console.log(Object.values(Alice))console.log(Object.entries(Alice))

Reflect.ownKeys()

Reflect.ownKeys(target) 返回一个由目标对象自身的属性键组成的数组

Reflect.ownKeys({ z: 3, y: 2, x: 1 }); // [ "z", "y", "x" ]Reflect.ownKeys([]); // ["length"]

总结：

遍历可枚举属性：

for…in | Object.keys | Object.values | Object.entries | Reflect.ownKeys()

其中for…in还遍历原型对象的可枚举属性。

不可枚举属性也会遍历的：

Object.getOwnPropertyNames

可遍历对象上的Symbol类型属性：

Object.getOwnPropertySymbols()