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 ...
随机推荐
- windows 下mysq安装之后的数据恢复案例
1.进入mysql的安装目录 cd C:\Java\mysql--winx64\bin 2.以默认的账号root,无密码登录mysql默认数据库 mysql -u root mysql 3.查询表us ...
- python之yagmail模块--小白博客
yagmail 实现发邮件 yagmail 可以简单的来实现自动发邮件功能. 安装 pip install yagmail 简单例子 import yagmail #链接邮箱服务器 yag = yag ...
- MySQL中的float和decimal类型有什么区别
decimal 类型可以精确地表示非常大或非常精确的小数.大至 1028(正或负)以及有效位数多达 28 位的数字可以作为 decimal类型存储而不失其精确性.该类型对于必须避免舍入错误的应用程序( ...
- vue.js实战——方法设置默认参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Shell命令-文件及内容处理之cat、tac
文件及内容处理 - cat.tac 1. cat:显示文件内容 cat命令的功能说明 cat命令用于连接多个文件并且打印到屏幕输出或重定向到指定文件中 cat命令的语法格式 cat [OPTION]. ...
- Vue CLI 3使用:浏览器兼容性
package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件),指定了项目的目标浏览器的范围.这个值会被 @babel/preset-env ...
- 利用JDBC工具类 模拟用户登录!
一.建库 设置 id为主键并自增! 二.定义登录接口 package com.aaa.dao; public interface IDengDao { /* 1.定义一个登陆的接口,参数是name 和 ...
- poj-3281(拆点+最大流)
题意:有n头牛,f种食物,d种饮料,每头牛有自己喜欢的食物和饮料,问你最多能够几头牛搭配好,每种食物或者饮料只能一头牛享用: 解题思路:把牛拆点,因为流过牛的流量是由限制的,只能为1,然后,食物和牛的 ...
- POJ 3974 Palindrome (算竞进阶习题)
hash + 二分答案 数据范围肯定不能暴力,所以考虑哈希. 把前缀和后缀都哈希过之后,扫描一边字符串,对每个字符串二分枚举回文串长度,注意要分奇数和偶数 #include <iostream& ...
- 守护进程(Daemon)
守护进程的概念 守护进程(Daemon)一般是为了保护我们的程序/服务的正常运行,当程序被关闭.异常退出等时再次启动程序/恢复服务. 例如 http 服务的守护进程叫 httpd,mysql 服务的守 ...