当前位置：网站首页 > IT技术 > 正文

for...in 循环的坑，别再用它遍历 JavaScript 数组了!

wptr33 2025-07-21 18:18 10 浏览

在JavaScript开发中，for...in循环是一个常见的语法结构，但它在遍历数组时存在很多潜在问题。这些问题如果不加以注意，可能导致意想不到的bug和性能问题。

for…in 循环的本质

for...in循环是设计用来遍历对象属性的，而不是专门为数组设计的。它会遍历对象的所有可枚举属性，包括：

数组索引
自定义属性
原型链上的属性

主要问题

1. 遍历顺序不保证

for...in不保证按特定顺序遍历数组元素，这与数组的本质（有序集合）相悖：

const arr = [10, 20, 30];
for (let i in arr) {
console.log(i, arr[i]); // 输出顺序可能不是0,1,2
}

2. 遍历非元素属性

如果你给数组添加了自定义属性，for...in也会遍历这些属性：

const arr = [10, 20, 30];
arr.customProp = "hello";

for (let i in arr) {
console.log(i, arr[i]); // 会输出 "customProp" "hello"
}

3. 原型污染问题

如果修改了Array.prototype，for...in会遍历这些新增的属性：

更好的替代方案

1. for循环

最传统也最可靠的方式：

2. for…of循环

ES6引入的专门用于遍历可迭代对象的语法：

3. forEach方法

数组内置的遍历方法：

4. map, filter, reduce等

根据具体需求选择更专业的数组方法：

什么时候可以使用for…in？

for...in在遍历普通对象属性时非常有用：

const person = {name: "张三", age: 30, job: "开发者"};
for (const key in person) {
console.log(key, person[key]);
}

php for循环

上一篇：VBA代码实例之For循环嵌套的魅力（vba for条件循环嵌套）
下一篇：Shell脚本小白教程 for循环（shell编程之for循环）

for...in 循环的坑，别再用它遍历 JavaScript 数组了!

for…in 循环的本质

主要问题

更好的替代方案

什么时候可以使用for…in？

相关推荐

因果推断Matching方式实现代码因果推断模型

C# 13 和 .NET 9 全知道 :13 使用 ASP.NET Core 构建网站 (1)

git pull命令使用实例 git pull--rebase

git 执行pull错误如何撤销 git pull fail

面试官:git pull是哪两个指令的组合?

git pull 和git fetch 命令分别有什么作用?二者有什么区别?

git fetch 和git pull 的异同 git中fetch和pull的区别

git pull 之后本地代码被覆盖解决方案

还可以这样玩?Git基本原理及各种骚操作，涨知识了

git命令之pull git.pull

for...in 循环的坑，别再用它遍历 JavaScript 数组了!

for…in 循环的本质

主要问题

更好的替代方案

什么时候可以使用for…in？

相关推荐

因果推断Matching方式实现代码 因果推断模型

C# 13 和 .NET 9 全知道 :13 使用 ASP.NET Core 构建网站 (1)

git pull命令使用实例 git pull--rebase

git 执行pull错误如何撤销 git pull fail

面试官:git pull是哪两个指令的组合?

git pull 和git fetch 命令分别有什么作用?二者有什么区别?

git fetch 和git pull 的异同 git中fetch和pull的区别

git pull 之后本地代码被覆盖 解决方案

还可以这样玩?Git基本原理及各种骚操作，涨知识了

git命令之pull git.pull

因果推断Matching方式实现代码因果推断模型

git pull 之后本地代码被覆盖解决方案