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. 【入门】Spring-Boot项目配置Mysql数据库

    前言 前面参照SpringBoot官网,自动生成了简单项目点击打开链接 配置数据库和代码遇到的问题 问题1:cannot load driver class :com.mysql.jdbc.Drive ...

  2. Editplus5.0 注册码

    EditPlus5.0注册码 注册名 Vovan 注册码 3AG46-JJ48E-CEACC-8E6EW-ECUAW EditPlus3.x注册码 注册名 linzhihui 注册码 5A2B6-69 ...

  3. Linux内存管理 (11)page引用计数

    专题:Linux内存管理专题 关键词:struct page._count._mapcount.PG_locked/PG_referenced/PG_active/PG_dirty等. Linux的内 ...

  4. Jmeter名词注解

    取值 ${ip}排除 .*\.js .*\.css .*\.png .*\.gif .*\.msp .*\.js 提取值 (.+?) (.*?)[() 括起来的部分就是需要提取的,对于你要提的内容需要 ...

  5. SQLserver查询库中包含某个字段的表

    select [name] from [TPMS_PRD].[dbo].sysobjects where id in(select id from [TPMS_PRD].[dbo].syscolumn ...

  6. SpringCloud(9)使用Spring Cloud OAuth2保护微服务系统

    一.简介 OAth2是一个标准的授权协议. 在认证与授权的过程中,主要包含以下3种角色. 服务提供方 Authorization Server. 资源持有者 Resource Server. 客户端 ...

  7. SpringCloud(5)路由网关Spring Cloud Zuul

    一个简单的微服务系统如下图: 1.为什么需要Zuul Zuul很容易实现 负载均衡.智能路由 和 熔断器,可以做身份认证和权限认证,可以实现监控,在高流量状态下,对服务进行降级. 2.路由网关 继续前 ...

  8. 572. Subtree of Another Tree(easy)

    Given two non-empty binary trees s and t, check whether tree t has exactly the same structure and no ...

  9. 将nginx永久加入到系统环境变量

    php,mysql的永久方法跟这个一样   下来配置环境变量 在/etc/profile 中加入: export NGINX_HOME=/usr/local/nginxexport PATH=$PAT ...

  10. Java语法----Java中equals和==的区别

    [正文] 平时在学Android和Java语言的时候,总是碰到“equals”和“==”这两个字符,老感觉差不多:其实还是有一些区别的,今天干脆把它们彻底弄清楚. 一.java当中的数据类型和“==” ...