[JavaScript] 数组迭代方法详解

我们也可以循环输出index也就是数组索引值，还可以输出数组本身。如果我们用不到index和array参数那么就可以省略它们。

2.Array.map()

1. map() 方法通过对每个数组元素执行函数来创建新数组。

2. map() 方法不会对没有值的数组元素执行函数。

3. map() 方法不会更改原始数组。

该函数也接受三个参数：

• 项目值

• 项目索引

• 数组本身

当回调函数仅使用 value 参数时，可以省略索引和数组参数：

特点：

map的回调函数中支持return返回值，return的是啥，相当于把数组中的这一项变为啥（并不影响原来的数组，只是相当于把原数组克隆了一份，把克隆这一份的数组中的对应项改变了 ）。

实例：

var txt = [];

var numbers = [45, 4, 9, 16, 25];

txt = numbers.map(function(value,index,array){

return value*2;

});

console.log(txt);

输出：

3.Array.filter()

filter() 方法创建一个包含通过测试的数组元素的新数组。

此函数接受 3 个参数：

• 项目值

• 项目索引

• 数组本身

在下面的例子中，回调函数不使用 index 和 array 参数，因此可以省略它们

特点：

如果我们需要以一定条件筛选数组里的元素并输出，那用这个方法最合适不过了，筛选条件就作为return值写在回调函数中就行

实例：（筛选出数组里大于20的元素）

var txt = [];

var numbers = [45, 4, 9, 16, 25];

txt = numbers.filter(function(value,index,array){

return value>20;

});

console.log(txt);

输出：

4.Array.reduce()

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

语法：

array.reduce(function(prev, current, currentIndex, arr), initialValue)

1. prev：函数传进来的初始值或上一次回调的返回值

2. current：数组中当前处理的元素值

3. currentIndex：当前元素索引

4. arr：当前元素所属的数组本身

5. initialValue：传给函数的初始值

reduce的应用：

1.数组求和：

var sum = 0;

var numbers = [45, 4, 9, 16, 25];

sum = numbers.reduce(function(prev,current){

return prev+current;

},0);

console.log(sum); //99

2.计算数组中每个元素出现的次数:

var txt = [‘curry’, ‘james’, ‘green’, ‘curry’, ‘thompson’];

var names = txt.reduce(function(pre,cur){

if(cur in pre){

pre[cur]++

}else{

pre[cur] = 1

}

return pre

},{})

console.log(names); //{ curry: 2, james: 1, green: 1, thompson: 1 }

3.对象里的属性求和:

var result = [

{

subject: ‘math’,

score: 10

},

{

subject: ‘chinese’,

score: 20

},

{

subject: ‘english’,

score: 30

}

];

var sum = result.reduce(function(prev, cur) {

return cur.score + prev;

}, 0);

console.log(sum) //60

5.Array.every()

此函数接受 3 个参数：

• 项目值

• 项目索引

• 数组本身

如果回调函数仅使用第一个参数（值）时，可以省略其他参数

特点：

如果我们需要判断一个数组里的元素是否全部满足一个条件时，可以用every方法，如果满足则会返回true，否则返回false。
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

[外链图片转存中…(img-H1LQRyOA-1713607614321)]

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

资料领取方式：戳这里前往免费领取