javaScript遍历对象属性

liaorio 发布于2019-08-22 13:51 / 533人阅读

摘要：遍历对象的属性并没有像中遍历一个那么简单，主要原因有以下两点在中对象的属性分为可枚举与不可枚举之分他们是由属性的的值决定的。

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

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

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

根据这两点特性，我们可以分为 4 种情况来遍历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("
"));      //toString等
})()

GPU云服务器云服务器遍历json对象属性 javascript对象遍历属性遍历遍历java对象

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

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

JavaScript 中遍历对象的属性

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

Atom 2019-08-21 10:56 评论0 收藏0
JavaScript对象遍历

摘要：简单说就是一个有一个函数，这个函数执行的返回值一定是一个对象，对象有两个属性标记迭代是否结束，标记这次迭代的结果值。引言遍历对象是平常工作中很常见的一个操作，几乎是日常操作，但是遍历对象真的是一件很容易的事情么，显然不是的。常用的方式 for...in for (variable in object) {...} 这个是一个很常见的用法，相信每个人顺手都可以写出来。但是这里需要主...

Seay 2019-08-26 13:53 评论0 收藏0
JavaScript遍历对象和数组的方法总结

摘要：日常开发中我们难免需要对数组和对象进行遍历，今天抽空来总结下遍历数组和对象常用的方法。使用遍历对象注只能遍历出自身可枚举的属性，而不能遍历出原型链上面的属性。日常开发中我们难免需要对数组和对象进行遍历，今天抽空来总结下遍历数组和对象常用的方法。 Javascript遍历数组总结我们定义一个数组 var arr = [2,4,6]; 1.使用for循环遍历 var lengt...

jiekechoo 2019-08-23 12:55 评论0 收藏0
JavaScript 中的 for 循环

摘要：在中，引入了新的循环，即循环。而且，遍历数组元素的顺序可能是随机的。所以，鉴于以上种种缺陷，我们需要改进原先的循环。总结一下，循环有以下几个特征这是最简洁最直接的遍历数组元素的语法。在ECMAScript5（简称 ES5）中，有三种 for 循环，分别是：简单for循环 for-in forEach 在2015年6月份发布的ECMAScript6（简称 ES6）中，新增了一种循...

chengjianhua 2019-08-21 10:42 评论0 收藏0
JavaScript循环遍历你会用哪些？

摘要：总结中的循环遍历定义一个数组和对象经常用来遍历数组元素遍历值为数组元素索引用来遍历数组元素第一个参数为数组元素，第二个参数为数组元素索引，第三个参数为数组本身可选没有返回值用来遍历数组元素第一个参数为数组元素，第二个参数为数组元素索引，第三总结JavaScript中的循环遍历定义一个数组和对象 const arr = [a, b, c, d, e, f]; const obj = ...

CHENGKANG 2019-08-23 12:10 评论0 收藏0