两种简洁又安全的JS遍历对象属性的写法
作者:admin 时间:2022-5-12 20:57:26 浏览:说到循环遍历，大家可能立即想到的是是for语法，但在某些情况下，for循环并不是最佳选择。今天，我将介绍两个，简洁又安全的，JS遍历对象属性的写法。
方法一：借助 hasOwnProperty
借助 hasOwnProperty 方法，可以轻松循环对象的属性，而不包括继承的属性。
写法
const object = { ... };
for (const key in object) {
if (object.hasOwnProperty(key)) {
// 找到属性
}
}代码解释
对于for语句，使用了in关键字。但是，我们也有一个 if 语句来检查hasOwnProperty，这是因为in关键字还包括继承的属性。为了过滤掉它们，我们需要if语句。
下面的例子演示了如何在遍历一个对象的所有属性时忽略掉继承属性。
let site = {
webkaka: '卡卡网'
};
for (let name in site) {
if (site.hasOwnProperty(name)) {
console.log('网站 (' +
name + ') 的名称是: ' + site[name]);
}
else {
console.log(name);
}
}输出
网站 (webkaka) 的名称是: 卡卡网
下面示例说明了in和hasOwnProperty的区别：
//构造函数是一个继承属性
//因此，这将返回 true
console.log('constructor' in window);
// 然而这将返回 false
console.log(window.hasOwnProperty(constructor));
如果需要检查继承的属性，则需要使用 in 运算符。
方法二：使用Object.keys组合forEach
对于更简单的解决方案，还可以使用Object.keys组合forEach：
Object.keys(object).forEach((key, index) => {
console.log(`key: ${key}, value: ${object[key]}, index: ${index}`);
});它有相当好的浏览器支持，在IE中支持到版本9。
JavaScript 的Array#forEach()函数允许你遍历数组，但不能遍历对象。但是，如果你使用 Object.keys(), Object.values(), 或 Object.entries()首先将对象转换为数组，则可以用forEach()来迭代 JavaScript 对象。
Object.keys()函数返回对象自身的可枚举属性的数组 ，然后，你可以使用forEach()迭代对象中的每个键。
const webkaka = {
name: '卡卡网',
url: 'www.webkaka.com'
};
//先输出：name 卡卡网
//再输出：url www.webkaka.com
Object.keys(webkaka).forEach(key => {
console.log(key, webkaka[key]);
});输出，有两行：
name 卡卡网
url www.webkaka.com
使用Object.values()
Object.values()函数返回对象自身的可枚举属性值的数组。换句话说，它返回一个包含对象值的数组，你可以使用forEach()迭代对象中的每个键值。
const webkaka = {
name: '卡卡网',
url: 'www.webkaka.com'
};
//先输出：卡卡网
//再输出：www.webkaka.com
Object.values(webkaka).forEach(val => {
console.log(val);
});输出，有两行：
卡卡网
www.webkaka.com
使用Object.entries()
Object.entries()函数返回一个条目数组。条目是长度为 2 的数组，其中entry[0]是键，entry[1]是值。你可以同时遍历键和值：
const webkaka = {
name: '卡卡网',
url: 'www.webkaka.com'
};
//先输出：name 卡卡网
//再输出：url www.webkaka.com
Object.entries(webkaka).forEach(entry => {
const [key, value] = entry;
console.log(key, value);
});输出，有两行：
name 卡卡网
url www.webkaka.com
总结
本文介绍了两种简洁又安全的JS遍历对象属性的写法。在本文中，我们了解了in和hasOwnProperty的区别，同时了解了Object.keys()和forEach()的使用。
相关文章
- 站长推荐
