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等)的更多相关文章

  1. Jsの练习-数组其他常用方法 -map() ,filter() ,every() ,some()

    map() :映射,对数组中的每一项运行给定函数,返回每次函数调用结果组成的函数. <!DOCTYPE html> <html lang="en"> < ...

  2. Js遍历数组总结

    Js遍历数组总结 遍历数组的主要方法为for.forEach.map.for in.for of for var arr = [1,2,3,4,5]; var n = arr.length; // 直 ...

  3. js,jQuery数组常用操作小结

    一.js中数组常用操作小结 (1) shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift() ...

  4. 【Javascript】JS遍历数组的三种方法:map、forEach、filter

    前言 近一段时间,因为项目原因,会经常在前端对数组进行遍历.处理,JS自带的遍历方法有很多种,往往不加留意,就可能导致知识混乱的现象,并且其中还存在一些坑.前端时间在ediary中总结了js原生自带的 ...

  5. js数组遍历(for in ,for of ,map,foreach,filter)的区别

    一.for in 和for of 的区别 1.for in 遍历数组时,索引实际上是字符串类型的数字,不能进行运算,我们来输出一下: let arr = [1,3,5,4] for (let inde ...

  6. JavaScript的使用以及JS常用函数(JS 遍历数组和集合)

    JavaScript入门 学习总结 1. 什么是 JavaScript 2. JavaScript 的特点 3. JS的使用 编写位置 基本语法 变量 打印变量 数据类型 innerHTML和inne ...

  7. javascript map forEach filter some every在购物车中的实战演练区分用法

    1.map forEach 1.map 循环遍历每一项,返回一个新的数组 例: 购物车商品小计: //购物车 var cart=[ {"id":101,"name&quo ...

  8. js 遍历数组

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  9. JS遍历数组类型元素

    已停供用户不能再次停供,之前没太处理过多维数组的遍历,趁这个机会回顾一下js数组遍历 可以看出rows 获取了两条数据,为二维数组类型 方法 function batchTgWin() { var r ...

随机推荐

  1. app原生和H5混合使用自动化

    1.从原生切换到H5需要 driver.switch_to.context('WEBVIEW_com.tencent.mm:tools') 2.参考连接: https://testerhome.com ...

  2. SkylineGlobe 7.0.1 & 7.0.2版本Web开发 如何实现土方量计算

    土方量计算,或者叫填挖方计算,体积计算,Skyline在很早的版本中就提供了这个的功能. 目前的软件版本,不仅仅可以对地形修改对象进行土方量计算,还可以在FLY工程中导入DEM数字高程模型数据,计算不 ...

  3. CentOS-常用安装

    JDK安装 1.检查jdk版本:java -version 2.检查jdk安装包:rpm -qa|grep java 3.将要安装的jdk的tar.gz包拖入,CRT快捷键ALT+P 4.解压到指定目 ...

  4. 安装软件the error code is 2203解决方法

    win10安装mysql5.7的时候弹出这个2203错误,记录一下. 解决方法: 按照下面路径,去掉只读解决了.

  5. 第一个Jsp页面,基于普元EOS

    跨界了.搞一下Jsp,实现MES系统看板一处.

  6. MySQL备份恢复-mysqldump原理

    +++++++++++++++++++++++++++++++++++++++++++标题:mysqldump对MySQL数据库备份恢复原理时间:2019年2月23日内容:mysqldump工具重点: ...

  7. HashMap底层

    写在前面: 频繁用到 hashcode() 和 equals() put(key, value): 先计算 key 的hashcode, 找到对应的bucket,如果这个bucket上面已有key-v ...

  8. 软工+C(3): 超链接

    // 上一篇:分数和checklist // 下一篇:Alpha/Beta换人 注:平常看文章,总有能和构建之法,软件工程相关的链接,增量记录,也可以通过在其他人博客的交流中使用相关的超链接,在使用中 ...

  9. vue.js实战——splice使用

    Vue在检测到数组变化时,并不是直接重新渲染整个列表,而是最大化地复用DOM元素.替换的数组中含有相同元素的项不会被重新渲染,因此可以大胆地用新数组来替换就数组,不用担心性能问题. 需要注意的是,以下 ...

  10. centos7之vsftp安装和使用

    日常用作中,我们常用的是windows的共享,但是我们都知道windows运行不稳定.原来我们用的是centos6.5上的vsftpd,最近决定把centos6.*上的服务都移植到centos7上,好 ...