JavaScript数组迭代（遍历）方法

ES5和ES6中新增的的数组迭代方法如下：

• forEach

• map

• filter

• some

• every

• reduce / reduceRight

• find / findIndex

其中，find / findIndex是ES6新增的，其余都是ES5新增的。所以这些方法对低版本IE都不兼容。
接下来我们看看这些方法如何使用并在低版本IE进行兼容。

forEach

forEach方法是这些方法里面最基本的一个方法，它的作用是对数组的每个元素执行一次提供的函数。
例如：

var arr = [1, 2, 3];

arr.forEach(function (element, index, array) {
console.log(element, index, array)
})

//output
1 0 [1, 2, 3]
2 1 [1, 2, 3]
3 2 [1, 2, 3]

forEach方法中的callback函数会被依次传入三个参数：

• 数组当前项的值

• 数组当前项的索引

• 数组对象本身

forEach方法还可以传入第二个参数，这个参数是可选的。如果给forEach传递了第二个参数，callback函数里的

this

this

undefined

var arr = [1, 2, 3];
var obj = {name: 'zhang'};

arr.forEach(function (element, index, array) {
console.log(element, index, array, this)
}, obj)

// output
1 0 [1, 2, 3] {name: "zhang"}
2 1 [1, 2, 3] {name: "zhang"}
3 2 [1, 2, 3] {name: "zhang"}

下面我们用forEach写一个稍显完整的例子了，数组求和：

var sum = 0;

[1, 2, 3].forEach(function (element, index, array) {
console.log(array[index] == element); // true
sum += item;
});

console.log(sum); // 6

map

map方法的作用就是将原数组按照一定的规则映射成一个新的数组。再将其返回，是返回一个新的数组，而不是将原数组直接改变。使用方法和参数都跟forEach相似。
下面是一个数值求平方的例子：

var data = [1, 2, 3];

var arrayOfSquares = data.map(function (element) {
return element * element;
});

console.log(arrayOfSquares); //[1, 4, 9]

callback需要有return值，如果没有，就像下面这样:

var data = [1, 2, 3];

var arrayOfSquares = data.map(function (element) {
element * element;
});

console.log(arrayOfSquares); // [undefined, undefined, undefined]

filter

filter为“过滤”、“筛选”的意思。指数组filter后，返回过滤后的新数组。用法和参数跟map差不多。
与map方法不同的是，filter方法的callback函数需要返回弱等于

true

false

true

var arr = [0, 1, 2, 3];

var newArr = arr.filter(function (element, index, array) {
return e;
})

var newArr2 = arr.filter(function (element, index, array) {
return e>=2;
})

console.log(newArr); // [1, 2, 3]
console.log(newArr2); // [2, 3]

some

some方法是只要数组中的某个值，符合你给定的判断条件就返回

true

false

function isBigEnough(element, index, array) {
return element >= 4;
}
var passed = [1, 2, 3].some(isBigEnough);
var passed2 = [1, 2, 3, 4].some(isBigEnough);

console.log(passed); // false
console.log(passed2); // true

every

every方法与some方法相对，every方法是数组中的所有值都符合你给定的判断条件的时候才会返回

true

false

function isBigEnough(element, index, array) {
return element >= 3;
}
var passed = [2, 3, 4].every(isBigEnough);
var passed2 = [3, 4, 5].every(isBigEnough);

console.log(passed); // false
console.log(passed2); // true

reduce / reduceRight

reduce / reduceRight 方法比上面的几种方法要复杂一些；它的语法如下：

array.reduce(callback,[initialValue])

其中

callback

• accumulator

  上一次调用回调返回的值，或者是提供的初始值（

  initialValue

  ）

• currentValue

  数组中正在处理的元素

• currentIndex

  数组中正在处理的元素索引，如果提供了

  initialValue

   ，从0开始；否则从1开始。

• array

  数组对象本身

reduce / reduceRight 方法中，第二个参数（

initialValue

callback

var sum = [1, 2, 3].reduce(function(a, b) {
return a + b;
});
console.log(sum); // 6

下面我们来看看reduce是如何运行的
例如执行下面这段代码：

var sum = [0,1,2,3,4].reduce(function(accumulator, currentValue, currentIndex, array){
console.log(accumulator, currentValue, currentIndex, array)
return accumulator + currentValue;
});
console.log(sum);

// output
0 1 1 [0, 1, 2, 3, 4]
1 2 2 [0, 1, 2, 3, 4]
3 3 3 [0, 1, 2, 3, 4]
6 4 4 [0, 1, 2, 3, 4]
10

从上面的输出结果可以看出

callback

上面是没有传入第二个参数（

initialValue

var sum = [0,1,2,3,4].reduce(function(accumulator, currentValue, currentIndex, array){
console.log(accumulator, currentValue, currentIndex, array)
return accumulator + currentValue;
}, 10);
console.log(sum);

// output
10 0 0 [0, 1, 2, 3, 4]
10 1 1 [0, 1, 2, 3, 4]
11 2 2 [0, 1, 2, 3, 4]
13 3 3 [0, 1, 2, 3, 4]
16 4 4 [0, 1, 2, 3, 4]
20

传入第二个参数后

callback

从上面的情况可以看出：不提供

initialValue

callback

initialValue

initialValue

accumulator

currentValue

initialValue

accumulator

initialValue

currentValue

initialValue

accumulator

currentValue

reduceRight与reduce类似，不同之处在于它是从最后一个值开始计算的。

那么我们该如何拓展一个reduce / reduceRight方法：

Array.prototype.reduce = Array.prototype.reduce || function (callback, initialValue ) {
var previous = initialValue, k = 0, length = this.length;
if (typeof initialValue === "undefined") {
previous = this[0];
k = 1;
}

if (typeof callback === "function") {
for (k; k < length; k++) {
this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this));
}
}
return previous;
};

Array.prototype.reduceRight = Array.prototype.reduceRight || function (callback, initialValue ) {
var length = this.length, k = length - 1, previous = initialValue;
if (typeof initialValue === "undefined") {
previous = this[length - 1];
k--;
}
if (typeof callback === "function") {
for (k; k > -1; k-=1) {
this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this));
}
}
return previous;
};

find / findIndex

find方法用于找出第一个符合条件的数组成员。它的参数跟forEach方法是一样的；所有数组成员依次执行回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。
例如：

var value = [1, 5, 10, 15].find(function(element, index, array) {
return element > 9;
});
var value2 = [1, 5, 10, 15].find(function(element, index, array) {
return element > 20;
});

console.log(value); // 10
console.log(value2); // undefined

findIndex方法和find相似；不过它返回数组中符合条件的元素的索引。如果所有成员都不符合条件，则返回-1。

var value = [1, 5, 10, 15].findIndex(function(element, index, array) {
return element > 9;
});
var value2 = [1, 5, 10, 15].findIndex(function(element, index, array) {
return element > 20;
});

console.log(value); // 2
console.log(value2); // -1

转载于:https://www.cnblogs.com/watermelons/p/11570866.html

• 点赞
• 收藏
• 分享
• 文章举报