es6 new Map遍历 es6数组map方法

目录

1，map() 方法

2，filter（）方法

3，reduce（）方法 

4，forEach（）方法

---

1，map() 方法

map（）方法会对数组的每个元素执行函数来创建一个新的数组，不会执行没有值得函数，且不会改变原始数组

map （）方法有三个参数 

• 数组的所有元素
• 数组元素的索引值（下标）
• 数组本身

例如：

将下列数组中的每个元素加3；

const arr = [1,6,7,3,4,5];
    
        const newarr=arr.map((item,index,array)=>{
            console.log('数组中的元素'+item);
            console.log('每个数组元素的索引'+index);
            console.log('数组本身'+array);
            return item +3 ;
        })
        console.log(newarr);

效果图

 

注意： 如果回调函数中仅仅只有一个参数时，可以省略索引参数和数组本身参数

2，filter（）方法

filter（）函数是筛选函数，将符合条件的函数筛选出来并返回且创建一个新的数组，不会改变原始数组，也不会对空数组执行函数

filter（）函数  与 map（）函数一样也有三个参数

• 数组的所有元素
• 数组元素的索引值（下标）
• 数组本身

当回调函数只有一个值value时可省略其他两个参数

例如：

将下列数组中value值大于18的数返回到一个新的数组

const arr = [1, 6, 7, 3, 4, 5, 102, 99, 78];
        const newarr = arr.filter((value) => {
            return value > 18;
        })

        console.log(newarr);

效果图：

3，reduce（）方法 

reduce（）方法在数组的每个元素上执行用户提供的“reducer”回调函数，按顺序传入来自前一个元素的计算的返回值,简单的讲就是返回数组中所有元素的和数  不会改变原始组的值  不会对空数组执行回调函数

reduce（）有四个参数

• 第一个参数   total --既是初始值，又是返回值 必须写
• 第二个参数   currentValue --当前元素             必须写
• 第三个参数    currentIndex--当前元素的索引   可写可不写
• 第四个参数    arr -- 数组本身                            可写可不写

也可以指定初始值

例如 1

求数组arr= [1,54,3,3,9,100]的累加值

const arr= [1,54,3,3,9,100];
        const newarr = arr.reduce((total,currentValue)=>{
            console.log('total的值'+total,'currentValue的值'+currentValue);
                return total + currentValue;
        })
        console.log(newarr);

效果图：

 例如 2 

当我指定默认值为30的时候，arr的累加值为；

const arr= [1,54,3,3,9,100];
        const newarr = arr.reduce((total,currentValue)=>{
            console.log('total的值'+total,'currentValue的值'+currentValue);
                return total + currentValue;
        },30)
        console.log(newarr);

此时total的初始值变成了30

 

4，forEach（）方法

forEach()方法 用于调用数组的每个元素，并将元素传递给回调函数  不会改变原始组的值  不会对空数组执行回调函数

forEach()函数有三个参数

• currentValue ：数组当前值
• index：数组当前值得索引
• arr：数组本身

例如：

得到数组arr的所有元素

const arr = [12,54,37,28,10];
    
        const newarr=arr.forEach((item,index,array)=>{
            console.log('数组中的元素'+item);
            // console.log('每个数组元素的索引'+index);
            // console.log('数组本身'+array);
        
        })

效果图：

 

小结：以上就是本文介绍的ES6中常用的几种新增的方法，如想要了解更多相关的知识可以查阅相关文献。