Array数组对象中的forEach、map、filter及reduce详析


Posted in Javascript onAugust 02, 2018

前言

刚才某人问了我一个问题。map怎么遍历,我刷刷刷就是一顿写。遍历么,forEach么,妥妥的。

var map = new Map();
map.set('item1', 'value1')
map.set('item2', 'value2')
map.forEach(function(value, key, map) {
 console.log("Key: %s, Value: %s", key, value);
});

好吧,我写完了之后,他发给我了一句话。 [].forEach()改成[].map()怎么用?

what?我这个暴脾气。。。。我当然是详细的说一下Array的常规遍历方法以及场景了。

Array.filter

语法

var new_arr = arr.filter(callback(element, index, array){

}, this)

参数

callback 回调
    element 当前的value
    index   当前的索引值
    array   arr这个数组对象
this 回调的this指向

返回值

Array 类型
//符合条件的值组成的数组

用法

//如果返回值是true的话,就是符合条件。
//filter 不会改变原数组,它返回过滤后的新数组。
//这个里返回数组里面的偶数
[10,11,12,13].filter((v)=>v % 2 == 0)
//只要审核通过的。当然正常情况下,对象比这个复杂一些。
[{state:1},{state:0},{state:0},{state:0}].filter((v)=>v.state == 1)
//只要成年人,记录是有效的
[{age:18,state:1},{age:16,state:0},{age:21,state:0}].filter((v)=>v.state == 1 && v.age > 17)

场景

场景就是过滤,把符合条件的整理到一起,常见的就是展示审核通过的数据,只显示关注我的人,只显示妹子,对吧糙汉子就过滤不看了。

Array.forEach

语法

arr.forEach(callback(element, index, array){

}, this)

参数

callback 回调
    element 当前的value
    index   当前的索引值
    array   arr这个数组对象
this 回调的this指向

返回值

undefined
// 这个东西没有返回值

用法

//遍历数组。打印到控制台
[10,11,12,13].forEach((v)=>{
 console.log(v)
})
// 成功的收集到success里面,错误的收集到error里面。
var success = [],error = [];
[{state:1},{state:0},{state:0},{state:0}].forEach((v)=>{
 if(v.state == 1){
  success.push(v)
 }else{
  error.push(v)
 }
})
// 给20岁的小姐姐打招呼
[{state:1,age: 1},{state:0,age: 20},{state:0,age: 19},{state:0,age: 31}].forEach((v)=>{
 if(v.age == 20){
  console.log('你好啊,我今年正好80')
 }
})

场景

比如说绑定事件,比如判断值然后push到不同的地方

Array.map

语法

arr.map(callback(element, index, array){

}, this)

参数

callback 回调
    element 当前的value
    index   当前的索引值
    array   arr这个数组对象
this 回调的this指向

返回值

array 数组
// 每个回调的返回值组成的新数组

用法

//把数值格式化,保留两位小数
[10.055,11.054,12.056,13.789].map((v)=>+v.toFixed(2))

场景

这个一般就用在,我需要一组值,但是这个值不对,需要计算原数组来生成。

Array.reduce

语法

arr.reduce(callback(accumulator, element, index, array){

}, initialValue)

参数

callback 回调
    sum     累加器的返回值,也就是上一次回调的返回值
    element 当前的value
    index   当前的索引值
    array   arr这个数组对象
initialValue 初始传入的值,如果不传回调从下标1开始,下标0作为初始值

返回值

//返回最后一次回调的值

用法

//累加
[10,11,12,13].reduce((s,v)=>s+v,0)

场景

这个计算整个数组得出一个值的

对比

  • forEach没有返回值,重点是function里面处理逻辑
  • map有返回值,重点是function返回值,组成新数组
  • filter有返回值,重点是function返回值,过滤之后组成新数组
  • reduce有返回值,重点是计算数组,返回一个值

昨天晚上下班着急跑路,还差一些例子没往上整理,今天补上

例子

大家可以尝试写写,有好的例子能更好的说明函数的作用也可以在评论区提出来,有好的解决方案也可以写出来。

有一组用户信息按手机号降序排序,输出用户名称,用逗号分隔

[{name: 'l1', phone: '1507539'},{name: 'l2', phone: '1507540'},{name: 'l3', phone: '1507541'},{name: 'l4', phone: '1507538'}]
 .sort((n,m)=>n.phone<m.phone)
 .map(m=>m.name)
 .join(',')

给元素绑事件

[].slice.call(document.querySelectorAll('div'))
 .forEach(v=>v.addEventListener('click',e=>console.log(e.target.className)))

获取所有元素的class,过滤空串

[].slice.call(document.querySelectorAll('*'))
 .map(v=>v.className)
 .filter(v=>v)

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
海量经典的jQuery插件集合
Jan 12 Javascript
js 处理URL实用技巧
Nov 23 Javascript
jQuery版仿Path菜单效果
Dec 15 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 Javascript
vue.js数据绑定操作详解
Apr 23 Javascript
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 Javascript
利用Blob进行文件上传的完整步骤
Aug 02 #Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 #Javascript
vue组件横向树实现代码
Aug 02 #Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 #Javascript
在微信小程序里使用watch和computed的方法
Aug 02 #Javascript
在小程序中使用Echart图表的示例代码
Aug 02 #Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 #Javascript
You might like
文件上传类
2006/10/09 PHP
PHP的分页功能
2007/03/21 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
jquery操作select option 的代码小结
2011/06/21 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
理解JS事件循环
2016/01/07 Javascript
微信小程序入门教程
2016/11/18 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
Python读取Excel的方法实例分析
2015/07/11 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
python Selenium 库的使用技巧
2020/10/16 Python
Django 实现图片上传和下载功能
2020/12/31 Python
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
法定代表人授权委托书范文
2014/09/22 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
java设计模式--建造者模式详解
2021/07/21 Java/Android
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers