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 相关文章推荐
取选中的radio的值
Jan 11 Javascript
JavaScript 题型问答有答案参考
Feb 17 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 Javascript
什么是SOLID
Mar 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数据库抽象层 PDO
2011/05/07 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
php给图片加文字水印
2015/07/31 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
Node.js进阶之核心模块https入门
2018/05/23 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
[41:08]TNC vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
python lxml中etree的简单应用
2019/05/10 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
中专生自我鉴定范文
2014/02/02 职场文书
总经理助理职责
2014/02/04 职场文书
销售人员工作自我评价
2014/09/21 职场文书
个人合伙协议书范本
2014/10/14 职场文书
工作收入住址证明
2014/10/28 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
golang import自定义包方式
2021/04/29 Golang
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL