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中 For, While与递归的用法
May 07 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
javascript中this的四种用法
May 11 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
对Layer UI 模块化的用法详解
Sep 26 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 Javascript
微信小程序后端实现授权登录
Feb 24 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 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
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
php while循环得到循环次数
2013/10/26 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
Python切图九宫格的实现方法
2019/10/10 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
Python类class参数self原理解析
2020/11/19 Python
python Xpath语法的使用
2020/11/26 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
飞利浦法国官网:Philips法国
2019/07/10 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
介绍一下grep命令的使用
2012/06/28 面试题
升职自荐信
2013/11/28 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
环保倡议书50字
2014/05/15 职场文书
争先创优公开承诺书
2014/08/30 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
论语读书笔记
2015/06/26 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书