For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt, and this page is available as Markdown at /note/js/array-loop.md.

数组遍历

初始化数组

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

1、for 循环

代码示例
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 循环

代码示例
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 循环

代码示例
/* 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 循环

代码示例
/**
 * 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 循环

代码示例
/**
 * 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()方法

代码示例
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()方法

代码示例
/* 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()方法

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