前端开发别再用 for…in 循环遍历 JavaScript 数组了！

在 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会遍历这些新增的属性：

Array.prototype.customMethod = function() {};
const arr=[10，20，30];
for (let i in arr) {
  console.log(i); // 除了 0,1,2，还会输出"customMethod"
}

更好的替代方案

1. for 循环

最传统也最可靠的方式：

const arr = [10，20，30];
for(let i = 0; i < arr.length; i++) {
  console.log(i, arr[i]);
}

2. for…of 循环

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

const arr = [10，20，30];
for (const item of arr) {
  console.log(item); // 直接得到元素值
}

3. forEach 方法

数组内置的遍历方法：

const arr = [10，20，30];
arr.forEach((item，index) => {
  console.log(index, item);
});

4. map, filter, reduce 等

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

// 转换数组
const doubled = [10，20，30].map(item => item * 2);
/1 筛选元素
const filtered = [10，20，30].filter(item => item > 15);

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

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

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

所以在 JavaScript 前端开发中，for…in 循环在使用不当时，在遍历数组时存在很多潜在问题，可能导致意想不到的 bug 和性能问题。

以上关于前端开发别再用 for…in 循环遍历 JavaScript 数组了！的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。