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 相关文章推荐
Js 中debug方式
Feb 07 Javascript
jquery中输入验证中一个不错的效果
Aug 21 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 Javascript
如何手写一个简易的 Vuex
Oct 10 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
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
html5 标签
2009/07/16 HTML / CSS
Html5定位终极解决方案
2020/02/05 HTML / CSS
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
捷克玩具商店:Bambule
2019/02/23 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
造型师求职自荐信
2013/09/27 职场文书
学生党支部先进事迹
2014/02/04 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
授权委托书
2014/09/17 职场文书
师德师风剖析材料
2014/09/30 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
vue ref如何获取子组件属性值
2022/03/31 Vue.js
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸