[JS基础回顾] 对象遍历的 7 种方法 ~~~

• 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

目录

1. for...in
2. Object.keys(obj) {}->[]
3. Object.values(obj) {}->[]
4. Object.entries(obj) {}->[]
5. Reflect.ownKeys(obj) {}->[]
6. Object.getOwnPropertyNames(obj) {}->[]
7. for...of + obj[Symbol.iterator] + 生成器

一 for...in

for...in只会遍历对象本身的、以及原型链上的所有可枚举属性

1) 是否可枚举

enumerable: false

Object.defineProperty(obj,'dd',{ enumerable: false, value: 4 })

2) 遍历本身与原型链上的

var obj = {
    a:1,
    b:2
}
obj.__proto__.cc = 3; // 原型上属性
Object.defineProperty(obj,'dd',{ enumerable: false, value: 4 });// 不可枚举
for(let key in obj){
    console.log(key)
}

// a b cc

console.log(obj.cc); // 3

3) 遍历本身 与不包含原型链上的

for(let key in obj){
    if(obj.hasOwnProperty(key)){
        console.log(key)
    }
}

// a  b

二 Object.keys(obj) {}->[]

Object.keys只会遍历对象本身的可枚举属性，不会遍历原型链上的属性`

var obj = {
    a:1,
    b:2
};
obj.__proto__.cc = 3;
Object.defineProperty(obj,'dd',{ enumerable: false, value: 4 });
Object.keys(obj)
// ['a', 'b']

三 Object.values(obj) {}->[]

返回一个数组, 只包含可枚举的, 不包含原型链上的

var obj = {
    a:1,
    b:2
};
obj.__proto__.cc = 3;
Object.defineProperty(obj,'dd',{ enumerable: false, value: 4 });

Object.values(obj);
// [1, 2]

四 Object.entries(obj) {}->[]

返回一个数组, 只包含可枚举的, 不包含原型链上的

var obj = {
    a:1,
    b:2
};
obj.__proto__.cc = 3;
Object.defineProperty(obj,'dd',{ enumerable: false, value: 4 });

Object.entries(obj);
// [['a', 1], ['b', 2]]

五 Reflect.ownKeys(obj) {}->[]

Reflect.ownKeys返回一个数组, 不包含原型链上的,并且包含不可枚举的属性.

var obj = {
    a:1,
    b:2
};
obj.__proto__.cc = 3;
Object.defineProperty(obj,'dd',{ enumerable: false, value: 4 });

Reflect.ownKeys(obj);
// ['a', 'b', 'dd']

六 Object.getOwnPropertyNames(obj) {}->[]

返回一个数组, 不包含原型链上的,并且包含不可枚举的属性.

var obj = {
    a:1,
    b:2
};
obj.__proto__.cc = 3;
Object.defineProperty(obj,'dd',{ enumerable: false, value: 4 });

Object.getOwnPropertyNames(obj);
// ['a', 'b', 'dd']

七 for...of + obj[Symbol.iterator] + 生成器

var obj = {
    a:1,
    b:2
}
obj.__proto__.cc = 3; // 原型上属性
Object.defineProperty(obj,'dd',{ enumerable: false, value: 4 });// 不可枚举

obj[Symbol.iterator] = function* (){
    let keys = Object.keys( this );

    for(let i = 0, l = keys.length; i < l; i++){
        yield this[keys[i]];
    }
}

for(let key of obj){
    console.log( key);
}
// 1  2

参考

• JS对象遍历
• JS对象遍历

总结

• Object.entries()最适用于数组解构赋值，其方式是将键和值轻松分配给不同的变量。 此函数还可以轻松地将纯JS对象属性映射到Map对象中。、

• Object.values()和Object.entries()返回数据的顺序是不确定的，所以不要依赖该方式。

• ( 第二到第六 )对象遍历的方法,共同点 输入都是 对象, 输出 都是 数组,{}->[]