js对数组的一些用法总结，数组遍历，forEach，map，filter，find，every，some，reduce

谁践踏了优雅 2024-04-17 15:41 59阅读 0赞

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

**多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮)**

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

今天柚子总结了一些数组的用法，分享给大家

### 1、数组遍历： ###

遍历数组是项目中经常遇到的需求，遍历数组的方法也有很多种下面列举几种常见的遍历数组的方法：

*       最常见的就是for循环遍历了，i = 0， i 就为下标

var colors = ["red", "blue", "green"]; //遍历这个数组
    
            for(var i = 0; i < colors.length; i++) {
    	        console.log(colors[i]);
            }

*       forEach遍历

//使用forEach遍历，forEach遍历有三个参数，一个必填，两个选填
            Array.forEach(function(item,index,arr) {
    	        console.log(item);//元素
                console.log(index); //元素对应索引值
                console.log(arr);//元素所属的数组对象
            });
            //注：只有一个参数时，就是当前元素本身值
                  两个参数时，元素+索引值

*       for...in...遍历

for(var i in Array){
                    console.log(i)//元素的索引值
                    console.log(Array[i])//元素
                }

*       for...of...遍历

for(var item of colors){
                    console.log(item)//当前元素
                }

### 2、map() ###

返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

map() 方法按照原始数组元素顺序依次处理元素。

**              注意：** map() 不会对空数组进行检测。

**              注意：** map() 不会改变原始数组。

//例如：返回一个数组，数组中元素为原始数组中数值的两倍:
    
                var doubled = Array.map(function(number) {
                    return number * 2;
                })

### 3、filter() ###

创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素

**              注意：** filter() 不会对空数组进行检测。

**              注意：** filter() 不会改变原始数组。

//例如：返回一个新数组，新数组中的元素是原始数组中sex为男的并且年龄大于18的
    
                var arr = Array.filter(function(el) {
                    return el.sex===  "男" &&
                           el.age > 18
                })
    
                //注：多个条件可以用&&并列

### 4、find() ###

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

当数组中的元素在测试条件时返回 *true* 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。

如果没有符合条件的元素返回 undefined

**             注意:** find() 对于空数组，函数是不会执行的。

**             注意:** find() 并没有改变数组的原始值。

//例如：获取Array数组中年龄大于 18 的第一个元素
                var el = Array.find(function(el) {
                    return el.age > "18";
                })

### 5、every() ###

every() 方法用于检测数组所有元素是否都符合指定条件

every() 方法使用指定函数检测数组中的所有元素：

如果数组中检测到有一个元素不满足，则整个表达式返回 *false* ，且剩余的元素不会再进行检测。

如果所有元素都满足条件，则返回 true。

**               注意：** every() 不会对空数组进行检测。

**               注意：** every() 不会改变原始数组。

总结来说就是 ： 一假即假

//例如：检测数组 ages 的所有元素是否都大于等于 18 
                var every = Array.every(function(el) {
                    return el.age > 18;
                })

### 6、some() ###

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

如果有一个元素满足条件，则表达式返回*true* , 剩余的元素不会再执行检测。

如果没有满足条件的元素，则返回false。

**              注意：** some() 不会对空数组进行检测。

**              注意：** some() 不会改变原始数组。

总结来说就是 ： 一真即真

//例如：检测数组中是否有元素大于 18的元素
                var some= Array.some(function(el) {
                    return el.age > 18;
                })

### 7、reduce() ###

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

reduce() 可以作为一个高阶函数，用于函数的 compose。

**              注意:** reduce() 对于空数组是不会执行回调函数的。

//例如：计算数组元素相加后的总和：
                var sumValue = Array.reduce(function(sum, number) {
                    console.log(sum);//初始值
                    return sum2 + number;//和
                }, 0);
                console.log(sumValue)

ok,先总结这么多吧，以后有需要会继续再总结一些，希望能给一些朋友带来帮助。