JS遍历数组的操作(map、forEach、filter等)
1、map的用法
定义:原数组被“映射”成对应新数组
代码示例:
var users = [
{name: "张含韵", "email": "zhang@email.com"},
{name: "江一燕", "email": "jiang@email.com"},
{name: "李小璐", "email": "li@email.com"}
]; var emails = users.map(user=> { return user.email; });
2、filter的用法
定义:过滤器
代码示例:
var devices = [];
var curList =[
{id:,name:""},
{id:,name:""},
{id:,name:""},
{id:,name:""}
]
var allList =[
{id:,name:"",title:"嘻嘻0"},
{id:,name:"",title:"嘻嘻1"},
{id:,name:"",title:"嘻嘻2"},
{id:,name:"",title:"嘻嘻3"},
{id:,name:"",title:"嘻嘻4"},
{id:,name:"",title:"嘻嘻5"}
]
allList.forEach(allItem =>{
var foo = curList.filter(curItem =>{return allItem.id == curItem.id})[];
//返回满足条件的数组[{id:*,name:"***",title:"****"}] ,取下标为0的值,即返回满足条件的对象
if(foo){
devices.push({productid:allItem.id, name:allItem.name,title:allItem.title});
}
})
console.log(devices)
filter内部函数判断是否满足条件,满足条件即返回该下标的值并集合成数组。
3、forEach的用法
定义:遍历
代码示例同上。
这是两者的结合使用。
当然上面示例的实现方式有点牵强,其实还有更简便和更好理解的实现方式。以下我就不一一赘述,仅记录用来自我总结和参照。
allList.forEach(allItem =>{
curList.forEach(curItem =>{
if(allItem.id == curItem.id){
devices.push({productid:allItem.id, name:allItem.name,title:allItem.title});
}
})
})
console.log(devices)
}
这样的实现方式也可以提取和组合相同的部分。
JS遍历数组的操作(map、forEach、filter等)的更多相关文章
- Jsの练习-数组其他常用方法 -map() ,filter() ,every() ,some()
map() :映射,对数组中的每一项运行给定函数,返回每次函数调用结果组成的函数. <!DOCTYPE html> <html lang="en"> < ...
- Js遍历数组总结
Js遍历数组总结 遍历数组的主要方法为for.forEach.map.for in.for of for var arr = [1,2,3,4,5]; var n = arr.length; // 直 ...
- js,jQuery数组常用操作小结
一.js中数组常用操作小结 (1) shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift() ...
- 【Javascript】JS遍历数组的三种方法:map、forEach、filter
前言 近一段时间,因为项目原因,会经常在前端对数组进行遍历.处理,JS自带的遍历方法有很多种,往往不加留意,就可能导致知识混乱的现象,并且其中还存在一些坑.前端时间在ediary中总结了js原生自带的 ...
- js数组遍历(for in ,for of ,map,foreach,filter)的区别
一.for in 和for of 的区别 1.for in 遍历数组时,索引实际上是字符串类型的数字,不能进行运算,我们来输出一下: let arr = [1,3,5,4] for (let inde ...
- JavaScript的使用以及JS常用函数(JS 遍历数组和集合)
JavaScript入门 学习总结 1. 什么是 JavaScript 2. JavaScript 的特点 3. JS的使用 编写位置 基本语法 变量 打印变量 数据类型 innerHTML和inne ...
- javascript map forEach filter some every在购物车中的实战演练区分用法
1.map forEach 1.map 循环遍历每一项,返回一个新的数组 例: 购物车商品小计: //购物车 var cart=[ {"id":101,"name&quo ...
- js 遍历数组
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
- JS遍历数组类型元素
已停供用户不能再次停供,之前没太处理过多维数组的遍历,趁这个机会回顾一下js数组遍历 可以看出rows 获取了两条数据,为二维数组类型 方法 function batchTgWin() { var r ...
随机推荐
- app原生和H5混合使用自动化
1.从原生切换到H5需要 driver.switch_to.context('WEBVIEW_com.tencent.mm:tools') 2.参考连接: https://testerhome.com ...
- SkylineGlobe 7.0.1 & 7.0.2版本Web开发 如何实现土方量计算
土方量计算,或者叫填挖方计算,体积计算,Skyline在很早的版本中就提供了这个的功能. 目前的软件版本,不仅仅可以对地形修改对象进行土方量计算,还可以在FLY工程中导入DEM数字高程模型数据,计算不 ...
- CentOS-常用安装
JDK安装 1.检查jdk版本:java -version 2.检查jdk安装包:rpm -qa|grep java 3.将要安装的jdk的tar.gz包拖入,CRT快捷键ALT+P 4.解压到指定目 ...
- 安装软件the error code is 2203解决方法
win10安装mysql5.7的时候弹出这个2203错误,记录一下. 解决方法: 按照下面路径,去掉只读解决了.
- 第一个Jsp页面,基于普元EOS
跨界了.搞一下Jsp,实现MES系统看板一处.
- MySQL备份恢复-mysqldump原理
+++++++++++++++++++++++++++++++++++++++++++标题:mysqldump对MySQL数据库备份恢复原理时间:2019年2月23日内容:mysqldump工具重点: ...
- HashMap底层
写在前面: 频繁用到 hashcode() 和 equals() put(key, value): 先计算 key 的hashcode, 找到对应的bucket,如果这个bucket上面已有key-v ...
- 软工+C(3): 超链接
// 上一篇:分数和checklist // 下一篇:Alpha/Beta换人 注:平常看文章,总有能和构建之法,软件工程相关的链接,增量记录,也可以通过在其他人博客的交流中使用相关的超链接,在使用中 ...
- vue.js实战——splice使用
Vue在检测到数组变化时,并不是直接重新渲染整个列表,而是最大化地复用DOM元素.替换的数组中含有相同元素的项不会被重新渲染,因此可以大胆地用新数组来替换就数组,不用担心性能问题. 需要注意的是,以下 ...
- centos7之vsftp安装和使用
日常用作中,我们常用的是windows的共享,但是我们都知道windows运行不稳定.原来我们用的是centos6.5上的vsftpd,最近决定把centos6.*上的服务都移植到centos7上,好 ...