1. map:映射   一个对一个

arr.map(function(item) { ... })    可以配合箭头函数:arr.map(item => ... )

        let arr1 = [1,2,3]
let result1 = arr1.map(item=>item*2)
console.log(result1) // [2,4,6]
        let score = [56,88,90];
let grade = score.map(item=>item>=60?'及格':'不及格');
console.log(score); // [56, 88, 90]
console.log(grade); // ["不及格", "及格", "及格"]

可以看到一一对应的关系

2. reduce:汇总 一堆对一个

语法:arr.reduce(function(tmp, item, index [,arr]){ ... }[, initialValue])

tmp:初始值,或是上一次的叠加结果值,不指定initialValue时默认为arr[0]的值为起始值

item:当前值

index:当前值在数组中的index值

arr:当前数组,可不写

initialValue:指定初始执行的值

下面给几个例子用于熟悉这几个参数的含义

        let arr2 = [12,69,180,8763]
arr2.reduce((tmp,item,index)=>{
console.log(tmp,item,index)
})
// 12,69,1
     // undefined,180,2
     // undefined,8763,3
        arr2.reduce((tmp,item,index)=>{
console.log(tmp,item,index)
},[])
// [] 12 0
     // undefined,69,1
     // undefined,180,2
     // undefined,8763,3
     arr2.reduce((tmp,item,index)=>{
console.log(tmp,item,index)
},0)
     // 0 12 0
     // undefined,69,1
     // undefined,180,2
     // undefined,8763,3

tmp是初始值或是上一次的叠加结果值,所以第一个我们可以看到tmp是有值的:

当有initialValue时显示为initialValue值,如果initialValue缺省则显示arr[0]的值,即12

后面剩下的循环这里undefined是因为reduce里面没有写两者相加这个语句,所以tmp这个值是没有的

在function里添加tmp+item,看下面这两个例子:

        arr2.reduce((tmp,item,index)=>{
console.log(tmp,item,index)
return tmp+item
},[])
// [] 12 0
     // 12,69,1
     // 1269,180,2
     // 1269180,8763,3   // 这里明显是字符串的拼接了,因为初始值是[],所以tmp+item是按照字符串拼接的方式相加的 let result2 = arr2.reduce((tmp,item,index)=>{
console.log(tmp,item,index)
return tmp+item
}, 0)
// 0 12 0
     // 12,69,1
     // 81,180,2
     // 261,8763,3 console.log(result2) // 9024 result2最后是最终求和的结果

如果想求平均值呢?逻辑是:前面循环求和,最后一次求和后除以数组个数,即:

        let result3 = arr2.reduce((tmp,item,index)=>{
if(index!=arr2.length-1){ // 不是最后一个
return tmp+item
}else { // 是最后一个
return (tmp+item)/arr2.length
}
})
console.log(result3) // 2256 求平均值

3. filter 过滤  返回值是符合过滤条件的元素

arr.filter(function(){ ... })

        let arr3 = [22,5,63,34,12,7,69]
let result4 = arr3.filter(item=>item%3==0) console.log(result4) // [63, 12, 69]

filter在循环的过程中有一个判断过程,是true则返回,false则去掉

4. forEach  循环迭代

arr.forEach(function(item, index){ ... })

ES6 —— 数组总结的更多相关文章

  1. ES6数组扩展

    前面的话 数组是一种基础的JS对象,随着时间推进,JS中的其他部分一直在演进,而直到ES5标准才为数组对象引入一些新方法来简化使用.ES6标准继续改进数组,添加了很多新功能.本文将详细介绍ES6数组扩 ...

  2. ES6数组及数组方法

    ES6数组可以支持下面的几种写法: (1)var [a,b,c] = [1,2,3]; (2)var [a,[[b],c]] = [1,[[2],3]]; (3)let [x,,y] = [1,2,3 ...

  3. 数组的复制及ES6数组的扩展

    一.数组的复制 // alert([1,2,3]==[1,2,3]); let cc = [0,1,2]; let dd = cc; alert(dd==cc);//此时改变dd会影响cc ES5 只 ...

  4. es6数组的扩展

    数组扩展运算符 ...(三个点) const demoArr=[0,1,2,3,4] console.log(...demoArr) // 0 1 2 3 4 // 他把一个数组用逗号分隔了出来 // ...

  5. ES6 数组方法拓展

    ES6 数组方法拓展 1.Array.from() Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括E ...

  6. ES6数组相关

    ES6数组新增的几个方法: 1. forEach() //forEach()遍历数组,无返回值,不改变原数组 var arr=[1,2,3,4] arr.forEach((item,index,arr ...

  7. ES6数组新加 Buff

    欢迎关注本人公众号<迈向大前端>,里面有15本前端相关的电子书,送给在前端路上迷茫的同学们! 本章篇幅很长,分开来发,这一小篇主要讲ES6数组的Array.of()和Array.from( ...

  8. ES6数组的扩展--Array.from()和Array.of()

    一. Array.from() : 将伪数组对象或可遍历对象转换为真数组 1.何为伪数组 如果一个对象的所有键名都是正整数或零,并且有length属性,那么这个对象就很像数组,语法上称为"类 ...

  9. JavaScript ES6 数组新方法 学习随笔

    JavaScript ES6 数组新方法 学习随笔 新建数组 var arr = [1, 2, 2, 3, 4] includes 方法 includes 查找数组有无该参数 有返回true var ...

  10. 关于 ES5 & ES6 数组遍历的方法

    ES5 数组遍历方法 1.for 循环 , , , , ] ; i < arr.length; i++) { console.log(arr[i]) } 2.forEach , , , , ] ...

随机推荐

  1. ArcGIS中删除“点”附带的对应“文本信息”

    现状: 用ArcMap打开对应的.mxd文件,导入KML数据后,几何类型“点” - 每一个点都附带对应的文本信息“Placemark”,如下图: 问题:ArcGIS中如何 删除“点”附带的对应“文本信 ...

  2. java 形式参数和实际参数的区别

    1.形参不能离开方法.形参只有在方法内才会发生作用,也只有在方法中使用,不会在方法外可见.而实参可以再程序的任何地方都使用.

  3. 从码农到技术总监分享Leader经验

    从一个毕业的IT小伙或者一个码农成长为一个管理者,有很多需要转变的思想,那么当你遇到了瓶颈,或许我的经验能帮到你,感谢. 系统的掌握了.NET,JAVA技术,能够熟练的使用springcloud + ...

  4. 数据可视化之 tick_params( 参数 )

    参考:https://blog.csdn.net/helunqu2017/article/details/78736554/ 初学数据可视化,遇到了tick_params() 里面传参数问题,找了一些 ...

  5. MVP技术沙龙上海站-SQL BI

    5月,微软爱好者们齐聚一起,在上海港汇中心,参加<MVP技术沙龙上海站-SQL BI>系列讲座,下面是现场图片.  

  6. 微信内嵌浏览器打开手机浏览器下载APP(APK)的方法

    想必大家会经常碰到网页链接在微信内无法打开和微信内无法打开app下载页的情况.通常这种情况微信会给个提示 “已停止访问该网址” ,那么导致这个情况的因素有哪些呢,主要有以下四点 1.网页链接被举报次数 ...

  7. APP包打包签名步骤

    开发混合app上架应用市场,需要进行应用签名,但是申请签名如果没搞过,会特别麻烦,所以我自自己总结了一下申请的步骤,在此记录一下 1.首先需要下载安装java环境即jdk, 2.配置环境变量 假设JD ...

  8. python反射和面向对象的知识并简述基本的异常

    # 1.面向对象不是所有的情况都适用# 2.面向对象编程# a.定义类# class Foo:# def 方法1(self,bb):# b.根据类创建对象(创建) # class Person():# ...

  9. html布局(盒子)

    在body里面放置两个盒子,里面盒子设置margin-top,外层盒子生效?在里面盒子上面加一个块元素,设置高度 表单 form action="地址" method=" ...

  10. validation-api各注解的用法

    入参用@Valid,要不下面实体类中的注解不生效 @AssertFalse 被注解的元素必须为false@AssertTrue 被注解的元素必须为True@DecimalMax(value) 被注解的 ...