博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ES5新增 数组操作forEach()、map()、filter()、some()、every()
阅读量:7120 次
发布时间:2019-06-28

本文共 4534 字,大约阅读时间需要 15 分钟。

1. 前言

ES5中新增的一些处理数组(Array)的方法, 对于用JavaScript处理数据非常有用。我总结了一下,给这些方法分了类,大体如下:

2个索引方法:indexOf() 和 lastIndexOf();

5个迭代方法:forEach()、map()、filter()、some()、every();

2个归并方法:reduce()、reduceRight();

下面我们来具体看一看这些方法怎么用吧!

2、索引方法

索引方法包含indexOf()和lastIndexOf()两个方法,这两个方法都接收两个参数,第一个参数是要查找的项,第二个参数是查找起点位置的索引,该参数可选,如果缺省或是格式不正确,那么默认为0。两个方法都返回查找项在数组中的位置,如果没有找到,那么返回-1。区别就是一个从前往后找,一个从后往前找。

让我们来看一个具体列子吧,首先定义一个数组:

var dataArray = [1, 7, 5, 7, 1, 3]; indexOf():该方法从数组的开头开始向后查找。console.log(dataArray.indexOf(7));              // 1     缺省, 从第一项开始查找lastIndexOf(): 该方法从数组的末尾开始向前查找。console.log(dataArray.lastIndexOf (7));       // 3     缺省, 从末尾第一项开始查找

值得注意的是,在比较第一个参数与数组中的每一项时,会使用全等操作符, 要求必须完全相等,否则返回-1。

console.log(dataArray .lastIndexOf ('7'));   // -1,因为这里是字符串,并不是数值类型

三、迭代方法

迭代方法包含some()、every()、filter()、map()和forEach()五个方法,这些方法都接收两个参数,第一个参数是一个函数,他接收三个参数,数组当前项的值、当前项在数组中的索引、数组对象本身。第二个参数是执行第一个函数参数的作用域对象,也就是上面说的函数中this所指向的值。注意,这几种方法都不会改变原数组。

every()和 some() 方法有些类似,我们放在一起比较。

every(): 该方法对数组中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回true。

some(): 该方法对数组中的每一项运行给定函数,如果该函数对任何一项返回 true,则返回true。

var arr = [ 1, 2, 3, 4, 5, 6 ];        console.log( arr.some( function( item, index, array ){          console.log( 'item=' + item + ',index='+index+',array='+array );          return item > 3;      }));        console.log( arr.every( function( item, index, array ){          console.log( 'item=' + item + ',index='+index+',array='+array );          return item > 3;      }));

可以看到,some方法是碰到一个返回true的值时候就返回了,并没有继续往下运行,而every也一样,第一个值就是一个false,所以后面也没有进行下去的必要了,就直接返回结果了

filter() : 该方法对数组中的每一项运行给定函数,返回该函数会返回 true 的项组成的数组。利用这个方法可对数组元素进行过滤筛选。

var arr = [  {"name":"apple", "count": 2},  {"name":"orange", "count": 5},  {"name":"pear", "count": 3},  {"name":"orange", "count": 5},];   var newArr = arr.filter(function(item){  return item.name === "orange";});  console.log("Filter results:",newArr);[{"name":"orange", "count": 5},{"name":"orange", "count": 5}]

grep(array, function[, invert])方法,还有一个特性,当invert缺省或是为false,和filter方法一样,通常我用filter

map(): 对数组的每个元素进行一定操作(映射)后,会返回一个新的数组

var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}]; function getNewArr(){       return oldArr.map(function(item,index){    item.full_name = [item.first_name,item.last_name].join(" ");    return item;  });   } console.log(getNewArr());------------- {first_name: "Colin", last_name: "Toh", full_name: "Colin Toh"} {first_name: "Addy", last_name: "Osmani", full_name: "Addy Osmani"} {first_name: "Yehuda", last_name: "Katz", full_name: "Yehuda Katz"}

forEach(): 该方法对数组中的每一项运行给定函数。这个方法没有返回值。这个方法其实就是遍历循环,和for循环没有太大差别。jquery()也提供了相应的方法each()方法。

var arr = [1,2,3,4,5,6,7,8]; // Uses the usual "for" loop to iteratefor(var i= 0, l = arr.length; i< l; i++){console.log(arr[i]);} console.log("========================"); //Uses forEach to iteratearr.forEach(function(item,index){console.log(item);});

四、归并方法

归并方法包含reduce()和reduceRight()两个方法,这两个方法都会迭代数组中的所有项,然后生成一个最终返回值。他们都接收两个参数,第一个参数是每一项调用的函数,函数接受是个参数分别是初始值,当前值,索引值,和当前数组,函数需要返回一个值,这个值会在下一次迭代中作为初始值。第二个参数是迭代初始值,参数可选,如果缺省,初始值为数组第一项,从数组第一个项开始叠加,缺省参数要比正常传值少一次运算。

reduce():该方法从数组的第一项开始,逐个遍历到最后一项。

用for循环来写var arr = ["apple","orange","apple","orange","pear","orange"]; function getWordCnt(){  var obj = {};     for(var i= 0, l = arr.length; i< l; i++){    var item = arr[i];    obj[item] = (obj[item] +1 ) || 1;  }     return obj;} console.log(getWordCnt());

应用reduce

var arr = ["apple","orange","apple","orange","pear","orange"];         function getWordCnt(){      return arr.reduce(function(prev,next){        prev[next] = (prev[next] + 1) || 1;        return prev;      },{});    }console.log(getWordCnt());

reduce 传入。reduce(callback, initialValue)会传入两个变量。回调函数(callback)和初始值(initialValue)。假设函数它有个传入参数,prev和next,index和array。prev和next你是必须要了解的。

一般来讲prev是从数组中第一个元素开始的,next是第二个元素。但是当你传入初始值(initialValue)后,第一个prev将是initivalValue,next将是数组中的第一个元素。

var arr = ["apple","orange"]; function noPassValue(){  return arr.reduce(function(prev,next){    console.log("prev:",prev);    console.log("next:",next);         return prev + " " +next;  });}function passValue(){  return arr.reduce(function(prev,next){    console.log("prev:",prev);    console.log("next:",next);         prev[next] = 1;    return prev;  },{});} console.log("No Additional parameter:",noPassValue());console.log("----------------");console.log("With {} as an additional parameter:",passValue());

顾名思义,reduceRight()就是最后一位往前面算,就不详细说了。

五、兼容性问题

ES5里这些处理数组的新方法,在IE6-IE8浏览器还未得到支持,所以我们需要在IE这些低版本浏览器中引入这个es5-shim补丁,这样我们就可以使用它了。

补丁地址:

转载地址:http://kzsel.baihongyu.com/

你可能感兴趣的文章
转载:::::简单分享一个轻量级自动化测试框架目录结构设计
查看>>
cocos2dx飞机大战开发记录(3)
查看>>
poj 1201 Intervals
查看>>
maven学习(6)-Maven依赖范围
查看>>
JavaScript设计模式: 接口模仿
查看>>
黑马程序员--java基础知识注意点收录
查看>>
HTML CSS——margin和padding的学习
查看>>
【《zw版·Halcon与delphi系列原创教程》 zw_halcon人脸识别
查看>>
Webform中<%%>
查看>>
一些简单的配置
查看>>
Effective C++ 精要(第五部分:实现)
查看>>
DIV+CSS颜色边框背景等样式
查看>>
HDU 1018 Big Number【斯特林公式/log10 / N!】
查看>>
nefu 115
查看>>
drf版本控制 和django缓存,跨域问题,
查看>>
SVN环境搭建详解(来源网络)
查看>>
设备驱动基础学习--字符驱动实现
查看>>
sourceinsight安装记录
查看>>
PHP函数索引-F
查看>>
数组[]
查看>>