js对象遍历

最新推荐文章于 2024-04-17 11:35:29 发布

转载最新推荐文章于 2024-04-17 11:35:29 发布 · 221 阅读

文章标签：

#js对象循环 #对象循环

js 专栏收录该内容

6 篇文章

订阅专栏

首先创建一个可操作的对象：

//首先在Object的prototype上添加属性，这样其他对象可以继承。
Object.prototype.userProp = 'userProp';
Object.prototype.getUserProp =function(){   
    return Object.prototype.userProp
};
var obj = {
    name: 'percy',
    age:21,
    [Symbol('symbol属性')]:'symbolProp',
    unEnumerable:'我是一个不可枚举属性',
    skills:['html','css','js'],
    getSkills: function(){
        return this.skills;
    }
}
//设置属性不可枚举
Object.defineProperty(obj,'unEnumerable',{
    enumerable:false
});

1：for- in循环
效果： 遍历自身和继承的可枚举属性但不包括symbol类型。
不要使用for-in 遍历数组，虽然可以遍历，但是如果Object.prototype存在可枚举属性，也会被遍历。

for (let key in obj){
    console.log('key:'+key+"--value:"+obj[key])    //获取属性的方式
}

2：Object.keys(obj)
**效果：**返回一个数组包括对象自身（不包括继承）的可枚举的属性（不包括Symbol类型属性）

var c =Object.keys(obj)
console.log(c)
console.log(obj[c[0]])   //读取属性值

3：Object.getOwnPropertyNames(obj)
**效果：**返回数组，不包含继承的属性和symbol类型的属性，但包含不可枚举的属性。

var d = Object.getOwnPropertyNames(obj)
console.log(d)
 for(let i = 0; i<d.length; i++){
     console.log(d[i]+"--------"+obj[d[i]])   //读取方式
 }

4：Object.getOwnPropertySymbols(obj)
**效果：**返回数组，仅含有自身的Symbol类型属性，（不包含继承）

5：Reflect.ownKeys(obj)
**效果：**返回数组，包含自身的所有属性（symbol与不可枚举），但不包含继承的属性

var c =Reflect.ownKeys(obj)
 console.log(c)

判断属性是否是属于自身的方式：

hasOwnProperty()

：例如

obj.hasOwnProperty('age')    //true
 obj.hasOwnProperty('userProp') //false

不过这种方式有时并不准确例如：

//下面这个新建的对象没有原型链
var obj2 = Object.create(null,{
    name:{value:'perty'},
    age:{value:12}
});

var c = obj2.hasOwnProperty('name')   //报错，hasOwnProperty() is not a function

解决办法：

var c=Object.prototype.hasOwnProperty.call(obj2,'name')
 console.log(c)    //true

参考文章：https://www.jqhtml.com/6588.html