js如何遍历对象的属性

周万宁.FoBJ

已于 2022-09-23 16:51:23 修改

阅读量731

点赞数 2

文章标签： javascript 前端开发语言

于 2022-09-23 16:51:02 首次发布

本文链接：https://blog.youkuaiyun.com/Angel_Tears_/article/details/127014003

版权

了解如何遍历对象属性之前,先知道什么可枚举属性与不可枚举属性

在JavaScript中,对象的属性由可枚举和不可枚举之分,它是由对象属性描述符enumerable决定的,如果该属性是可枚举的那么这个属性就能被for...in遍历到

对象属性描述符

在JavaScript中可以通过Object.defineProperty()来为对象设置属性描述符

从ES5开始,添加对象属性描述符的支持,现在JavaScript中支持6中属性描述符:

configurable:设置为true时,该属性的藐视符才能够被改变,同时该属性也能从对应的对象上被删除

enumerable:设置为true时,该属性才会出现在对象的枚举属性中

value:该属性对应的值可以时任何有效的JavaScript值(数值,对象,函数等),默认值undefined

writable:设置为true时,value才能被赋值运算符改变

get:属性的getter函数,当访问该属性时,才会调用此函数,执行时不传入任何参数,但是会传入this对象,该函数的返回值会被用作属性的值,默认值是undefined

set:属性的setter函数,当属性值被修改是,会调用此函数,该方法接受一个参数(也就是被赋予的新值),会传入赋值时的this对象,默认值undefined

Object.defineProperty(obj,prop,descriptor)

通过object.defineProperty()定义的属性,enumerable,configurable,writable这几个值默认为false

直接为对象动态添加属性

let dog ={name:'大黄'} 
Object.defineProperty(dog, "sound", {
     enumerable: false, 
    configurable: false, 
    writable: false, 
    value: "wof" 
});
    //对象动态添加属性 
 dog.age=2

哪些是可枚举属性

enumerable:true的属性即为可枚举睡醒

基本包装类型的原型属性都是不可枚举的,如Object, Array,Number等

直观看到可枚举属性

谷歌浏览器控制台课查看对象属性,深色的属性就是可枚举属性,浅色的属性就是不可枚举属性

遍历属性的方法

1.遍历自身课枚举的属性(可枚举,非继承属性)Object.key()方法

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

2.遍历自身的所有属性(可枚举,不可枚举,非继承属性)Object.getOwnPropertyNames()方法

该方法返回一个由指定对象的所有自身属性组成的数组(包括不可枚举属性,但不包括Symbol值作为名称的属性)

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

for(var i in obj){
    if(obj.hasOwnProperty(i)&& typeOf obj[i] != 'function'){
         arry[i] = obj[i];
 } 
}

注: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 等 
})()