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


Posted in Javascript onFebruary 27, 2019

本文实例讲述了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;
  })
}

参考:

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

Javascript 相关文章推荐
javascript import css实例代码
Jul 18 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
JavaScript中this详解
Sep 01 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
深究AngularJS之ui-router详解
Jun 13 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
javascript中Set、Map、WeakSet、WeakMap区别
Dec 24 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 #Javascript
JavaScript中filter的用法实例分析
Feb 27 #Javascript
jQuery中each和js中forEach的区别分析
Feb 27 #jQuery
简单了解node npm cnpm的具体使用方法
Feb 27 #Javascript
js中对象与对象创建方法的各种方法
Feb 27 #Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 #Javascript
react的滑动图片验证码组件的示例代码
Feb 27 #Javascript
You might like
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
php中stream(流)的用法
2014/03/25 PHP
PHP模块memcached使用指南
2014/12/08 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
Javascript 学习笔记 错误处理
2009/07/30 Javascript
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
js微信支付实现代码
2016/12/22 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
工程管理专业个人求职信范文
2013/12/07 职场文书
销售演讲稿范文
2014/01/08 职场文书
《飞向蓝天的恐龙》教学反思
2014/04/09 职场文书
优秀教师单行材料
2014/12/16 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
企业年会祝酒词
2015/08/11 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书