本文共 1675 字，大约阅读时间需要 5 分钟。

JavaScript 中常见的循环遍历方法

在 JavaScript 中，循环遍历数据是开发人员日常工作中常用到的操作之一。以下是几种常见的循环遍历方法，每种方法都有其适用的场景和特点。

1. for 循环

for 循环是 JavaScript 中最常用的循环语法，灵活性和性能都较高。它适用于处理数组、字符串等可索引数据结构。开发者可以通过 break、continue 等关键字提前退出循环，提升代码的效率。

let arr = [1, 2, 3, 4, 5, 6, 7];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
    // 可以通过 break 檻退出循环
    if (arr[i] > 5) break;
}

2. for...in 循环

for...in 循环主要用于遍历对象的属性。由于 JavaScript 对象的属性可能包含继承属性，导致遍历时出现不必要的属性。因此，建议在遍历时结合 hasOwnProperty 方法，避免非自身属性的干扰。

let obj = {
    name: '小明',
    sex: '男',
    age: '28'
};
for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
        console.log(obj[key]);
    }
}

3. map 方法

map 方法用于将数组中的每个元素按照函数返回的结果创建新的数组。其特点是循环不会中断，只能遍历完整个数组。适用于对数组元素进行转换或过滤操作。

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(n => n + 1);
console.log(arr2); // [2, 3, 4, 5, 6]

4. forEach 方法

forEach 方法与 map 类似，但仅用于对数组中的元素进行操作，不返回新的数组。它的特点是循环不会中断，适用于批量操作数组数据。

let arrObj = [
    { id: 1, name: '小华' },
    { id: 2, name: '小明' },
    { id: 3, name: '小白' }
];
arrObj.forEach((item, index, arr) => {
    console.log(arr); // 输出原数组
    console.log(index); // 0, 1, 2
    console.log(item.name); // 小华、小明、小白
});

5. filter 方法

filter 方法用于过滤数组中的元素，满足条件的元素会被包含在新数组中。该方法不会改变原始数组，适用于根据条件筛选数据。

let arrObj = [
    { id: 1, name: '小华' },
    { id: 2, name: '小明' },
    { id: 3, name: '小白' }
];
let arr2 = arrObj.filter((item, index, arr) => {
    return item.name === '小华';
});
console.log(arr2); // [{ id: 1, name: '小华' }]

6. Object.keys 方法

Object.keys 方法用于获取对象的所有可枚举属性名称，返回一个数组。该方法适用于遍历对象的自身属性，避免继承属性的干扰。

let obj = {
    name: '小明',
    sex: '男',
    age: '28'
};
console.log(Object.keys(obj)); // ["name", "sex", "age"]

这些方法各有特点，开发者可以根据需求选择最合适的循环方式。

转载地址：http://txqfk.baihongyu.com/