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. Docker(3):Dockerfile配置详解

    FROM  : 指定base镜像 MAINTAINER :设置镜像的作者,可以是任意的字符串 COPY :将文件从build context 复制到镜像   COPY 支持两种形式:COPY src ...

  2. vmware centos7 minimal 配置共享文件夹

    使用的是VMware安装CentOS7 minimal版,系统镜像是CentOS-7-x86_64-DVD-1708.iso. 宿主机系统为win10,CentOS7 minimal过程省略,可参考h ...

  3. 在Unity使文字变色

    using UnityEngine;using System.Collections;using UnityEngine.UI; public class ShipIntro : MonoBehavi ...

  4. Golang 入门系列(九) 如何读取YAML,JSON,INI等配置文件

    实际项目中,读取相关的系统配置文件是很常见的事情.今天就来说一说,Golang 是如何读取YAML,JSON,INI等配置文件的. 1. json使用 JSON 应该比较熟悉,它是一种轻量级的数据交换 ...

  5. 03-JavaScript之数据类型

    JavaScript之数据类型 1.介绍 JavaScript数据类型分为两类:原始类型(primitive type)和对象类型(object type) 2.原始类型 数字 - number.字符 ...

  6. python 支付宝SDK

    python 支付宝SDK代码如下 from datetime import datetime from Crypto.PublicKey import RSA from Crypto.Signatu ...

  7. NOIP2002普及组复赛B 选数

    题目链接:https://ac.nowcoder.com/acm/contest/230/B 题目大意: 略 分析: DFS模板题. 代码如下: #include <bits/stdc++.h& ...

  8. Python进阶2---树的遍历和堆排序

    二叉树的遍历 堆排序Heap Sort 堆排序的过程 完整过程: #打印完整的二叉树 import math #打印完全二叉树,此函数非必要只是为了显示便利! def print_tree(lst): ...

  9. [BZOJ 4818] [SDOI 2017] 序列计数

    Description Alice想要得到一个长度为 \(n\) 的序列,序列中的数都是不超过 \(m\) 的正整数,而且这 \(n\) 个数的和是 \(p\) 的倍数. Alice还希望,这 \(n ...

  10. Day 3 下午

    依旧是组合数问题 先来看一道题 如图,一个n*m的方格中,从原点开始,每次只能向上走或者向右走,求走到点(n,m)共有多少种走法 一般做法: 一个一个写,每一个节点的种数=它左边的数量+右边的数量 显 ...