js filter()、forEach()、map()的用法解析
时间:2020-05-29
本文章向大家介绍js filter()、forEach()、map()的用法解析,主要包括js filter()、forEach()、map()的用法解析使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最近进行前端开发时使用到了filter()、forEach()、map()方法,这里介绍一下它们的大致用法:
1、filter()是通过删选oldArray,来生产newArray的方法
语法:
array.filter(function(value, index, arr),thisValue)
value:必须,代表当前元素,其他四个参数都是可选,index代表当前索引值,arr代表当前的数组,thisValue代表传递给函数的值,一般用this值,如果这个参数为空,undefined会传递给this值
返回值:返回数组,包含了符合条件的所有元素,如果没有符合条件的则返回空数组
用法:
var arr = [1,2,3,4,5,6,7];
var ar = arr.filter(function(elem){
return elem>5;
});
console.log(ar);//[6,7]
简单用法:
var arr = [1,2,3,4,5,6,7];
var ar = arr.filter(elem => {
return elem>5;
});
console.log(ar);//[6,7]
2、forEach()用于遍历数组中的每个元素,并将元素传递给回调函数。它没有返回值,直接修改原数组中的数据。跟for循环用法类似。
语法:
array.forEach(function(value, index, arr),thisValue)
value:必须,代表当前元素,其他四个参数都是可选,index代表当前索引值,arr代表当前的数组,thisValue代表传递给函数的值,一般用this值,如果这个参数为空,undefined会传递给this值。
用法:
let arr = [
{ name: '1',
id: '1'
},{ name: '2',
id: '2'
},{ name: '3',
id: '3'
}
]
arr.forEach(item=>{
if(item.name==='2'){
item.name = 'zding'
}
})
console.log(arr)
[
{ name: '1',
id: '1'
},{ name: 'zding',
id: '2'
},{ name: '3',
id: '3'
}
]
它没有产生新的数组,修改的是原来的数组。
当数组中为单类型数据时:string、int等类型,这种方式的修改就不起作用了
例如:
let arr = [1,3,5,7,9]
arr.forEach(function(item){
item = 30
})
console.log(arr) //输出 [1, 3, 5, 7, 9]
我们期望输输出 [30, 30, 30, 30, 30],但实际上输出为 [1, 3, 5, 7, 9],修改没有起作用。
这个时候我们可以使用for循环,或者map()方法。
map()返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值,map()方法按照原始数组元素顺序依次处理元素.
语法:
array.map(function(value, index, arr),thisValue)
用法:
var arr = [1,2,3,4,5,6,7];
var ar = arr.map(function(elem){
return elem*4;
});
console.log(ar);//[4, 8, 12, 16, 20, 24, 28]
console.log(arr);//[1,2,3,4,5,6,7]
原文地址:https://www.cnblogs.com/wangyingblock/p/12988708.html
- 正确姿势:如何调戏蹭网者
- 当我们讨论流畅度的时候,我们究竟在说什么?
- ImageButton和ZoomButton使用大全
- Android 插件化突破应用市场无法上广告的问题
- ImageView的属性和方法大全
- sharedpreferences如何保存对象
- Android:全面解析熟悉而陌生 的 Application 类使用
- ToggleButton和Switch使用大全
- Android 无需权限显示悬浮窗, 兼谈逆向分析 App
- android数据保存之greendao
- CheckBox和RadioButton使用大全
- 关于 Android 实现滑动返回的几种方法总结
- android 面试之listview
- 放yy直播点赞动画
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 500 行代码写一个俄罗斯方块游戏
- k8s——资源限制
- k8s群集之动态扩缩容——HPA
- k8s群集的三种Web-UI界面部署
- Hive通过Jdbc连接HiveServer2
- SAP Spartacus OccCmsComponentAdapter的findComponentsByIds方法
- 分布式锁:二、Redis锁
- 面试官:kill -9 进程杀不掉,怎么办?
- SAP Spartacus的OccCmsPageNormalizer
- Redis性能指标监控!你知几何?
- Rust FFI 编程 - Bindgen 工具介绍
- synchronized的实现原理——锁膨胀过程
- 大点干!早点散----------rsync+inotify实现远程实时同步
- 听说MongoDB你很豪横?-------------MongoDB数据库基础详解
- 听说MongoDB你很豪横?-------------MongoDB 部署分片群集以及管理分片