《你不知道的Javascript》感悟篇—对象属性遍历的那些事

划重点

本篇笔者将重点介绍JavaScript中 getOwnPropertyNames 、Object.keys、for ... in 的使用及他们之间的异同点。

getOwnPropertyNames

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

那么啥叫自身属性呢？请看下面代码段：

var obj = {
    a: '1',
    b: '2'
}
var newObj=Object.create(obj) // 创建 newObj ，原型指向 obj

newObj.c="3"; // 向 newObj 添加属性 c

以上代码段中，newObj 的自身属性只有一个 c，具有2个原型属性 a 和 b。下面贴上该代码在 Chrome 控制台中的结构。

了解了 自身属性 和原型属性后，我们接着看啥叫 不可枚举属性呢？请看下面代码段：

var obj = {
    a: '1',
    b: '2'
}

var newObj=Object.create(obj) // 创建 newObj ，原型指向 obj

newObj.c="3"; // 向 newObj 添加属性 c

// 使用 属性描述API为 newObj 添加属性 d，其值为 d， 不可被枚举
Object.defineProperty(newObj, 'd', {
    value: "d",
    enumerable: false //不可被枚举
})

笔者使用ES5的 defineProperty 为newObj添加了一个新属性，并用属性描述符做了一些限制，enumerable 标记该属性不能被枚举。

弄清楚 自身属性、原型属性、不可枚举 这些概念后我们开始验证 getOwnPropertyNames。

如上图使用 getOwnPropertyNames，正确获取到 c 和 d 2个属性。

for...in

for...in 语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。

划重点：for...in 可以遍历 自身可枚举属性、原型上的可枚举属性。还是上面的那段代码，我们在 Chrome 控制台中验证结果。

实验结果中我们正确得到了 自身属性c、原型属性 a 和 b，并且输出是无序的。这里你可能会问，newObj 的原型是 obj，那么 obj 的原型又是 基本包装类型object，为啥 object的属性（如 toString）没有被输出？  那是因为js中基本包装类型的原型属性是不可枚举的，如Object, Array, Number等。

Object.keys

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

划重点：Object.keys() 可以遍历 自身可枚举属性，这些属性返回顺序无序。还是上面的那段代码，我们在 Chrome 控制台中验证结果。

同样的代码 我们只获取到了 自身属性 c。

总结

本文原文地址：https://www.limitcode.com/detail/5d5fe62a10dcbf0b1852b307.html