js 数组常用的遍历方法汇总

• 遍历数组

- for循环：这是我最初对数组遍历使用的方法

var list = [1, 2, 3, 4, 5, 6];

for(var i = 0, l = list.length; i < l; i++) {
    console.log(list[i], i);
    if (list[i] == 3) {
        break;
    }
}

// 1 0
// 2 1
// 3 2

- forEach(),这种方式确实很方便，但是跳出循环却是需要一点特殊手段，第一种是通过`return` 堵塞下方的代码，但是遍历依然会进行，不会被终止，另一种是通过抛异常，但是这种方式开销很大，依照自己的方式吧。

let isBreake = false;

list.forEach( item => {
    if (isBreake) return;
    if (item >= 3) {
        isBreake = true;
    }
    console.log(item);
})

try {
    list.forEach((item, index) => {
        console.log(item);
        if (item >= 3) {
            throw new Error('Error');
        }
    });
} catch(e) {
    if(e.message != 'Error') throw e;
};

- for···of···语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for...of 循环，以替代 for...in 和 forEach() ，并支持新的迭代协议。for...of 允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等。

for(item of list) {
    console.log(item);
    if (item >= 3) {
        break;
    }
}

• - 遍历数组（不改变原数组）并生成新的数组

- map()不改变原数组,适用于你要改变数据值的时候，返回一个新的数组。

var list2 = list.map((item, index) => {
    return item * 2;
})
list2 = list.map(item => item * 2);
console.log(list2);

- filter()不改变原数组,对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组。

var list3 = list.filter((item, index) => {
    return item >= 3;
})
var list3 = list.filter(item => item >= 3);
console.log(list3);

- reduce():不改变原数组,数组还有两个归并方法：reduce()、reduceRight() ,reduce()方法从左到右遍历数组；而reduceRight()从右到左遍历数组；

var list4 = strList.reduce((item, num) => {
    return item + num;
})
var list4 = list.reduce((item, num) => item + num);
console.log(list4);

• - 查找

- find():不创建新数组;不改变原数组;输出的是一旦判断为true则跳出循环输出符合条件的数组元素;回调函数参数，item(数组元素)、index(序列)、arr(数组本身);使用return操作输出，会循环数组每一项，并在回调函数中操作。

var new1 = list.find((item,index) => {
    return item > 2 && item < 5;
})
console.log(new1);
console.log(typeof new1);

// 3
// number

- findIndex():与find() 相同，只不过是返回 数组元素的 下标。

 

- includes()：只是判断数组是否含有某值，不用return，不用回调函数，输出一个true或false。

var new2 = list.includes(3);
console.log(new2);

// true

• - 判断数组

- some(): 不创建新数组;不改变原数组;输出的是判断为true则马上跳出循环并return成true;回调函数参数，item(数组元素)、index(序列)、arr(数组本身);使用return操作输出，会循环数组每一项，并在回调函数中操作。

var new3 = list.some((item,index) => {
    return item > 2 && item < 5;
})
console.log(new3);

// true

var new4 = list.some((item,index) => {
    return item > 10;
})
console.log(new4);

// false

- every():与some()相反，不创建新数组；不改变原数组；输出的是判断为false则马上跳出循环并return成false；回调函数参数，item(数组元素)、index(序列)、arr(数组本身)；使用return操作输出，会循环数组每一项，并在回调函数中操作。

var new5 = list.every((item,index) => {
    console.log(item);
    return item > 2 && item < 5;
})
console.log(new5);

// 1
// false

var new6 = list.every((item,index) => {
    console.log(item);
    return item > 10;
})
console.log(new6);

// 1
// false

- indexOf(), lastIndexOf():查找下标，只是顺序不同，indexOf是正序，lastIndexOf为倒序。

var new7 = list.indexOf(2);
console.log(new7);

// 1

 

 

说是汇总，其实也不一定会很全面，之后如果有用到其他的也会补充，也欢迎大家能提出你们的意见，谢谢。