对象属性 Object.getOwnPropertyNames() Object.keys for...in

Posted 2021-12-07 caozhuzi

1.Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组。

Object.getOwnPropertyNames(obj)

参数obj是一个对象，其自身的可枚举和不可枚举属性的名称被返回。

返回值是：在给定对象上找到的自身属性对应的字符串数组。

实例：

var arr = ["a", "b", "c"];
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"]

// 使用Array.forEach输出属性名和属性值
Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) {
　　console.log(val + " -> " + obj[val]);
});
// 输出
// 0 -> a
// 1 -> b
// 2 -> c

//不可枚举属性
var my_obj = Object.create({}, {
　　getFoo: {
　　　　value: function() { return this.foo; },
　　　　enumerable: false
　　}
});
my_obj.foo = 1;
console.log(Object.getOwnPropertyNames(my_obj).sort()); // ["foo", "getFoo"]

2.Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。

Object.keys(obj)

参数obj是：要返回其枚举自身属性的对象。

返回值是一个表示给定对象的所有可枚举属性的字符串数组。

实例：

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 anObj = { 100: ‘a‘, 2: ‘b‘, 7: ‘c‘ };
console.log(Object.keys(anObj)); // console: [‘2‘, ‘7‘, ‘100‘]

//不可枚举属性
var myObj = Object.create({}, {
　　getFoo: {
　　　　value: function () { return this.foo; }
　　}
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: [‘foo‘]

注意：在ES5里，如果此方法的参数不是对象（而是一个原始值），那么它会抛出 TypeError。在ES2015中，非对象的参数将被强制转换为一个对象。

 

3.for...in语句以任意顺序遍历一个对象自有的、继承的、可枚举的、非Symbol的属性。对于每个不同的属性，语句都会被执行。

for (variable in object) {...}

参数variable：在每次迭代时，将不同的属性名分配给变量。

参数object：被迭代枚举其属性的对象。

实例：

 

var obj = {a:1, b:2, c:3};
for (var prop in obj) {
　　console.log("obj." + prop + " = " + obj[prop]);
}
// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

 

下面的函数说明了hasOwnProperty()的用法：继承的属性不显示。
var triangle = {a: 1, b: 2, c: 3};

 

function ColoredTriangle() {
　　this.color = ‘red‘;
}

 

ColoredTriangle.prototype = triangle;

 

var obj = new ColoredTriangle();

 

for (var prop in obj) {
　　if (obj.hasOwnProperty(prop)) {
　　　　console.log(`obj.${prop} = ${obj[prop]}`);
　　}
}

 

// Output:
// "obj.color = red"

 

提示：for...in不应该用于迭代一个 Array，其中索引顺序很重要
因为迭代的顺序是依赖于执行环境的，所以数组遍历不一定按次序访问元素。因此当迭代访问顺序很重要的数组时，最好用整数索引去进行for循环（或者使用 Array.prototype.forEach() 或 for...of 循环）。