for...in、Object.keys()、Object.getOwnPropertyNames()、for...of 介绍和使用

Question

方法	适用范围	描述
for..in	数组，对象	获取可枚举的实例和原型属性名
Object.keys()	数组，对象	返回可枚举的实例属性名组成的数组
Object.getPropertyNames()	数组，对象	返回除原型属性以外的所有属性（包括不可枚举的属性）名组成的数组
for..of	可迭代对象（Array、Map、Set、arguments 等）	返回属性值

Object.keys(obj)

返回一个数组，数组里是该 obj 可被枚举的所有属性。请看示例：

示例一：

  function Pasta(grain, width, shape) {
            this.grain = grain;
            this.width = width;
            this.shape = shape;
            this.toString = function () {
                    return (this.grain + ", " + this.width + ", " + this.shape);
            }
    }
    console.log(Object.keys(Pasta)); //console: []
    var spaghetti = new Pasta("wheat", 0.2, "circle");
    console.log(Object.keys(spaghetti)); //console: ["grain", "width", "shape", "toString"]

示例二：

 var arr = ["a", "b", "c"];
    console.log(Object.keys(arr)); // console: ["0", "1", "2"]
    var obj = { 0 : "a", 1 : "b", 2 : "c"};
    console.log(Object.keys(obj)); // console: ["0", "1", "2"]
    var an_obj = { 100: "a", 2: "b", 7: "c"};
    console.log(Object.keys(an_obj)); // console: ["2", "7", "100"]
    var my_obj = Object.create({}, { getFoo : { value : function () { return this.foo } } });
    my_obj.foo = 1;
    console.log(Object.keys(my_obj)); // console: ["foo"]

js 中几种遍历对象的方法，包括 for in、Object.keys、Object.getOwnProperty，它们在使用场景方面各有不同。

for in

主要用于遍历对象的可枚举属性，包括自有属性、继承自原型的属性

var obj = {"name":"Poly", "career":"it"}
Object.defineProperty(obj, "age", {value:"forever 18", enumerable:false});
Object.prototype.protoPer1 = function(){console.log("proto");};
Object.prototype.protoPer2 = 2;
console.log("For In : ");
for(var a in obj) console.log(a);

Object.keys

返回一个数组，元素均为对象自有的可枚举属性

var obj = {"name":"Poly", "career":"it"}
Object.defineProperty(obj, "age", {value:"forever 18", enumerable:false});
Object.prototype.protoPer1 = function(){console.log("proto");};
Object.prototype.protoPer2 = 2;
console.log("Object.keys:")
console.log(Object.keys(obj));

Object.getOwnProperty

用于返回对象的自有属性，包括可枚举和不可枚举的

var obj = {"name":"Poly", "career":"it"}
Object.defineProperty(obj, "age", {value:"forever 18", enumerable:false});
Object.prototype.protoPer1 = function(){console.log("proto");};
Object.prototype.protoPer2 = 2;
console.log("Object.getOwnPropertyNames: ");
console.log(Object.getOwnPropertyNames(obj));

for..of

var obj = {"name":"Poly", "career":"it"}
Object.defineProperty(obj, "age", {value:"forever 18", enumerable:false});
Object.prototype.protoPer1 = function(){console.log("proto");};
Object.prototype.protoPer2 = 2;
console.log("For of : ");
for(var a of Object.entries(obj)) console.log(a);