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 相关文章推荐
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
js下拉菜单语言选项简单实现
Sep 23 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 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
PHP基础之运算符的使用方法
2013/04/28 PHP
php图像验证码生成代码
2017/06/08 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
python字符串str和字节数组相互转化方法
2017/03/18 Python
python实现报表自动化详解
2017/11/16 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
理货员的岗位职责
2013/11/23 职场文书
后勤采购员岗位职责
2013/12/19 职场文书
模具专业毕业生自荐书范文
2014/02/19 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
房产公证书样本
2015/01/23 职场文书
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis