JS遍历数组的操作(map、forEach、filter等)
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等)的更多相关文章
- Jsの练习-数组其他常用方法 -map() ,filter() ,every() ,some()
map() :映射,对数组中的每一项运行给定函数,返回每次函数调用结果组成的函数. <!DOCTYPE html> <html lang="en"> < ...
- Js遍历数组总结
Js遍历数组总结 遍历数组的主要方法为for.forEach.map.for in.for of for var arr = [1,2,3,4,5]; var n = arr.length; // 直 ...
- js,jQuery数组常用操作小结
一.js中数组常用操作小结 (1) shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift() ...
- 【Javascript】JS遍历数组的三种方法:map、forEach、filter
前言 近一段时间,因为项目原因,会经常在前端对数组进行遍历.处理,JS自带的遍历方法有很多种,往往不加留意,就可能导致知识混乱的现象,并且其中还存在一些坑.前端时间在ediary中总结了js原生自带的 ...
- js数组遍历(for in ,for of ,map,foreach,filter)的区别
一.for in 和for of 的区别 1.for in 遍历数组时,索引实际上是字符串类型的数字,不能进行运算,我们来输出一下: let arr = [1,3,5,4] for (let inde ...
- JavaScript的使用以及JS常用函数(JS 遍历数组和集合)
JavaScript入门 学习总结 1. 什么是 JavaScript 2. JavaScript 的特点 3. JS的使用 编写位置 基本语法 变量 打印变量 数据类型 innerHTML和inne ...
- javascript map forEach filter some every在购物车中的实战演练区分用法
1.map forEach 1.map 循环遍历每一项,返回一个新的数组 例: 购物车商品小计: //购物车 var cart=[ {"id":101,"name&quo ...
- js 遍历数组
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
- JS遍历数组类型元素
已停供用户不能再次停供,之前没太处理过多维数组的遍历,趁这个机会回顾一下js数组遍历 可以看出rows 获取了两条数据,为二维数组类型 方法 function batchTgWin() { var r ...
随机推荐
- 微信小程序设置域名、不校验域名
设置--项目设置 将不校验域名勾上就可以了,不再校验域名了通过 url: 'https://localhost:8443/spring4/user/list.do',就可以访问后台了. 若要配置域名则 ...
- python之面相对象进阶
一 isinstance(obj,cls)和issubclass(sub,super) isinstance(obj,cls)检查是否obj是否是类 cls 的对象 class Foo(object) ...
- 详解Linux双网卡绑定之bond0
1.什么是bond? 网卡bond是通过多张网卡绑定为一个逻辑网卡,实现本地网卡的冗余,带宽扩容和负载均衡,在生产场景中是一种常用的技术.Kernels 2.4.12及以后的版本均供bonding模块 ...
- Nginx(三)------nginx 反向代理
Nginx 服务器的反向代理服务是其最常用的重要功能,由反向代理服务也可以衍生出很多与此相关的 Nginx 服务器重要功能,比如后面会介绍的负载均衡.本篇博客我们会先介绍 Nginx 的反向代理,当然 ...
- iOS开发基础篇-Button基础
一.简单介绍 UIButton 的功能:响应用户操作.显示文字.显示图片.调整内部图片和文字的位置. 二. UIButton 的状态 UIControlStateNormal :普通状态,为默认情 ...
- Equinox OSGi应用嵌入Jersey框架搭建REST服务
原文地址:https://www.cnblogs.com/kira2will/p/5040264.html 一.环境 eclipse版本:eclipse-luna 4.4 jre版本:1.8 二.Eq ...
- 关于childNodes的删除
在使用childNodes时,发现需要删除的元素多于1时,会出现无法全部删除的情况.谷歌以后发现,该属性返回的子节点集合是实时更新的,也就是说,在for循环中,当删除第一个子节点之后,第二次删除的是原 ...
- PHP artisan migrate 报错显示 could not find driver ,怎么办?
记录下自己的错误 一. 1.原因是没有pdo扩展导致的, 2.解决办法:打开php.ini,然后去掉以下两行代码之前的分号(:)即可.如下: extension=php_pdo_firebird.dl ...
- Python可变参数*和**
可变参数 在Python函数中,还可以定义可变参数.顾名思义,可变参数就是传入的参数个数是可变的,可以是1个.2个到任意个,还可以是0个. 我们以数学题为例子,给定一组数字a,b,c……,请计算a2 ...
- Tomcat连接 ideal
一.为了建立Servlet,我们需要先将Tomact连接到ideal! <%-- Created by IntelliJ IDEA. User: Administrator Date: 2019 ...