ES6 —— 数组总结
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 —— 数组总结的更多相关文章
- ES6数组扩展
前面的话 数组是一种基础的JS对象,随着时间推进,JS中的其他部分一直在演进,而直到ES5标准才为数组对象引入一些新方法来简化使用.ES6标准继续改进数组,添加了很多新功能.本文将详细介绍ES6数组扩 ...
- 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 ...
- 数组的复制及ES6数组的扩展
一.数组的复制 // alert([1,2,3]==[1,2,3]); let cc = [0,1,2]; let dd = cc; alert(dd==cc);//此时改变dd会影响cc ES5 只 ...
- es6数组的扩展
数组扩展运算符 ...(三个点) const demoArr=[0,1,2,3,4] console.log(...demoArr) // 0 1 2 3 4 // 他把一个数组用逗号分隔了出来 // ...
- ES6 数组方法拓展
ES6 数组方法拓展 1.Array.from() Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括E ...
- ES6数组相关
ES6数组新增的几个方法: 1. forEach() //forEach()遍历数组,无返回值,不改变原数组 var arr=[1,2,3,4] arr.forEach((item,index,arr ...
- ES6数组新加 Buff
欢迎关注本人公众号<迈向大前端>,里面有15本前端相关的电子书,送给在前端路上迷茫的同学们! 本章篇幅很长,分开来发,这一小篇主要讲ES6数组的Array.of()和Array.from( ...
- ES6数组的扩展--Array.from()和Array.of()
一. Array.from() : 将伪数组对象或可遍历对象转换为真数组 1.何为伪数组 如果一个对象的所有键名都是正整数或零,并且有length属性,那么这个对象就很像数组,语法上称为"类 ...
- JavaScript ES6 数组新方法 学习随笔
JavaScript ES6 数组新方法 学习随笔 新建数组 var arr = [1, 2, 2, 3, 4] includes 方法 includes 查找数组有无该参数 有返回true var ...
- 关于 ES5 & ES6 数组遍历的方法
ES5 数组遍历方法 1.for 循环 , , , , ] ; i < arr.length; i++) { console.log(arr[i]) } 2.forEach , , , , ] ...
随机推荐
- 网盘资源分享:你不知道的JavaScript(上)
链接:https://pan.baidu.com/s/1UEBetOr2Z94oEeu5VsQYXQ 提取码:etts 复制这段内容后打开百度网盘手机App,操作更方便哦
- This application failed to start because it could not find or load the Qt platform plugin异常
双击项目Release文件夹下的exe程序无法启动: 解决办法: 1.将用到的QT组件拷贝到程序目录: 2.将D:\Qt\Qt5.3.2\5.3\msvc2013_64_opengl\plugins目 ...
- 【转】FluentAPI详细用法
设置主键modelBuilder.Entity<x>().HasKey(t => t.Name); 设置联合主键modelBuilder.Entity<x>().HasK ...
- EAP-MD5计算方法
一.说明 领导要求确认设备进行802.1X认证时,是否直接将用户名密码明文传给交换机.配好端口镜像.搭好Radius环境后进行了抓包分析. 二.计算 2.1 802.1X认证过程 完整流程如下: 客户 ...
- jieba库与词云的使用——以孙子兵法为例
1.打开cmd安装jieba库和 matplotlib. 2.打开python,输入代码.代码如下: from wordcloud import WordCloud import matplotlib ...
- typescript初入门
1.通过npm安装 typescript 进入终端窗口安装typescript: npm install -g typescript 查看typescript版本号: tsc -v 2.编译代码:t ...
- git(二) 分支管理
概念 分支就是科幻电影里面的平行宇宙,当你正在电脑前努力学习Git的时候,另一个你正在另一个平行宇宙里努力学习SVN. 如果两个平行宇宙互不干扰,那对现在的你也没啥影响.不过,在某个时间点,两个平行宇 ...
- lumion的物体系统5.30
1.“自然"点击这棵树.可以打开自然库.不同的植物分类有很多页数. 选择一棵树,自动返回页面单击鼠标左键可以种植这个树.成排种树:点击”人群安置“点击我们想安置的起点.再点击终点.用鼠标右键 ...
- Spring Boot:Web 综合开发
Web 开发 Spring Boot Web 开发非常的简单,其中包括常用的 json 输出.filters.property.log 等 json 接口开发 在以前使用 Spring 开发项目,需要 ...
- devexpress—WPF
https://docs.devexpress.com/WPF/7875/index Ocelot 资源汇总 https://www.cnblogs.com/shanyou/p/10363360.ht ...