javascript对象的属性遍历

随着ES6的不断完善,javascript对对象的属性遍历的方式也逐渐增多。

下面我们来学习几种遍历的方式:

  • for in
  • Object.keys
  • Object.getOwnPropertyNames
  • Object.getOwnPropertySymbols
  • Reflect.ownKeys

我大致列了5种方式,接下来我们开始学习:

首先我们需要定义一个被测试的对象

// 声明2个Symbol值(Symbol值表示唯一的值,具体看ES6相关的文档)
let bankCardAccount = Symbol('bankCardAccount');
let bankCardPassword = Symbol('bankCardPassword');

// 实现一个对象
let obj = Object.assign({}, {
    name: 'eason',
    sex: 'male',
    birthday: '1.29',
    [bankCardAccount]: '62212341234',
});

// 设置sex为不可写/不可枚举(其实只要设置为不可枚举就行了,我们只测这一项)
Object.defineProperty(obj, 'sex', {
    writable: false, // 不可写
    enumerable: false, // 不可枚举
})

// 在其原型对象中添加属性
Object.setPrototypeOf(obj, {
    address: 'Shanghai,China',
    parent: {
        father: 'father',
        mother: 'mother',
    },
    [bankCardPassword]: '123456',
});

该对象的大致结构为:

obj => {
    name => 'eason'
    sex => 'male' // writable = false, enumerable = false 不可写/不可枚举
    birthday => '1.29'
    Symbol[bankCardAccount] => '62212341234'
    __proto__ => {
        address => 'Shanghai,China'
        parent => {
            father => 'father'
            mother => 'mother'
        }
        Symbol[bankCardPassword] => '123456'
        __proto__ => ...
    }
}

OK,有了被测试的对象,接下来我们可以开始写代码了

for in

for (let i in obj) {
    console.log(i)
}

打印结果为:

name, birthday, address, parent

根据结果我们分析为:

  1. 能取到对象本身以及原型对象中可枚举的属性
  2. 取不到Symbol属性

Object.keys

Object.keys(obj).forEach(res => {
    console.log(res)
})

打印结果为:

name, birthday

根据结果我们分析为:

  1. 只能取到对象本身可枚举的属性
  2. 不包括Symbol属性
  3. 也不包括原型中的属性

Object.getOwnPropertyNames

Object.getOwnPropertyNames(obj).forEach(res => {
    console.log(res)
})

打印结果为:

name, sex, birthday

根据结果我们分析为:

  1. 同样也只能取到对象本身的属性
  2. 包括对象本身的不可枚举属性
  3. 不包括Symbol属性

Object.getOwnPropertySymbols

这个属性我们应该看完前一个例子后就明白了

Object.getOwnPropertySymbols(obj).forEach(res => {
    console.log(res)
})

// 同时测试一下如果Symbol属性为不可枚举时会怎样

// 设置bankCardAccount为不可写/不可枚举
Object.defineProperty(obj, bankCardAccount, {
    writable: false, // 不可写
    enumerable: false, // 不可枚举
})

// 检查一下是否为不可枚举(正常情况下会返回false,说明为不可枚举)
console.log(Object.getOwnPropertyDescriptor(obj, bankCardAccount).writable) 

打印结果为:

Symbol(bankCardAccount)

根据结果我们分析为:

  1. 只能取到对象本身的Symbol属性
  2. 同样不可枚举时也能获取到
  3. 不包括原型对象中的Symbol属性

Reflect.ownKeys

Reflect.ownKeys(obj).forEach(res => {
    console.log(res)
})

打印结果为:

name, sex, birthday, Symbol(bankCardAccount)

根据结果我们分析为:

  1. 能取到对象本身的所有属性
  2. 包括不可枚举的属性
  3. 包括Symbol属性
  4. 不包括原型对象中的属性

好了,大致情况就是以上这样,我也是现学现卖的
如果有错误请指点,谢谢_

    原文作者:邪恶的罐子
    原文地址: https://www.jianshu.com/p/cd60ece4adce
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞