JS 遍历对象的方法

1、for...in

遍历对象的所有可枚举属性，包括对象本身跟对象继承来的属性。

  for (item in obj) {
    console.log(item);
  }

2、Object.keys()

遍历对象本身的所有可枚举属性, 返回值为数组。

  const obj = { 0: 'a', 1: 'b', 2: 'c' };
  console.log(Object.keys(obj)); // ['0', '1', '2']

3、Object.values()

遍历对象本身的所有可枚举的值，返回值为 值组成的数组。

var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']

4、Object.entries()

遍历对象本身的所有可枚举的属性 跟 值， 返回值为 [[属性，值], [属性， 值],...]。

const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

5、Object.getOwnPropertyNames()

遍历对象本身的所有的值，包括可枚举值与不可枚举值，但不包括 Symbol 值作为名称的属性。返回值为（属性组成的）数组。

var arr = ["a", "b", "c"];
console.log(arr)  //  [0: "a", 1: "b", 2: "c", length: 3]
console.log(Object.getOwnPropertyNames(arr).sort()); // ["0", "1", "2", "length"]

var obj = { 0: "a", 1: "b", 2: "c"};
console.log(Object.getOwnPropertyNames(obj).sort()); // ["0", "1", "2"]

6、Object.getOwnPropertySymbols()

遍历对象本身的所有 Symbol 属性，返回值为 所有 Symbol 属性的数组。

var obj = {};
var a = Symbol("a");
var b = Symbol.for("b");

obj[a] = "localSymbol";
obj[b] = "globalSymbol";
console.log(obj) // [Symbol("a"): "localSymbol", Symbol("b"): "globalSymbol"]

var objectSymbols = Object.getOwnPropertySymbols(obj);

console.log(objectSymbols.length); // 2
console.log(objectSymbols)         // [Symbol(a), Symbol(b)]
console.log(objectSymbols[0])      // Symbol(a)

var addC = "c";

obj[addC] = "addCaddCaddC";
console.log(obj) 
// [c: "addCaddCaddC", Symbol("a"): "localSymbol", Symbol("b"): "globalSymbol"]

var objectSymbols2 = Object.getOwnPropertySymbols(obj);

console.log(objectSymbols2.length); // 2
console.log(objectSymbols2)         // [Symbol(a), Symbol(b)]
console.log(objectSymbols2[0])      // Symbol(a)

7、Reflect.ownKeys()

MDN链接：developer.mozilla.org/zh-CN/docs/…

返回一个由目标对象自身的属性键组成的数组

遍历对象本身所有的属性，包括可枚举值与不可枚举值以及所有 Symbol 属性

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

Reflect.ownKeys([]); // ["length"]

var sym = Symbol.for("comet");
var sym2 = Symbol.for("meteor");

var obj = {[sym]: 0, "str": 0, "773": 0, "0": 0,
           [sym2]: 0, "-1": 0, "8": 0, "second str": 0};
           
Reflect.ownKeys(obj);
// [ "0", "8", "773", "str", "-1", "second str", Symbol(comet), Symbol(meteor) ]

JS 遍历对象的一些小变形

1、只获取不可枚举的属性：

var target = Object.create({}, {
  getFoo: {
    value: function() { return this.foo; },
    enumerable: false
  }
});

var enum_and_nonenum = Object.getOwnPropertyNames(target);
// [getFoo]

var enum_only = Object.keys(target);
//[]

var nonenum_only = enum_and_nonenum.filter(function(key) {
    var indexInEnum = enum_only.indexOf(key);
    if (indexInEnum == -1) {
        // 没有发现在 enum_only 健集中意味着这个健是不可枚举的，
        // 因此返回 true 以便让它保持在过滤结果中
        return true;
    } else {
        return false;
    }
});

console.log(nonenum_only); // [getFoo]

2、entries 的 polyFill

if (!Object.entries)
  Object.entries = function( obj ){
    var ownProps = Object.keys( obj ),
        i = ownProps.length,
        resArray = new Array(i); // preallocate the Array
    while (i--)
      resArray[i] = [ownProps[i], obj[ownProps[i]]];

    return resArray;
  };

3、实现 object.keys()

Object.keys = function(obj) {
    if (obj !== Object(obj))
        throw new TypeError('Object.values called on a non-object');
    var val=[]
    for (key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj,key)) {
            val.push(key);
        }
    }
    return val;
}