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. 【转】Vue.js中 watch 的高级用法

    假设有如下代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type=&q ...

  2. html5 contenteditable 实现table可编辑(网页版EXCEL)

    一直想找一个免费的网页版的EXCEL插件,以便于多人共同在线编辑,始终没发现合适的. 其实自己实现类似功能也不难.参考:https://blog.csdn.net/chadcao/article/de ...

  3. Python 隔离环境 virtualenv

    1) 安装 $ sudo pip3 install virtualenv 2) 创建并进入工程目录,例如 myproject $ mkdir myproject $ cd myproject 3) 在 ...

  4. exgcd

    int exgcd(int a,int b,int &x,int &y){ if (b==0){ x=1,y=0; return a; } int d=exgcd(b,a%b,y,x) ...

  5. warn_alloc():page allocation failure问题分析

    关键词:warn_alloc().__GFP_XXX.order.CMA等等. 在内存申请的时候经常会遇到类似“ xxx: page allocation failure: order:10...”类 ...

  6. C# PDF转Image图片

    概述 PDF是常用的文件格式之一,通常情况下,我们可以使用itextsharp生产PDF文件:可是如何将PDF文件转换成图片那?目前常用的: 思路1.根据PDF绘画轨迹重新绘制图片: 思路2.是将PD ...

  7. 小程序——阿里服务器配置https及什么是IIS

    1.申请域名:阿里云 2.免费开启SSL证书:管理=>免费开启SSL证书>单域名>dev.xxx.top 3.配置服务器:下载=>IIS7证书 *注册一个域名,可以免费开启一个 ...

  8. Minieye杯第十五届华中科技大学程序设计邀请赛网络赛D Grid(简单构造)

    链接:https://ac.nowcoder.com/acm/contest/560/D来源:牛客网 题目描述 Give you a rectangular gird which is h cells ...

  9. JQ面向对象的放大镜

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

  10. static:get()什么意思

    在类里面static关键词相当于self关键词