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 ...
随机推荐
- 基于SVM的鸢尾花数据集分类实现[使用Matlab]
iris数据集的中文名是安德森鸢尾花卉数据集,英文全称是Anderson’s Iris data set.iris包含150个样本,对应数据集的每行数据.每行数据包含每个样本的四个特征和样本的类别信息 ...
- Zabbix 3.4.7调整监控阈值以及告警级别
1.找到需要监控的主机:右上角进行搜索 我们要更改sepm02p的阈值和级别: 进行更改级别:先点击Triggers , 选中要更改的监控项,例如我要更改CPU,点击以下红色标出的,千万不要选择Tem ...
- SQL 和 NoSQL 的区别
一.概念 SQL (Structured Query Language) 数据库,指关系型数据库.主要代表:SQL Server,Oracle,MySQL(开源),PostgreSQL(开源). No ...
- java获取类加载路径和项目根路径的5种方法
// 第一种:获取类加载的根路径 D:\IDEAWorkspace\hs-bluetooth-lock\src\applications\bluetooth-api\target\classes Fi ...
- 27 python 初学(信号量、条件变量、同步条件、队列)
参考博客: www.cnblogs.com/yuanchenqi/articles/5733873.html semaphore 信号量: condition 条件变量: event 同步条件:条件 ...
- let声明
<script> /** * es6 let 练习 * 生效范围:块级代码代码内. */ // { // let a=2; // var c=2; // } // console.log( ...
- python小白——进阶之路——day3天-———运算符
(1)算数运算符: + - * / // % ** (2)比较运算符: > < >= <= == != (3)赋值运算符: = += -= *= /= //= %= ** ...
- 用es6类封装的图片预加载技术!
1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 在QT中使用C/C++, 在linux下生成 .so, 并调用 .so
时间不早了, 先下班了... 明天再写..
- js01-javascript语法标准和数据类型
语法规则 (1)JavaScript对换行.缩进.空格不敏感. 备注:每一条语句末尾要加上分号,虽然分号不是必须加的,但是为了程序今后要压缩,如果不加分号,压缩之后将不能运行. (2)所有的符号,都是 ...