js之数组遍历的方法

1.使用for循环

var arr1 = [1, 2, 3, 4, 5];
// 1.for循环
for(var i=0; i<arr1.length; i++){
    console.log(arr1[i]);
}

2.for of

var arr1 = [1, 2, 3, 4, 5];
for(var item of arr1){
    console.log(item);
}

3.forEach：不可以停止或者跳出循环

// 3.forEach，不可以停止或者跳出循环
arr1.forEach((item, index, arr) => {
    console.log(item, index, arr);
})

4.map

var newArr = arr1.map((item, index, arr) => {
    return item;
})

forEach和map的区别：map会返回一个新的数组

 

5.filter，遍历整个数组，返回满足条件的新数组，如果没有返回空数组

var arr2 = ['df', 'www', 'a', 'ejfioeji', 'fd78enejnrfuj'];
var farr = arr2.filter((item, index, arr) => {
    if(item.length > 6 && index > 3){
        return item;
    }
});
console.log(farr);  // ['fd78enejnrfuj']

 

map和filter的区别：filter是满足条件的留下，是对原数组的过滤；map则是对原数组的加工，映射成一一映射的新数组

map和filter的相同点：不改变原数组，返回新的数组，不检测空数组

var arr = [3, 2, 1, 4, 5];
var marr = arr.map(item => item>2);
console.log(marr);  // [true, false, false, true, true]
var farr = arr.filter(item => item>2);
console.log(farr);  // [3, 4, 5]

 

6.every：every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。如果是空数组直接返回true

数组内只要有一个元素不满足函数的测试，就会立即停止遍历，直接返回false

const arr = [1, 30, 39, 29, 10, 13];
console.log(arr.every(item => item<40));  // true
const arr2 = [1, 30, 49, 29, 10, 13];
console.log(arr2.every(item => item<40));  // false

 

7.some：some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。如果用一个空数组进行测试，在任何情况下它返回的都是false。

数组内只要有一个元素满足函数的测试，就立即停止遍历，返回true

const arr = [1, 30, 39, 29, 10, 13];
console.log(arr.some(item => item>30));  // true
console.log(arr.some(item => item>40));  // false

 

8.find：find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1

const arr = [1, 30, 39, 29, 10, 13];
console.log(arr.find(item => item > 30));  // 39
console.log(arr.findIndex(item => item > 30));  // 2
console.log(arr.find(item => item > 50));  // undefined
console.log(arr.findIndex(item => item > 50));  // -1

 

9.reduce

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

accumulator：累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（见于下方）

currentValue：数组中正在处理的元素

index：数组中正在处理的当前元素的索引

array：调用reduce()的数组

initialValue：作为第一次调用 callback函数时的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错

注意：回调函数第一次执行时，accumulator 和currentValue的取值有两种情况：如果调用reduce()时提供了initialValue，accumulator取值为initialValue，currentValue取数组中的第一个值；如果没有提供 initialValue，那么accumulator取数组中的第一个值，currentValue取数组中的第二个值。

var arr = [1, 2, 3, 4];
console.log(arr.reduce((accu, current) => accu+current));  // 10
console.log(arr.reduce((accu, current) => accu+current, 5));  // 15