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

原创 2017年01月03日 17:44:00

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 = []; // 将要返回的数组
        for (var prop in obj) { // 遍历所有可枚举的属性
            if (obj.hasOwnProperty(prop)) { //判断是否是自有属性
                props.push(prop); //将属性名添加到数组中
            }
        }
        return props; //返回这个数组
    }

    // 实例化
    var obj = {
       'x': 1,
       'y':2
    }
    obj.propertyIsEnumerable('toString')
    var propertys = getEnumPropertyNames(obj);
    console.log(propertys.length);       //2
    console.log(propertys.join(","));   //x,y
})()

Object.keys()

Object.keys() 方法会返回一个由给定对象的所有可枚举自身属性的属性名组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致。两者最大的区别在于 for...in 还会遍历出一个对象从其原型链上继承到的可枚举属性

Object.keys() 返回一个所有元素为字符串的数组,其元素来自于从给定的对象上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致。

var obj = {
    'x': 1,
    'y': 2,
    'z': 3
}
obj.propertyIsEnumerable('toString');

console.log(Object.keys(obj)); // ["x", "y", "z"]

Object.keys() 可以遍历对象可枚举的自身属性。也就是说对象的属性不是从原型链上继承下来的。

注意:在 ES5 环境,如果传入的参数不是一个对象,而是一个字符串,那么它会报 TypeError。在 ES6 环境,如果传入的是一个非对象参数,内部会对参数作一次强制对象转换,如果转换不成功会抛出 TypeError。

// 在 ES5 环境
Object.keys('foo'); // TypeError: "foo" is not an object

// 在 ES6 环境
Object.keys('foo'); // ["0", "1", "2"]

// 传入 null 对象
Object.keys(null); // Uncaught TypeError: Cannot convert undefined or null to object

// 传入 undefined
Object.keys(undefined); // Uncaught TypeError: Cannot convert undefined or null to object

Object.getOwnPropertyNames()

Object.getOwnPropertyNames() 方法返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性)组成的数组,但不会获取原型链上的属性。该数组对元素是 obj 自身拥有的枚举或不可枚举属性名称字符串。 数组中枚举属性的顺序与通过 for...in (或 Object.keys() )迭代该对象属性时一致。 数组中不可枚举属性的顺序未定义。

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

for...of

for...of 为ES6新增的方法,主要来遍历可迭代的对象(包括 Array , Map , Set , arguments 等),它主要用来获取对象的属性值,而 for...in 主要获取对象的属性名。

var colors = ['red', 'green', 'blue'];
colors.length = 5;
colors.push('yellow');

for (var i in colors) {
  console.log(colors[i]); // red green blue yellow
}

for (var j of colors) {
  console.log(j); // red green blue undefined undefined yellow
}

可以看到使用 for...of 可以输出包括数组中不存在的值在内的所有值。

其实除了使用 for...of 直接获取属性值外,我们也可以利用 Array.prototype.forEach() 来达到同样的目的。

var colors = ['red', 'green', 'blue'];
colors.foo = 'hello';

Object.keys(colors).forEach(function(elem, index) {
  console.log(colors[elem]); // red green blue hello
  console.log(colors[index]); // red green blue undefined
});

colors.forEach(function(elem, index) {
  console.log(elem); // red green blue
  console.log(index); // 0 1 2
})

总结一下

其实这几个方法之间的差异主要在属性是否可可枚举,是来自己原型,还是实例。

方法 适用范围 描述
for...in 数组、对象 获取可枚举的实例和原型属性名
Object.keys() 数组,对象 返回可枚举的实例属性名组成的数组
Object.getPropertyNames() 数组、对象 返回除原型属性以外的所有属性(包括不可枚举的属性)名组成的数组
for...of 可迭代对象( Array , Map , Set , arguments 等) 返回属性值
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

可枚举属性和不可枚举属性

在js中,对象的属性分为可枚举和不可枚举,它们是由属性的enumerable值决定的,不可枚举属性,用for...in是遍历不到的,js中基本包装类型的原型属性是不可枚举的,但是非基本包装类型的原型属...

javascript 的枚举

为了提升javascript 代码的可读性,jiasha var TestEnum = {}; TestEnum.FIRST  =1; TestEnum.SECOND =2; cons...

创建对象的几种方式

/*一、工厂模式*/ /*工厂模式解决了创建相似对象的问题,但却没有解决对象识别的问题(怎样知道一个对象的类型)*/ function createPerson(name,age,j...

JS 对象属性"可枚举"

对象属性可枚举,表示该属性的值不可修改,可认为该属性是常量。 如何定义不可枚举的属性? var obj = {name: 'jack', age:23} Object.definePro...

前端复习--对象的可枚举属性

初学时,并不是很注意这些细节的东西,但是程序员写代码的时候,怎么会容忍胡而麻三的记忆. 1 for in 语句的复习--问题引出 var triangle = {a:1, b:2, c:3}; fu...

【js学习笔记-053】js中的面向对象技术------枚举类型

枚举类型是一种类型,它是值的有限集合,如果值定义为这个类型则该值是可以列出(或称可枚举)的。在C语言中,枚举类型是通过关键字enum声明的。Enum是ECMAScript5的保留字,很有可能js就会内...

java中的对象和枚举

对象是行为(java中的方法实现)和属性(java中成员变量)的组合。属性和对象本身有着相同的声明周期,在任何给定的时间点,对象有着特定的状态,状态是类的全部实例变量所组合而成的快照,因为这个原因,实...

《Javascript权威指南》学习笔记之八:静态成员、静态类、枚举、重载和覆盖

一、创建静态成员

从零开始学_JavaScript_系列(40)——对象的扩展(3)当枚举、原型链遇见对属性的操作

一句话总结:1、当属性在原型链上,或者不可枚举时,会被很多方法忽视(参照6.1);2、__proto__和prototype的关系(参照7.1);3、Object.setPrototypeOf(obj...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)