> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# 数组遍历

## 初始化数组

```javascript title="代码示例"
var arr = [
    {
        id: 1,
        name: "zhangsan",
    },
    {
        id: 2,
        name: "lisi",
    },
    {
        id: 3,
        name: "xiaoming",
    },
    {
        id: 4,
        name: "huasheng",
    },
];
```

## 1、for 循环

```javascript title="代码示例"
var arr1 = [];
for (var i = 0, len = arr.length; i < len; i++) {
    arr1.push(arr[i].id);
}
console.log(arr1); // [1, 2, 3, 4]
```

## 2、forEach 循环

```javascript title="代码示例"
var arr2 = [];
/**
 * item：数组元素（必选）
 * index：数组元素索引值（可选）
 * array：参数本身（可选）
 **/
arr.forEach(function (item, index, array) {
    console.log(item);
    console.log(index); // 0,1,2,3,4
    arr2.push(item.id);
});
console.log(arr2); // [1, 2, 3, 4]
```

## 3、for...in 循环

```javascript title="代码示例"
/* for...in循环可用于遍历对象和数组，推荐用于遍历对象 */
var arr3 = [];
for (var key in arr) {
    console.log(key); // 0,1,2,3
    arr3.push(arr[key].name);
}
console.log(arr3); // ["zhangsan", "lisi", "xiaoming", "huasheng"]
```

## 4、for...of 循环

```javascript title="代码示例"
/**
 * for...of循环
 * 可用于遍历数组和对象，推荐遍历数组
 * key()：对键名的遍历
 * value()：对键值的遍历
 * entries()：对键值对的遍历
 */
let arr4 = ["iOS", "Android", "Linux"];
// 遍历数组元素
for (let item of arr4) {
    console.log(item); // iOS,Android,Linux
}
// 遍历数组索引
for (let item of arr4.keys()) {
    console.log(item); // 0,1,2
}
// 遍历数组索引和值
for (let [index, item] of arr4.entries()) {
    console.log(index + ":" + item); // 0:iOS,1:Android,2:Linux
}
```

## 5、map 循环

```javascript title="代码示例"
/**
 * map循环
 * 会返回一个新的数组，数组中的元素为原数组元素调用函数处理后的值
 * 该方法会按照原数组元素顺序依次处理元素
 * 该方法不会修改调用它的原始数组本身
 * 该方法回调函数可接收三个参数，参数一：数组元素，参数二(可选)：数组元素索引值，参数三(可选)：数组本身
 * */
arr.map(function (item, index, array) {
    console.log(index + ":" + item.name);
});

var arr5 = arr.map(function (item) {
    return item.name;
});
console.log(arr5); // ["zhangsan", "lisi", "xiaoming", "huasheng"]
```

## 6、reduce()方法

```javascript title="代码示例"
var arr6 = [
    {
        id: 10,
        name: "小明",
        age: 20,
    },
    {
        id: 21,
        name: "小康",
        age: 24,
    },
    {
        id: 16,
        name: "小凯",
        age: 20,
    },
];

/* array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
 * total（必需）：初始值or计算结束后返回的值
 * currentValue（必需）：当前元素
 * currentIndex（可选）：当前元素的索引
 * arr（可选）：当前元素所属的数组对象
 * initialValue（可选）：传递给函数的初始值
 */

// 求年龄总和
var totalAge = arr6.reduce(function (total, item) {
    return total + item.age;
}, 0);
console.log(totalAge);

// 求年龄最大的那个人
var ageMax = arr6.reduce(function (item, people) {
    return (item.age || 0) > people.age ? item : people;
}, {});
console.info(ageMax);
console.log(ageMax.age);
```

## 7、filter()方法

```javascript title="代码示例"
/* filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素 */
let arr7 = [
    {
        id: 1,
        num: 101,
    },
    {
        id: 3,
        num: 201,
    },
    {
        id: 2,
        num: 10,
    },
];

/* 参数一：数组元素
 * 参数二：数组元素索引
 * 参数三：原数组对象
 *  */

// 组合使用
var totalScore = arr6
    .filter(function (item) {
        return item.name;
    })
    .map(function (choose) {
        return choose.age;
    })
    .reduce(function (total, age) {
        return total + age;
    }, 0);
console.log(totalScore);
```

## 8、Array.from()方法

```javascript title="代码示例"
let arrTest = [1, 7, "", 6, 8, ""];
let arr8 = Array.from(arrTest, (n) => n || 0);
console.log(arr8); // [1,7,0,6,8,0]
```