本文发布于 2022-11-22， 最后更新于 1361 天前，其中的信息可能已经有所发展或是发生改变。
文章摘要
属性的遍历 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 遍历，只能遍历…
属性的遍历 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属性的遍历
ES6一共有7种方法可以遍历对象的属性
1. for…in
for...in循环遍历对象自身的和继承的可枚举属性（不含Symbol属性）
dart (Auto identified)
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);
}
text
// for...in
firstProp
secondProp
lastProp
2. Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不包含Symbol属性，但是包括不可枚举属性）的键名。
dns (Auto identified)
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]);
});
text
// Object.getOwnPropertyNames(obj)
['firstProp', 'secondProp', 'lastProp']
// keyName, obj[keyName]
firstProp 1
secondProp 2
lastProp true
3. Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有 Symbol 属性的键名。
dns (Auto identified)
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]);
});
text
// Object.getOwnPropertySymbols(obj)
[Symbol(length)]
// symbolName,obj[symbolName]
Symbol(length) 3
4. Reflect.ownKeys(obj)
Reflect.ownKeys返回一个数组，包含对象自身的所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。
dart (Auto identified)
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));
text
// Reflect.ownKeys(obj)
['firstProp', 'secondProp', 'lastProp', Symbol(length)]
5. Object.keys(obj)
Object.keys返回一个数组，包括对象自身的（不含继承）所有可枚举属性（不含Symbol属性）的键名
dart (Auto identified)
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);
text
// Object.keys
[ 'firstProp', 'secondProp', 'lastProp' ]
6. Object.values(obj)
Object.values(obj)返回对象属性值组成的数组
dart (Auto identified)
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);
text
// Object.values
['1', 2, true]
7. Object.entries(obj)
Object.entries(obj)返回对象键值对组成的数组
dns (Auto identified)
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);
}
css (Auto identified)
// 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
汇总
代码
dns (Auto identified)
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);
}
预期输出
stylus (Auto identified)
// 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
本文采用 CC BY-NC-SA 4.0 协议进行授权，如无注明均为原创，转载请注明出处。
标题：Javascript ES6遍历对象属性的方法作者：九仞之行链接：http://dev.styunlen.cn/archives/post-1525.html
还没有评论呢 ~ 快来抢沙发吧 🛋️