ECAMscript5数组遍历方法——forEach（）、map（）、filter（）、some（）、every（）、reduce（）

╰半夏微凉° 2023-07-14 12:58 16阅读 0赞

--------------------

## 1、forEach（）、map（） ##

--------------------

/*forEach（）,目的是遍历数组各项再具体进行操作*/
    var arr=[1,2,3,4,5];
    arr.forEach(function (value,index,array) { 	//数组遍历
        console.log(value);				//当前的值
        console.log(index);				//当前值的索引
        console.log(array);				//整个arr数组
    });
    /*map（）,目的是对数组各项进行操作*/
    console.log(arr.map(value =>  value * 2));
    /*默认返回return value * 2; */

--------------------

## 结果图： ##

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]  
**forEach（）相似map（）就不在赘述**，**但是foreach（）里面的return语句不会终止数组循环**

--------------------

## 2、filter（） -> 筛选数组 ##

--------------------

/*filter（）,目的是筛选数组各项*/
    var arr=[1,2,3,4,5];
    var arr1=arr.filter(function (value,index,array) { 	//filter筛选并返回新的数组
        return value>=3;		//返回大于等于3的
    });
    console.log(arr1);

--------------------

## 效果图： ##

--------------------

![在这里插入图片描述][2020031418291071.png]  
**查找效率相对较低，但能得到满足条件的元素** **，filter（）里面的return语句也不会终止数组循环**

--------------------

## 3、some（）、every（） -> 查找满足条件的元素 ##

--------------------

/*some（）,目的是查找数组中是否有满足某一条件的某一项*/
    var arr=[1,2,3,4,5];
    var arr1=arr.some(function (value,index,array) { 	//some筛选并返回true或者false
        return value>=3;
    });
    console.log(arr1);
    /*every（）*/

**效果图：**  
![在这里插入图片描述][20200314184840803.png]  
**一旦查找到目标元素就终止循环，不在则继续查找（查找效率相对较高，但不能得到满足条件的元素）**，最终只返回true|false

/*every（）,目的是查找数组中的每一项是否有满足某一条件*/
    console.log(arr.every(value =>  value > 0));		/*true*/

**查找到全部目标元素都符合条件就返回true， 否则都返回false**

## 4、reduce（） ##

作用：对数组里面的一些内容进行汇总

let new2Nums = [20, 40, 80, 100];

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 1]  
另一个例子

let arr = [1,2,3,4,5];
    console.log(arr.reduce((pre, n) => pre + n,10));			/*输出25*/
    /*(pre, n)里面的pre是之前的值，n是当前数组某一项的值*/
    /*最后面的10是初始值，当然也可不写，如果不写的话那么就初始值就是0*/

也可以查看官网的[reduce（）方法][reduce]

##### 并且上面方法里面的参数都是 **回调函数** #####

本文只用于个人学习和记录

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]: /images/20230529/001bbc24eb4b4852b9356ccba59e02de.png
[2020031418291071.png]: /images/20230529/2589886171214f038da537042184e235.png
[20200314184840803.png]: /images/20230529/a9e10ec4d3b74e05aaa0862405949484.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 1]: /images/20230529/6c926087f4e04e45b3ebae1d31244cbc.png
[reduce]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce