ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

js遍历对象

js遍历对象

js遍历对象

JavaScript 对象是由键值对组成的集合,遍历对象即逐个访问这些键值对。

常见的遍历方法包括 for...in 循环、Object.keys()、Object.values() 和 Object.entries()。

在jquery中还经常使用$.each(obj, function(idx, itm){});来进行遍历。

以下就列出常见的遍历方式:

1. for...in

let obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {console.log(key, obj[key]);
}

2. Object.keys(), Object.values(), Object.entries()

let obj = { a: 1, b: 2, c: 3 };
for (let key of Object.keys(obj)) {console.log(key);
}
for (let value of Object.values(obj)) {console.log(value);
}
for (let [key, value] of Object.entries(obj)) {console.log(key, value);
}

2.1 Object.keys()

let obj = { a: 1, b: 2, c: 3 };
for (let key of Object.keys(obj)) {console.log(key);
}

2.2 Object.values()

let obj = { a: 1, b: 2, c: 3 };
for (let value of Object.values(obj)) {console.log(value);
}

2.3 Object.entries()

let obj = { a: 1, b: 2, c: 3 };
for (let [key, value] of Object.entries(obj)) {console.log(key, value);
}

3. es6中新增的Lambda(箭头)函数

let obj = { a: 1, b: 2, c: 3 };
Object.entries(obj).forEach(([key, value]) => {console.log(key, value);
});

4. $.each

let obj = { a: 1, b: 2, c: 3 };
$.each(obj, function(key, value){console.log(key, value);});

遍历时候的注意事项

循环会遍历对象的所有可枚举属性,包括原型链上的属性。为了避免不必要的干扰,可以使用 hasOwnProperty 方法进行检查。

let obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {if (obj.hasOwnProperty(key)) {console.log(key, obj[key]);}
}

另外,在处理大型对象时,性能优化至关重要。

如使用Object.keys()、Object.values() 和 Object.entries()等方法,在创建数组时会有一定的性能开销,因此在性能敏感的场景下,for...in 循环结合 hasOwnProperty 可能是更好的选择。

再有,在某些情况下,可以通过优化逻辑避免不必要的遍历。
例如,如果只需要查找某个特定属性,可以直接使用 in 操作符或 Object.hasOwnProperty() 方法。

let obj = { a: 1, b: 2, c: 3 };
if ('a' in obj) {console.log('Property "a" exists');
}

 

返回列表