JavaScript遍历数组的三种方法map、forEach与filter实例详解

本文实例讲述了JavaScript遍历数组的三种方法map、forEach与filter。分享给大家供大家参考,具体如下:

前言

近一段时间,因为项目原因,会经常在前端对数组进行遍历、处理,JS自带的遍历方法有很多种,往往不加留意,就可能导致知识混乱的现象,并且其中还存在一些坑。前端时间在ediary中总结了js原生自带的常用的对数组遍历处理的方法,分别为:map、forEach、filter,在讲解知识点的同时,会类比相识的函数进行对比,这样会有助于思考方法的利与弊。

一、Js自带的map()方法

1.方法概述

map()方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组

2.格式说明

var newArray = ["1","2","3"].map(fucntion(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);

二、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 $.eachfor 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);
})

三、Js自带的filter()方法

1.方法概述

filter()方法是对原数组进行过滤筛选,产生一个新的数组对象

2.注意事项

2.1 filter()不会对空数组进行检测(如果对空数组进行筛选,返回值位undefined)

2.2 filter()不会改变原始数组

2.3 返回数组,包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组

3.格式说明

forEach方法中的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 === 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.jb51.net/article/157032.htm
https://www.jb51.net/article/157040.htm
https://www.jb51.net/article/157052.htm
https://www.jb51.net/article/157053.htm

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

PS:这里再为大家推荐一款JS数组遍历方式分析对比工具供大家参考:

在线JS常见遍历方式性能分析比较工具:http://tools.jb51.net/aideddesign/js_bianli

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数组操作技巧总结》、《JavaScript遍历算法与技巧总结》、《javascript面向对象入门教程》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

时间: 2019-02-27

JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍

•原理: •高级浏览器支持forEach方法 语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: •forEach:用来遍历数组中的每一项:这个方法执行是没有返回值的,对原来数组也没有影响: •数组中有几项,那么传递进去的匿名回调函数就需要执行几次: •每一次执行匿名函数的时候,还给其传递了三个参数值:数组中的当前项item,当前项的索引index,原始数组input: •理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行

jQuery的Each比JS原生for循环性能慢很多的原因

其实查看jQuery的源代码,发现each的代码很简单,但为什么性能和原生的for循环相差几十倍呢? jQuery的each的核心代码 for (; i < length; i++) { value = callback.call(obj[i], i, obj[i]); if (value === false) { break; } } 看着很简单,但为什么会慢很多呢? 编写测试代码如下: var length=300000; function GetArr() { var t = []; fo

JavaScript中for-in遍历方式示例介绍

摘要:for-in遍历方式的循环计数器是字符串类型,遍历对象时为对象属性/方法名,遍历数组时为数组元素下标索引,与普通的for循环不同,for-in会将继承的属性/方法列出,这一点在使用时需要特别关注. 除了传统的for循环,JavaScript为遍历操作定义了for-in方式,根据数据源的不同,在使用时存在差异. (1)遍历对象: 复制代码 代码如下: var fish = { head : 1, tail : 1, } for(var prop in fish) { console.log(

js中的for如何实现foreach中的遍历

js中没有foreach这个关键字,但是可以用var v in array来实现遍历.但是需要注意的是, 拿到的是key而不是value.看例子: 复制代码 代码如下: <script type="text/javascript"> // 普通数组 var intArray = new Array(); intArray[0] = "第一个"; intArray[1] = "第二个"; for(var i = 0; i<intA

JS常用的几种数组遍历方式以及性能分析对比实例详解

本文实例讲述了JS常用的几种数组遍历方式以及性能分析对比.分享给大家供大家参考,具体如下: 前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得这种方式挺好的,于是抽取了核心逻辑,封装成了模板,打算拓展成一个系列,本文则是系列中的第二篇,JS数组遍历方式的分析对比 JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,fo

JavaScript forEach()遍历函数使用及介绍

forEach()函数从头到尾把数组遍历一遍.有三个参数分别是:数组元素,元素的索引,数组本身(如果是一个参数就是数组元素,也就是数组的值. var data=[1,2,3,4,5,6]; var sum=0; data.forEach(function(v){//其中的v就是数组的值 123456 sum+=v;}) document.write(sum+"<br>");//打印出来是21 data.forEach(function(o,p,q){//分别对应:数组元素,

JS数组的遍历方式for循环与for...in

JS数组的遍历方法有两种: 第一种:一般的for循环,例如: var a = new Array("first", "second", "third") for(var i = 0;i < a.length; i++) { document.write(a[i]+","); } 输出的结果:fitst,second,third 第一种:用for...in 这种遍历的方式,例如: var arr = new Array(&

javascript forEach通用循环遍历方法

复制代码 代码如下: var forEach = (function(){ //数组与伪数组的遍历 var _Array_forEach = function (array, block, context) { if (array == null) return; //对String进行特殊处理 if(typeof array == 'string'){ array = array.split(''); } var i = 0,length = array.length; for (;i < l

javascript for循环性能测试示例

本文实例讲述了javascript for循环性能测试.分享给大家供大家参考,具体如下: for循环,如何使用效率更高,下面举例来说明: // 先定义一个测试数组 var arr = [0,1,2,3,4,5,6,7,8,9]; // 执行测试 test1(); test2(); test3(); function test1(){ console.time('test1'); for(var i = 0; i < arr.length; i ++) { } console.timeEnd('t

JS 使用for循环遍历子节点查找元素

这篇文章主要介绍了JS 使用for循环配合数组遍历子节点查找元素 function nextChildNode(node,clazz,tagName){ var count= node.childElementCount; for(var i=0;i<count;i++){ if(node==undefined || node.children[i]==undefined){ continue; } if(clazz){ if(node.children[i].getAttribute('cla

javascript for循环设法提高性能

一般在javascript里对数组进行遍历一般是使用for循环,像下面一样 复制代码 代码如下: var arr = []; for(var i=0; i<arr.length; i++){ //loop } 这种代码最大的问题,就在于每次循环时都要通过 .操作符获取 .length,增加了开销.那么我们可以这样改进. 复制代码 代码如下: var arr = []; for(var i=0, n=arr.length; i<n; i++){ //loop } 这样子,先把 arr.lengt

JavaScript 总结几个提高性能知识点(推荐)

前段时间花时间看了大半的<High Performance JavaScript>这本书啊,然后就开始忙项目了,庆幸最忙的一周已经熬过去了.由于空不出时间,这个月写的学习笔记也不多,忙完最苦X的一周,这两天晚上也算是挑灯夜读了...终于是在残血之际将这本书shut down了... 既然读完了,总归是要学到些什么的.说说对这本书的看法先吧,整体的来说,内容还是不错的,就是感觉有点老了(作为前端小白,也可能是自身水平有限,未能体会到其中真意).看这本书的过程中也是写了挺多代码用以测试的,并且对本

JavaScript提高性能知识点汇总

一.针对js文件的加载位置 在HTML文件中,<script>标签是可以加在<head>区域和<body>区域的.这里鉴于JavaScript执行和UI渲染的单线程原因,如果js文件载入会阻塞后面对于页面的解析过程,页面会等到js文件完全加载并运行后才继续执行该做的操作.那么问题就来了,这样可能会出现页面空白or卡顿现象.作为一名前端开发,重要的不仅仅止于实现了需求,应该还有优质的用户体验.那么我们就需要消除用户枯燥的等待,针对这个问题,这里有本兽想到的两种解决方案:

Javascript 加载和执行-性能提高篇

Js的阻塞性 Javascript 在浏览器中的性能问题,可能是最重要的可用性问题 Js的阻塞性 浏览器用单一进程来处理UI进程和Js的执行 不管是内嵌的还是外链的,下载并立即执行 因为它有可能会修改页面 页面生存周期的概念 瀑布图中看到了下载时间和executing time 在head中加入script 和link body加载到前不会输出任何东西,因此会看到空白页面 复制代码 代码如下: <script type="text/javascript"> document

跟我学习javascript的循环

1.优先使用数组而不是Object类型来表示有顺序的集合 ECMAScript标准并没有规定对JavaScript的Object类型中的属性的存储顺序. 但是在使用for..in循环对Object中的属性进行遍历的时候,确实是需要依赖于某种顺序的.正因为ECMAScript没有对这个顺序进行明确地规范,所以每个JavaScript执行引擎都能够根据自身的特点进行实现,那么在不同的执行环境中就不能保证for..in循环的行为一致性了. 比如,以下代码在调用report方法时的结果就是不确定的: f

详解JavaScript for循环中发送AJAX请求问题

首先说,出现这个问题的场景是很少见的,因为有太多更好解决方法.今天搞ajax的时候,一个有趣的地方,,每个迭代中都要发送一个get请求,因为迭代的速度太快,一个请求还没有完成就进行下一个迭代,在chrome和ff上,除最后一个请求外,其它请求都被取消了.所以该怎么办呢?设置延时(不太好)还是其他办法?  办法有很多,比如设置休眠,迭代等等, 我采用的是另外两种解决办法.  一.同步的ajax请求,而ajax请求默认是异步的,所以要设置为false. function creatXMLHttpRe

javascript事件循环event loop的简单模型解释与应用分析

本文实例讲述了javascript事件循环event loop的简单模型解释与应用.分享给大家供大家参考,具体如下: js是单线程的,但是event loop的出现,使得js拥有可以处理高并发的性能.那么怎么理解event loop呢?网上百度一堆文章,什么heap,stack,micro queue,macro queue,让初学者直接懵掉.这里采用很通俗的理解方式介绍下event loop. event loop顾名思义是事件循环,既然是循环,那循环的是什么呢? 对于一个js文件, 1,执行

JavaScript for循环 if判断语句(学习笔记)

今天学习了JavaScript里面的for循环以及if的判断语句 for(初始值:循环条件:操作){ 满足条件要执行的代码语句 } 初始值:循环前的初始化变量,通常为赋值表达式:建议用var赋值,可以加快运行速度. 循环条件:每次循环前要计算的条件,是运算符类别中的条件运算符,返回值为true或false,当返回值为true时执行循环,为false时退出循环.(往往是i>=n;或用逻辑运算符) 操作:每循环一次以后要计算的表达式,通常是递增++或递减--等赋值表达式. for语句中的三个参数,第

浅谈JavaScript for循环 闭包

有个网友问了个问题,如下的html,为什么每次输出都是5,而不是点击每个p,就alert出对应的1,2,3,4,5. <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>闭包演示</title> <script type="text/javascript&quo