【Javascript】JS遍历数组的三种方法:map、forEach、filter
前言
近一段时间,因为项目原因,会经常在前端对数组进行遍历、处理,JS自带的遍历方法有很多种,往往不加留意,就可能导致知识混乱的现象,并且其中还存在一些坑。前端时间在ediary中总结了js原生自带的常用的对数组遍历处理的方法,分别为:map、forEach、filter,在讲解知识点的同时,会类比相识的函数进行对比,这样会有助于思考方法的利与弊。
******************************************************************************************
<1>、Js自带的map()方法
******************************************************************************************
1.方法概述
map()方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组
2.格式说明
var newArray = ["1","2","3"].map(function(e,i,arr){return parseInt(e,10)})
map中回调函数中的第一个参数为:当前正在遍历的元素
map中回调函数中的第一个参数为:当前元素索引
map中回调函数中的第一个参数为:原数组本身
3.使用说明
3.1 支持return返回值;
3.2 return是啥,相当于把数组中的这一项变为啥(并不影响原来的数组,只是相当于把原数组克隆一份,把克隆的这一份数组中的对应项改变了)
3.3 map只能对元素进行加工处理,产生一个新的数组对象。而不能用它来进行筛选(筛选用filter),为什么不能,看个例子就知道了:
4.例子
4.1 在字符串中使用
在一个String上使用map方法获取字符串中每个字符所对应的ASCII码组成的数组
var map = Array.prototype.map
var a = map.call("Hello World", function(e){return e.charCodeAt(0);})
// a的值为[72,101,108,108,111,32,87,111,114,108,100]
5.易犯错的点
5.1 很多时候,map给回调函数传的是一个值,但是也有可能传2个、3个值,例如下面的例子
var map = Array.prototype.map
var a = map.call("Hello World", function(e){return e.charCodeAt(0);})
// a的值为[72,101,108,108,111,32,87,111,114,108,100]
为什么会这样,因为parseInt就是一个函数,它就是作为map的一个回调函数,parseInt接收两个参数,一个是String,一个是进制
上面的函数就可以化为:
["1","2","3"].map(parseInt(string, radix));
即
["1","2","3"].map(function(string, radix){return parseInt(string, radix)})
// 所以才返回结果为:[1, NaN, NaN]
6.与map相关
6.1 Map对象
es6提供一个对象Map,看看这个Map建的对象到底是啥东西
它是一个对象,size是它的属性,里面的值封装在[[Entries]]这个数组里面
myMap.set(1, "a"); // 相当于java的map.put();
myMap.set(2, "b");
myMap.set(3, "c");
myMap.size();
myMap.get(1);
myMap.get(2);
myMap.get(3);
********************************************************************************************
<2>、Js自带的forEach()方法
********************************************************************************************
1.方法概述
forEach()方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组
2.格式说明
forEach方法中的function回调有三个参数,
第一个参数为:当前正在遍历的元素
第二个参数为:当前元素索引
第三个参数为:原数组本身
[].forEach(function(value, index, array))
3.使用说明
3.1 这个方法没有返回值,仅仅是遍历数组中的每一项,不对原来数组进行修改
但是可以自己通过数组索引来修改原来的数组
3.2 forEach()不能遍历对象,可以使用for in
4.缺点
4.1 您不能使用break语句中断循环,也不能使用return语句返回到外层函数
4.2 ES5推出的,实际性能比for还弱
5.例子
5.1 通过数组索引改变原数组
var obj = [1,2,3,4,5,6]
var res = obj.forEach(function(item, index, arr) {
arr[index] = item * 10;
})
console.log(res); // --> undefined
console.log(obj); // --> [10,20,30,40,50,60]
5.2 如果数组在迭代的时候被修改,则当前元素与前面的元素会跳过。因为forEach()不会在迭代之前创建数组的副本
var words = ['1', '2', '3', '4'];
words.forEach(function(word) {
console.log(word);
if (word === '2') {
words.shift();
}
});
// 1
// 2
// 4
6. 与forEach相关
6.1 $.each 与 for in
可遍历数组,可遍历对象
// 6.1.1遍历数组
var arr = [1,2,3,4,5]
var res = $.each(arr, function(index, value){
console.log(index, value);
})
console.log(res); // 返回值,被遍历的函数
// 6.1.2遍历对象
var obj = {name: "psg", age: 22, gender: "male"};
// for in 遍历
for(var key in obj) {
console.log(key, obj[key]);
}
// $.each 遍历
$.each(obj, function(key, value) {
console.log(key, value);
})
********************************************************************************************
<3>、Js自带的filter()方法
********************************************************************************************
1.方法概述
filter()方法是对原数组进行过滤筛选,产生一个新的数组对象
2.注意事项
2.1 filter()不会对空数组进行检测(如果对空数组进行筛选,返回值位undefined)
2.2 filter()不会改变原始数组
2.3 返回数组,包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组
3.格式说明
filter方法中的function回调有三个参数,
第一个参数为:当前正在遍历的元素
第二个参数为:当前元素索引
第三个参数为:原数组本身
[].filter(function(value, index, array), thisValue)
4.例子
4.1 在一个Array中,删除偶数,只保留奇数
var arr = [1, 2, 3, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function(x) {
return x % 2 !== 0;
});
r; // [1,3,5,9,15]
4.2 把一个Array中的空字符串删掉
var arr = ['A', '', 'B', null, undefined, 'C', ' '];
var r = arr.filter(function(e) {
return s && s.trim(); // 注意:IE9一下的版本没有trim()方法
});
r; // ['A', 'B', 'C']
4.3 巧妙去除Array的重复元素
var r, arr = ['A', 'B', 'C', 'D', 'B', 'A']
r = arr.filter(function(e, i, self) {
return self.indexOf(e) === i;
})
console.log(r); // --> ['A', 'B', 'C', 'D']
4.4 筛选素数
function get_primes(arr) {
var i;
return arr.filter(function (element) {
var flag = true;
if (element < 2) {
flag = false;
} else {
for (var i = 2; i < element; i++) {
if (element % i == 0) {
flag = false;
break;
}
}
}
return flag;
})
}
参考博客:
https://www.cnblogs.com/liuruyi/p/6483526.html
https://www.cnblogs.com/leaf930814/p/6667011.html
https://blog.csdn.net/weixin_38098192/article/details/80743719
https://www.cnblogs.com/cjx-work/p/8052865.html
【Javascript】JS遍历数组的三种方法:map、forEach、filter的更多相关文章
- JS创建数组的三种方法
1 常规方式 创建数组并给数组元素赋值 var myCars = new Array(); myCars[0] = "Saab"; myCars[1] = "Vo ...
- javascript生成新标签的三种方法
javascript生成新标签的三种方法:http://www.cnblogs.com/online-link/p/6062423.html
- PHP遍历数组的几种方法
这三种方法中效率最高的是使用foreach语句遍历数组.从PHP4开始就引入了foreach结构,是PHP中专门为遍历数组而设计的语句,推荐大家使用.先分别介绍这几种方法 PHP中遍历数组 ...
- (PASS)JAVA数组去重 三种方法 (不用集合)
第一种方法(只学到数组的看): 定义一个新的数组长度和旧数组的长度一样,存储除去重复数据的旧数组的数据和0, package demo01; import java.sql.Array; import ...
- JavaScript中遍历数组和对象的方法
js数组遍历和对象遍历 针对js各种遍历作一个总结分析,从类型用处,分析数组和对象各种遍历使用场景,优缺点等 JS数组遍历: 1,普通for循环,经常用的数组遍历 var arr = [1,2,0,3 ...
- Node.js写文件的三种方法
Node.js写文件的三种方式: 1.通过管道流写文件 采用管道传输二进制流,可以实现自动管理流,可写流不必当心可读流流的过快而崩溃,适合大小文件传输(推荐) var readStream = fs. ...
- javascript 获取html元素的三种方法
操作HTML元素 你首先找到该元素. 三种方法来做这件事: 通过id找到HTML元素 通过标签名找到HTML元素 通过类名找到HTML元素 通过id查找HTML元素 在DOM中查找HTML元素的最简单 ...
- JS 判断数据类型的三种方法
说到数据类型,我们先理一下JavaScript中常见的几种数据类型: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Functi ...
- C#中遍历ArrayList的三种方法
using System; using System.Collections; using System.Linq; using System.Text; namespace ArrayListDem ...
随机推荐
- Java线程与Linux内核线程的映射关系
Linux从内核2.6开始使用NPTL (Native POSIX Thread Library)支持,但这时线程本质上还轻量级进程. Java里的线程是由JVM来管理的,它如何对应到操作系统的线程是 ...
- GraphQL 入门介绍
写在前面 GraphQL是一种新的API标准,它提供了一种更高效.强大和灵活的数据提供方式.它是由Facebook开发和开源,目前由来自世界各地的大公司和个人维护.GraphQL本质上是一种基于api ...
- 程序设计语言——实践之路 笔记:Beginning
这本书已经看了不下3遍了,计划在6月写完1,3,6,7,8,9章的笔记. 为什么要写笔记呢,我觉得有这么几个必要: 1.一个概念的首次提出与补充会跨越几个章节,整理在一起有助记忆 2.所有书籍的安排都 ...
- 蚂蚁通讯框架SOFABolt之私有通讯协议设计
前言 SOFABolt 是蚂蚁金融服务集团开发的一套基于 Netty 实现的网络通信框架. 为了让 Java 程序员能将更多的精力放在基于网络通信的业务逻辑实现上,而不是过多的纠结于网络底层 NIO ...
- (leetcode:选择不相邻元素,求和最大问题):打家劫舍(DP:198/213/337)
题型:从数组中选择不相邻元素,求和最大 (1)对于数组中的每个元素,都存在两种可能性:(1)选择(2)不选择,所以对于这类问题,暴力方法(递归思路)的时间复杂度为:O(2^n): (2)递归思路中往往 ...
- VulDeePecker:基于深度学习的脆弱性检测系统
最近的两款软件,VUDDY和VulPecker,假阴性率高而假阳性率低,用于检测由代码克隆引发的漏洞.而如果用于非代码克隆引起的漏洞则会出现高误报率. 本文使用深度学习处理程序中的代码片段,不应由专家 ...
- 在MySQL中实现Rank高级排名函数【转】
MySQL中没有Rank排名函数,当我们需要查询排名时,只能使用MySQL数据库中的基本查询语句来查询普通排名.尽管如此,可不要小瞧基础而简单的查询语句,我们可以利用其来达到Rank函数一样的高级排名 ...
- 如何通过免费开源ERP Odoo建立你的团队, 销售过程和目标
这种快速的一步一步的指南将引导您完成Odoo CRM, 帮助您轻松处理您的销售渠道, 时刻从线索到客户管理您的销售渠道. 配置 从 Odoo初始化后,生成你的数据库, 选择CRM 作为第一个app安装 ...
- Android SQLite 数据库学习
SQLite 数据库简介 SQLite 是一个轻量级数据库,它是D. Richard Hipp建立的公有领域项目,在2000年发布了第一个版本.它的设计目标是嵌入式的,而且占用资源非常低,在内存中只需 ...
- SqlServer中的系统数据库
SqlServer中的系统数据库有五个,平时写代码不太关注,今天一时兴起研究了一下. 1. master 记录SQL Server系统的所有系统级信息,例如:登陆账户信息.链接服务器和系统配置设置.记 ...