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. 微信小程序设置域名、不校验域名

    设置--项目设置 将不校验域名勾上就可以了,不再校验域名了通过 url: 'https://localhost:8443/spring4/user/list.do',就可以访问后台了. 若要配置域名则 ...

  2. python之面相对象进阶

    一 isinstance(obj,cls)和issubclass(sub,super) isinstance(obj,cls)检查是否obj是否是类 cls 的对象 class Foo(object) ...

  3. 详解Linux双网卡绑定之bond0

    1.什么是bond? 网卡bond是通过多张网卡绑定为一个逻辑网卡,实现本地网卡的冗余,带宽扩容和负载均衡,在生产场景中是一种常用的技术.Kernels 2.4.12及以后的版本均供bonding模块 ...

  4. Nginx(三)------nginx 反向代理

    Nginx 服务器的反向代理服务是其最常用的重要功能,由反向代理服务也可以衍生出很多与此相关的 Nginx 服务器重要功能,比如后面会介绍的负载均衡.本篇博客我们会先介绍 Nginx 的反向代理,当然 ...

  5. iOS开发基础篇-Button基础

    一.简单介绍  UIButton 的功能:响应用户操作.显示文字.显示图片.调整内部图片和文字的位置. 二. UIButton 的状态  UIControlStateNormal :普通状态,为默认情 ...

  6. Equinox OSGi应用嵌入Jersey框架搭建REST服务

    原文地址:https://www.cnblogs.com/kira2will/p/5040264.html 一.环境 eclipse版本:eclipse-luna 4.4 jre版本:1.8 二.Eq ...

  7. 关于childNodes的删除

    在使用childNodes时,发现需要删除的元素多于1时,会出现无法全部删除的情况.谷歌以后发现,该属性返回的子节点集合是实时更新的,也就是说,在for循环中,当删除第一个子节点之后,第二次删除的是原 ...

  8. PHP artisan migrate 报错显示 could not find driver ,怎么办?

    记录下自己的错误 一. 1.原因是没有pdo扩展导致的, 2.解决办法:打开php.ini,然后去掉以下两行代码之前的分号(:)即可.如下: extension=php_pdo_firebird.dl ...

  9. Python可变参数*和**

    可变参数 在Python函数中,还可以定义可变参数.顾名思义,可变参数就是传入的参数个数是可变的,可以是1个.2个到任意个,还可以是0个. 我们以数学题为例子,给定一组数字a,b,c……,请计算a2 ...

  10. Tomcat连接 ideal

    一.为了建立Servlet,我们需要先将Tomact连接到ideal! <%-- Created by IntelliJ IDEA. User: Administrator Date: 2019 ...