findindex遍历 js_JavaScript数组迭代（遍历）方法

最新推荐文章于 2023-03-23 09:47:05 发布

东倾电影

最新推荐文章于 2023-03-23 09:47:05 发布

阅读量101

点赞数

文章标签： findindex遍历 js

本文链接：https://blog.csdn.net/weixin_34245159/article/details/111955488

版权

前言

ES5和ES6中新增了不少东西，对于数组而言，新增了不少迭代方法，让我们可以抛弃for循环，更方便的写JS代码。

正文

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指向全局对象(在浏览器是为window)，严格模式下是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

最后我们对低版本IE进行一下拓展，是这个方法就有更好的兼容性,代码如下：

Array.prototype.forEach = Array.prototype.forEach || function(fn, context){

for (var k = 0, length = this.length; k < length; k++) {

if (typeof fn === "function" && Object.prototype.hasOwnProperty.call(this, k)) {

fn.call(context, this[k], k, this);

}

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]

最后我们对map方法进行一下拓展：

Array.prototype.map = Array.prototype.map || function (fn, context) {

var arr = [];

if (typeof fn === "function") {

for (var k = 0, length = this.length; k < length; k++) {

arr.push(fn.call(context, this[k], k, this));

}

return arr;

};

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]

下面是对filter方法的拓展：

Array.prototype.filter = Array.prototype.filter || function (fn, context) {

var arr = [];

if (typeof fn === "function") {

for (var k = 0, length = this.length; k < length; k++) {

fn.call(context, this[k], k, this) && arr.push(this[k]);

}

return arr;

};

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

下面是some方法的拓展：

Array.prototype.some = Array.prototype.some || function (fn, context) {

var passed = false;

if (typeof fn === "function") {

for (var k = 0, length = this.length; k < length; k++) {

if (passed === true) break;

passed = !!fn.call(context, this[k], k, this);

}

return passed;

};

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

every方法拓展如下：

Array.prototype.every = Array.prototype.every || function (fn, context) {

var passed = true;

if (typeof fn === "function") {

for (var k = 0, length = this.length; k < length; k++) {

if (passed === false) break;

passed = !!fn.call(context, this[k], k, this);

}

return passed;

};

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]

从上面的输出结果可以看出callback被调用四次，每次调用的参数和返回值如下表：

callback

accumulator

currentValue

currentIndex

array

return

第一次调用

[0, 1, 2, 3, 4]

第二次调用

[0, 1, 2, 3, 4]

第三次调用

[0, 1, 2, 3, 4]

第四次调用

[0, 1, 2, 3, 4]

上面是没有传入第二个参数(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]

传入第二个参数后callback调用了五次，每次调用的参数和返回值如下表：

callback

accumulator

currentValue

currentIndex

array

return

第一次调用

[0, 1, 2, 3, 4]

第二次调用

[0, 1, 2, 3, 4]

第三次调用

[0, 1, 2, 3, 4]

第四次调用

[0, 1, 2, 3, 4]

第五次调用

[0, 1, 2, 3, 4]

从上面的情况可以看出：不提供initialValue ，reduce方法会从索引1的地方开始执行callback方法，跳过第一个索引。提供 initialValue，从索引0开始。

同时，是否提供initialValue对于回调函数第一次执行时，accumulator和currentValue的取值有两种情况：调用reduce时提供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));

}