JavaScript中对象的枚举/遍历（enumeration）

Amio 发布于2019-08-22 17:02 / 3138人阅读

摘要：附如果你想获取一个对象的所有属性甚至包括不可枚举的即可见下面一种方法方法返回一个由指定对象的所有自身属性的属性名包括不可枚举属性但不包括值作为名称的属性组成的数组。

JavaScript中遍历获取对象属性和方法主要有三种： Object.keys()、Object.getOwnPropertyNames()、for...in... 一、Object.keys()、Object.getOwnPropertyNames()、for...in...区别

for...in ...会输出自身以及原型链上可枚举的属性

Object.keys可以用来获取对象自身可枚举的属性键

Object.getOwnPropertyNames可以用来获取对象自身的全部属性名

二、Object.keys()、Object.getOwnPropertyNames()、for...in...实际应用

1、for...in...（通过属性个数来确定循环圈数，想要遍历谁就in谁）

hasOwnPrototype()：判断属性是否是自身的属性，返回值是Boolean类型的true和false，对于继承的属性返回的是false（过滤）

propertyIsEnumerable():是hasOwnProperty()的增强版,只有检测到是只有属性且这个属性的可枚举为true时它才返回true

in：只能判断对象是否能访问到该元素，继承过来的属性也能够访问

instanceof：可以用来判断某个构造函数的prototype属性是否存在于另外一个要检测对象的原型链上

如：A instanceof B
      A对象是不是B构造函数构造出来的，看A对象的原型链上有没有B的原型

2、Object.keys() 方法（返回一个所有元素字符串类型的数组）
会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致（两者的主要区别是一个 for-in 循环还会枚举其原型链上的属性）。

// simple array
var arr = ["a", "b", "c"];
console.log(Object.keys(arr)); // console: ["0", "1", "2"]

// array like object
var obj = { 0: "a", 1: "b", 2: "c" };
console.log(Object.keys(obj)); // console: ["0", "1", "2"]

// array like object with random key ordering
var anObj = { 100: "a", 2: "b", 7: "c" };
console.log(Object.keys(anObj)); // console: ["2", "7", "100"]

// getFoo is a property which isn"t enumerable
var myObj = Object.create({}, {
  getFoo: {
    value: function () { return this.foo; }
  } 
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ["foo"]

附：如果你想获取一个对象的所有属性,甚至包括不可枚举的,即可见下面一种方法

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

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"]

附：Object.keys或用for...in循环使用时可通过hasOwnProperty()方法过滤掉获取到原型链上的可枚举属性，实现和Object.getOwnPropertyNames()方法同样的效果

三、区别数组和对象的方法

constructor、instanceof、call.tostring

超融合服务器私有云 javascript对象遍历 Enumerable对象 java中枚举的用法 js遍历对象的数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94786.html

JavaScript 中遍历对象的属性

摘要：所以说遍历属性时，要考虑这两个因素。开始遍历先定义两个类吧和，后者继承前者。然后再声明并初始化一个的实例。原文链接 JavaScript 中遍历对象的属性参考 JavaScript中的属性:如何遍历属性《JavaScript 高级程序设计》概述遍历 JavaScript 对象中的属性没有其他语言那么简单，因为两个因素会影响属性的遍历：对象属性的属性描述符 (property ...

Atom 2019-08-21 10:56 评论0 收藏0
关于JavaScript对象，你所不知道的事（二）- 再说属性

摘要：但好在还给我们提供了一个方法，每一个对象都有这样一个方法，专门用来判断某个属性是否是该对象的私有属性。如果你想要用对象字面形式，你只能在创建对象时定义访问器属性。在中，我们使用冻结一个对象，并且使用来判断一个对象是否被冻结。说完了对象那些不常用的冷知识，是时候来看看JavaScript中对象属性有哪些有意思的东西了。不出你所料，对象属性自然也有其相应的特征属性，但是这个话题有点复杂...

Richard_Gao 2019-08-21 17:49 评论0 收藏0
javaScript遍历对象属性

摘要：遍历对象的属性并没有像中遍历一个那么简单，主要原因有以下两点在中对象的属性分为可枚举与不可枚举之分他们是由属性的的值决定的。 javascript遍历对象的属性并没有像java中遍历一个Map那么简单，主要原因有以下两点: 在javascript中对象的属性分为可枚举与不可枚举之分,他们是由属性的 enumerable 的值决定的。可枚举性决定了这个属性是否可以被 for-in ...

liaorio 2019-08-22 13:51 评论0 收藏0
JavaScript-面向对象、Object类型

摘要：面向对象面向对象编程的全称为简称。面向对象编程是用抽象方式创建基于现实世界模型的一种编程方式。面向对象编程可以看做是使用一系列对象相互协作的软件设计。面向对象编程的三个主要特征是封装继承多态。面向对象面向对象编程的全称为Object Oriented Programming,简称OOP。面向对象编程是用抽象方式创建基于现实世界模型的一种编程方式。面向对象编程可以看做是使用一系列对象...

amuqiao 2019-08-26 12:11 评论0 收藏0
ES6入门之对象的扩展

摘要：属性的简洁表示法在中允许直接写入变量和函数，作为对象的属性和方法，使得代码的书写更为简洁。循环遍历对象自身的和继承的可枚举属性不含属性。返回一个数组，包含对象自身的所有属性的键名。 showImg(https://segmentfault.com/img/remote/1460000019259004?w=1282&h=1920); 1. 属性的简洁表示法在ES6中允许直接写入变量...

AWang 2019-08-26 13:53 评论0 收藏0