前端每日一学：JS里得遍历对象讲解 |
您所在的位置：网站首页 › vue中遍历对象 › 前端每日一学：JS里得遍历对象讲解 |
|
javascript遍历对象的属性并没有像java中遍历一个Map那么简单，主要原因有以下两点: 1、在javascript中对象的属性分为可枚举与不可枚举之分,他们是由属性的 enumerable 的值决定的。可枚举性决定了这个属性是否可以被for-in遍历到。 2、javascript的对象一般都处于原型链中，它会从上层原型对象上继承一些属性。 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等 })() |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |