JavaScript学习笔记:对象属性的枚举

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

JavaScript中对象的属性分为两种:数据属性访问器属性。然后根据具体的上下文环境的不同,又可以将属性分为:原型属性实例属性。原型属性是定义在对象的原型(prototype)中的属性,而实例属性一方面来自构造的函数中,然后就是构造函数实例化后添加的新属性。

在JavaScript中除了检测对象的属性是否存在,还会经常对对象的属性进行遍历(枚举)。而在JavaScript中遍历一个对象的属性并不太简单,主要有两个原因:

  • JavaScript中的对象通常都处在某个原型链中,它会从一个或多个的上层原型上继承一些属性
  • JavaScript中的属性不光有值,它还有一些除了值以外的其他特性,其中一个影响属性遍历的特性就是[[Enumerable]],如果该值为true,则这个属性是可枚举的,否则反之

这篇文章将总结有关于JavaScript中对象属性枚举的几种方法:

  • for ... in
  • Object.keys()
  • Object.getOwnPropertyNames()
  • for ... of

for ... in

for...in循环可以遍历对象中所有可枚举的对象属性(包括对象自有属性和继承的属性)。不过需要注意的是,使用for...in循环遍历对象属性时返回的属性会因为各个浏览器不同导致对象属性遍历的顺序有可能不是当初构建时的顺序。

var obj = {
    'x': 1,
    'y': 2,
    'z': 3
}
obj.propertyIsEnumerable('toString'); // false,不可枚举

for (prop in obj) {
    console.log(prop); // 输出x,y,z;但不会输出toString
}

其实for...in操作的主要目的就是遍历对象的属性,如果只需要获取对象的实例属性(跳过继承属性),可以使用hasOwnProperty()进行过滤:

for (prop in obj) {
    if (!obj.hasOwnProperty(prop)) continue; // 跳过继承属性
}

如此一来,可以这样来使用for...in循环遍历对象属性:

(function () {
    var getEnumPropertyNames = function (obj) {
        if (typeof obj !== 'object') throw TypeError(); // 参数必须是对象
        var props = []; /
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/how-do-i-enumerate-the-properties-of-a-javascript-object.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部