Javascript ES6遍历对象属性的方法
本文发布于66天前,最后更新于 54 天前,其中的信息可能已经有所发展或是发生改变。

属性的遍历

ES6一共有7种方法可以遍历对象的属性

1. for…in

for…in循环遍历对象自身的和继承的可枚举属性(不含Symbol属性)

const obj = {
  firstProp: '1',
  secondProp: 2,
  lastProp: true,
};
const len = Symbol('length');
obj[len] = 3;
// for-in  遍历,只能遍历对象
// eslint-disable-next-line no-restricted-syntax
console.log('// for...in')
for (const item in obj) {
  console.log(item);
}
// for...in
firstProp
secondProp
lastProp

2. Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不包含Symbol属性,但是包括不可枚举属性)的键名。

const obj = {
  firstProp: '1',
  secondProp: 2,
  lastProp: true,
};
const len = Symbol('length');
obj[len] = 3;
console.log('// Object.getOwnPropertyNames(obj)');
console.log(Object.getOwnPropertyNames(obj))
console.log('// keyName, obj[keyName]');
Object.getOwnPropertyNames(obj).forEach(function(keyName){
    console.log(keyName, obj[keyName]);
});
// Object.getOwnPropertyNames(obj)
['firstProp', 'secondProp', 'lastProp']
// keyName, obj[keyName]
firstProp 1
secondProp 2
lastProp true

3. Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一个数组,包含对象自身的所有 Symbol 属性的键名。

const obj = {
  firstProp: '1',
  secondProp: 2,
  lastProp: true,
};
const len = Symbol('length');
obj[len] = 3;
console.log('// Object.getOwnPropertySymbols(obj)');
console.log(Object.getOwnPropertySymbols(obj))
console.log('// symbolName, obj[symbolName]');
Object.getOwnPropertySymbols(obj).forEach(function(symbolName){
    console.log(symbolName, obj[symbolName]);
});
// Object.getOwnPropertySymbols(obj)
[Symbol(length)]
// symbolName,obj[symbolName]
Symbol(length) 3

4. Reflect.ownKeys(obj)

Reflect.ownKeys返回一个数组,包含对象自身的所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举。

const obj = {
 firstProp: '1',
 secondProp: 2,
 lastProp: true,
};
const len = Symbol('length');
obj[len] = 3;
console.log('// Reflect.ownKeys(obj)')
console.log(Reflect.ownKeys(obj));
// Reflect.ownKeys(obj)
['firstProp', 'secondProp', 'lastProp', Symbol(length)]

5. Object.keys(obj)

Object.keys返回一个数组,包括对象自身的(不含继承)所有可枚举属性(不含Symbol属性)的键名

const obj = {
  firstProp: '1',
  secondProp: 2,
  lastProp: true,
};
const len = Symbol('length');
obj[len] = 3;
const keys = Object.keys(obj);
console.log('// Object.keys');
console.log(keys);
// Object.keys
[ 'firstProp', 'secondProp', 'lastProp' ]

6. Object.values(obj)

Object.values(obj)返回对象属性值组成的数组

const obj = {
firstProp: '1',
secondProp: 2,
lastProp: true,
};
const len = Symbol('length');
obj[len] = 3;
const values= Object.values(obj);
console.log('// Object.values');
console.log(values);
// Object.values
['1', 2, true]

7. Object.entries(obj)

Object.entries(obj)返回对象键值对组成的数组

const obj = {
firstProp: '1',
secondProp: 2,
lastProp: true,
};
const len = Symbol('length');
obj[len] = 3;
const entries= Object.entries(obj);
console.log('// Object.entries');
console.log(entries);
console.log('// foreach output Object.entries');
entries.forEach(function(entry){
    console.log(entry);
})
console.log('// for...of output Object.entries');
for (const [key, value] of entries) {
  console.log(key, value);
}
// Object.entries
[ [ 'firstProp', '1' ], [ 'secondProp', 2 ], [ 'lastProp', true ] ]
// foreach output Object.entries
[ 'firstProp', '1' ]
[ 'secondProp', 2 ]
[ 'lastProp', true ]
// for...of output Object.entries
firstProp 1
secondProp 2
lastProp true

汇总

代码

const obj = {
    firstProp: '1',
    secondProp: 2,
    lastProp: true,
};
const len = Symbol('length');
obj[len] = 3;
// for-in  遍历,只能遍历对象
// eslint-disable-next-line no-restricted-syntax
console.log('// for...in')
for (const item in obj) {
    console.log(item);
}
console.log('// Object.getOwnPropertyNames(obj)');
console.log(Object.getOwnPropertyNames(obj))
console.log('// keyName, obj[keyName]');
Object.getOwnPropertyNames(obj).forEach(function (keyName) {
    console.log(keyName, obj[keyName]);
});
console.log('// Object.getOwnPropertySymbols(obj)');
console.log(Object.getOwnPropertySymbols(obj))
console.log('// symbolName, obj[symbolName]');
Object.getOwnPropertySymbols(obj).forEach(function (symbolName) {
    console.log(symbolName, obj[symbolName]);
});
console.log('// Reflect.ownKeys(obj)')
console.log(Reflect.ownKeys(obj));
const keys = Object.keys(obj);
console.log('// Object.keys');
console.log(keys);
const values = Object.values(obj);
console.log('// Object.values');
console.log(values);
const entries = Object.entries(obj);
console.log('// Object.entries');
console.log(entries);
console.log('// foreach output Object.entries');
entries.forEach(function (entry) {
    console.log(entry);
})
console.log('// for...of output Object.entries');
for (const [key, value] of entries) {
    console.log(key, value);
}

预期输出

// for...in
firstProp
secondProp
lastProp
// Object.getOwnPropertyNames(obj)
[ 'firstProp', 'secondProp', 'lastProp' ]
// keyName, obj[keyName]
firstProp 1
secondProp 2
lastProp true
// Object.getOwnPropertySymbols(obj)
[ Symbol(length) ]
// symbolName, obj[symbolName]
Symbol(length) 3
// Reflect.ownKeys(obj)
[ 'firstProp', 'secondProp', 'lastProp', Symbol(length) ]
// Object.keys
[ 'firstProp', 'secondProp', 'lastProp' ]
// Object.values
[ '1', 2, true ]
// Object.entries
[ [ 'firstProp', '1' ], [ 'secondProp', 2 ], [ 'lastProp', true ] ]
// foreach output Object.entries
[ 'firstProp', '1' ]
[ 'secondProp', 2 ]
[ 'lastProp', true ]
// for...of output Object.entries
firstProp 1
secondProp 2
lastProp true
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
Source: https://github.com/zhaoolee/ChineseBQB
Source: https://github.com/zhaoolee/ChineseBQB
Source: https://github.com/zhaoolee/ChineseBQB
颜文字
Emoji
小恐龙
花!
滑稽大佬
演奏
程序员专属
上一篇
下一篇