如何在html页面遍历对象,javascript如何遍历对象属性？

你的名字 2022-10-06 05:47 314阅读 0赞

javascript遍历对象的属性并没有像java中遍历一个Map那么简单，主要原因有以下两点:

1、在javascript中对象的属性分为可枚举与不可枚举之分,他们是由属性的 enumerable 的值决定的。可枚举性决定了这个属性是否可以被for-in遍历到。

2、javascript的对象一般都处于原型链中，它会从上层原型对象上继承一些属性。

![135b2e1431870dd87dcd5cbb6347a4c8.png][]

javascript遍历对象属性的方法如下：

1、遍历自身可枚举的属性 (可枚举，非继承属性) Object.keys() 方法

该方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中的属性名的排列顺序和使用for..in遍历该对象时返回的顺序一致(两者的区别是 for ..in还会枚举其原型链上的属性 )/\*\*Array 对象\*\*/

var arr = \['a','b','c'\];

console.log(Object.keys(arr));

// \['0','1','2'\]

/\*\*Object对象\*\*/

var obj = \{foo:'bar',baz:42\};

console.log(Object.keys(obj));

// \["foo","baz"\]

/\*\*类数组 对象 随机key排序\*\*/

var anObj =\{100:'a',2:'b',7:'c'\};

console.log(Object.keys);

//\['2','7','100'\]

/\*\*\*getFoo 是一个不可枚举的属性\*\*/

var my\_obj = Object.create(

\{\},

\{ getFoo : \{ value : function () \{ return this.foo \} \} \}

);

my\_obj.foo = 1;

console.log(Object.keys(my\_obj));

// \['foo'\]

2、遍历自身的所有属性(可枚举，不可枚举，非继承属性) 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"\]

3、遍历可枚举的自身属性和继承属性 (可枚举，可继承的属性) for in遍历对象的属性

var obj=\{

name：'张三',

age : '24',

getAge:function()\{

console.log(this.age);

\}

\}

var arry =\{\};

for(var i in obj)\{

if(obj.hasOwnProperty(i)&& typeOf obj\[i\] != 'function')\{

arry\[i\] = obj\[i\];

\}

\}

console.log(arry);

\{name:'张三',age:24\}

注: hasOwnProperty()方法判断对象是有某个属性(本身的属性，不是继承的属性)

4、遍历所有的自身属性和继承属性(function () \{

var getAllPropertyNames = function (obj) \{

var props = \[\];

do \{

props = props.concat(Object.getOwnPropertyNames(obj));

\} while (obj = Object.getPrototypeOf(obj));

return props;

\}

var propertys = getAllPropertyNames(window);

alert(propertys.length); //276

alert(propertys.join("\\n")); //toString等

\})()

[135b2e1431870dd87dcd5cbb6347a4c8.png]: /images/20221005/a10d2fd00c6340518daa95c3a18f840b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，314人围观）

还没有评论，来说两句吧...

相关阅读

相关遍历对象属性

问： var obj = \{ 名称：“西蒙”，年龄：“20”，服装：\{ 风格：“简单”，时髦：假 \} \} for(var propt in obj)\{ cons

心已赠人/ 2024年03月30日 15:48/ 0 赞/ 50 阅读

相关【JavaScript】对象的遍历

JavaScript——对象的遍历属性的可枚举性 for...of 对象的遍历 for...in Object.getOwn

灰太狼/ 2024年02月05日 14:13/ 0 赞/ 4 阅读

相关 js遍历对象(js遍历对象的所有属性)

![js遍历对象(js遍历对象的所有属性)\_js遍历对象(js遍历对象的所有属性)][js_js_js_js] js 遍历对象的3种方法第一种： for..

Love The Way You Lie/ 2023年09月26日 14:53/ 0 赞/ 27 阅读

相关如何在html页面遍历对象,javascript如何遍历对象属性？

javascript遍历对象的属性并没有像java中遍历一个Map那么简单，主要原因有以下两点: 1、在javascript中对象的属性分为可枚举与不可枚举之分,他们是由属性

你的名字/ 2022年10月06日 05:47/ 0 赞/ 315 阅读

相关如何用js遍历对象数组及对象属性

如何用js遍历对象数组及对象属性条件：在Vue中objectList:\[\] 接收的后台数据是一个对象数组，对其进行遍历，得到某个具体的对象 for(var

- 日理万妓/ 2022年04月05日 05:11/ 0 赞/ 221 阅读

相关 js 对象属性遍历

function 对象属性遍历()\{ var obj = \{x:1,y:2,c:3\}; for (var name in obj)\{ alert ( obj\

太过爱你忘了你带给我的痛/ 2021年12月22日 06:41/ 0 赞/ 276 阅读

相关数组遍历。对象遍历。字符串遍历

数组遍历 for for(var i=0;i<arr.length;i++)\{ ...... \} forEach arr.forEach(

墨蓝/ 2021年11月29日 13:48/ 0 赞/ 515 阅读

相关 javascript如何遍历对象和数组，遍历方法总结

1.遍历对象的方法 var obj = { 'a': 1, "b": 2 , 'c': 3 }; //方法一

矫情吗；*/ 2021年11月11日 10:56/ 0 赞/ 344 阅读

相关对象遍历（对象forEach遍历）

对象遍历（对象forEach遍历）对象遍历对象fon in 遍历对象keys 遍历对象

àì夳堔傛蜴生んèń/ 2021年10月06日 18:48/ 0 赞/ 526 阅读

相关 js中如何遍历对象属性

对象声明： 1、var obj = \{\}//字面量，建议这种方式(方便初始化赋值) 2、var obj = new Object(); 对象赋值： 1、obj.

水深无声/ 2021年07月27日 02:45/ 0 赞/ 448 阅读