5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
来源:互联网 发布:mac os 使用教程 编辑:程序博客网 时间:2024/06/05 16:53
这篇文章主要介绍了5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例,需要的朋友可以参考下
ECMAScript5标准发布于2009年12月3日,它带来了一些新的,改善现有的Array数组操作的方法。然而,这些新奇的数组方法并没有真正流行起来的,因为当时市场上缺乏支持ES5的浏览器。但是,时代在变化。如果你看看Github上流行的开源JS项目,你会发现趋势正在转变。大家都想削减大量(第三方库)的依赖,仅用本地代码来实现。
好了,让我们开始吧。在ES5中,一共有9个Array方法 http://kangax.github.io/compat-table/es5/
- Array.prototype.indexOf
- Array.prototype.lastIndexOf
- Array.prototype.every
- Array.prototype.some
- Array.prototype.forEach
- Array.prototype.map
- Array.prototype.filter
- Array.prototype.reduce
- Array.prototype.reduceRight
我将挑选5种方法,我个人认为是最有用的,很多开发者都会碰到。
1、indexOf
indexOf()方法返回在该数组中第一个找到的元素位置,如果它不存在则返回-1。
不使用indexOf时
var arr = ['apple','orange','pear'],found = false;for(var i= 0, l = arr.length; i< l; i++){ if(arr[i] === 'orange'){ found = true; }}console.log("found:",found);
使用后
var arr = ['apple','orange','pear'];console.log("found:", arr.indexOf("orange") != -1);
2、 filter
该filter()方法创建一个新的匹配过滤条件的数组。
不用 filter() 时
var arr = [ {"name":"apple", "count": 2}, {"name":"orange", "count": 5}, {"name":"pear", "count": 3}, {"name":"orange", "count": 16},];var newArr = [];for(var i= 0, l = arr.length; i< l; i++){ if(arr[i].name === "orange" ){newArr.push(arr[i]);}}console.log("Filter results:",newArr);
用了 filter():
var arr = [ {"name":"apple", "count": 2}, {"name":"orange", "count": 5}, {"name":"pear", "count": 3}, {"name":"orange", "count": 16},];var newArr = arr.filter(function(item){ return item.name === "orange";});console.log("Filter results:",newArr);
3、 forEach()
forEach为每个元素执行对应的方法
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);});
forEach是用来替换for循环的
4、 map()
map()对数组的每个元素进行一定操作(映射)后,会返回一个新的数组,
不使用map
var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}];function getNewArr(){ var newArr = []; for(var i= 0, l = oldArr.length; i< l; i++){ var item = oldArr[i]; item.full_name = [item.first_name,item.last_name].join(" "); newArr[i] = item; } return newArr;}console.log(getNewArr());
使用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());
map()是处理服务器返回数据时是一个非常实用的函数。
5、 reduce()
reduce()可以实现一个累加器的功能,将数组的每个值(从左到右)将其降低到一个值。
说实话刚开始理解这句话有点难度,它太抽象了。
场景: 统计一个数组中有多少个不重复的单词
不使用reduce时
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的理解。reduce(callback, initialValue)会传入两个变量。回调函数(callback)和初始值(initialValue)。假设函数它有个传入参数,prev和next,index和array。prev和next你是必须要了解的。
一般来讲prev是从数组中第一个元素开始的,next是第二个元素。但是当你传入初始值(initialValue)后,第一个prev将是initivalValue,next将是数组中的第一个元素。
比如:
```/** 二者的区别,在console中运行一下即可知晓*/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());
6. forEach 与map的区别:
高级浏览器支持forEach方法
语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文;
forEach:用来遍历数组中的每一项;这个方法执行是没有返回值的,对原来数组也没有影响;
数组中有几项,那么传递进去的匿名回调函数就需要执行几次;
每一次执行匿名函数的时候,还给其传递了三个参数值:数组中的当前项item,当前项的索引index,原始数组input;
理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改;但是我们可以自己通过数组的索引来修改原来的数组;
forEach方法中的this是ary,匿名回调函数中的this默认是window;
var ary = [12,23,24,42,1];var res = ary.forEach(function (item,index,input) { input[index] = item*10;})console.log(res);//-->undefined;console.log(ary);//-->会对原来的数组产生改变;
map: 和forEach非常相似,都是用来遍历数组中的每一项值的,用来遍历数组中的每一项;
区别:map的回调函数中支持return返回值;return的是啥,相当于把数组中的这一项变为啥(并不影响原来的数组,只是相当于把原数组克隆一份,把克隆的这一份的数组中的对应项改变了);
不管是forEach还是map 都支持第二个参数值,第二个参数的意思是把匿名回调函数中的this进行修改。
var ary = [12,23,24,42,1];var res = ary.map(function (item,index,input) { return item*10;})console.log(res);//-->[120,230,240,420,10];console.log(ary);//-->[12,23,24,42,1];
“`
- 5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
- 5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
- 5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
- 5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
- 5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
- 5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
- 5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
- 5个现在就该使用的数组Array方法: indexOf/filter/forEach/map/reduce详解
- 常用数组Array方法: indexOf、filter、forEach、map、reduce使用实例
- JS Array常用方法indexOf/filter/forEach/map/reduce详解
- JS--Array的常用方法map、reduce、filter、forEach、indexOf
- JS数组filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf()实例
- array之reduce/map/forEach/filter
- ES5中Array新增加的API接口 forEach map filter some every indexOf lastIndexOf reduce reduceRight
- js数组的遍历方法filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf()
- JavaScript数组forEach()、map()、reduce()方法
- 一张图看懂JavaScript中数组的迭代方法:forEach、map、filter、reduce、every、some
- javascript中数组的迭代方法对比:forEach()、map()、reduce()、some()、every()、filter()图解
- ibatis selectKey
- Android adb命令选择设备操作
- App Transport Security has blocked a cleartext HTTP
- HDU_2196_Computer(树上节点的最长路径 · dfs / bfs)
- 简单的退出app应用
- 5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
- 开发者都应该使用的10个C++11特性
- Java static 静态方法 并发(是否线程安全)
- iphone模拟器安装app
- 华为2015年C++研发岗面经
- 测试TCPCOPY+MYSQL
- AutoCAD数据导入SuperMap后的投影定义与投影转换
- Mosquitto简要教程
- 在安卓系统上使用Google Analytics API V4