来自 服务器&运维 2019-12-04 16:28 的文章
当前位置: 澳门威尼斯人平台 > 服务器&运维 > 正文

Array数组对象中的forEach、map、filter及reduce详析_javascript技巧_脚本之家

ECMAScript5标准发布于2009年12月3日,它带来了一些新的,改善现有的Array数组操作的方法。然而,这些新奇的数组方法并没有真正流行起来的,因为当时市场上缺乏支持ES5的浏览器。

前言

Array "Extras"

刚才某人问了我一个问题。map怎么遍历,我刷刷刷就是一顿写。遍历么,forEach么,妥妥的。

没有人怀疑这些方法的实用性,但写polyfill对他们来说是不值得的。它把“必须实现”变成了“最好实现”。有人居然将这些数组方法称之为Array "Extras"。哎!

var map = new Map();map.setmap.setmap.forEach(function { console.log("Key: %s, Value: %s", key, value);});

但是,时代在变化。如果你看看Github上流行的开源JS项目,你会发现趋势正在转变。大家都想削减大量的依赖,仅用本地代码来实现。

好吧,我写完了之后,他发给我了一句话。 [].forEach()改成[].map()怎么用?

我的5个数组

what?我这个暴脾气。。。。我当然是详细的说一下Array的常规遍历方法以及场景了。

在ES5中,一共有9个Array方法

Array.filter

Array.prototype.indexOfArray.prototype.lastIndexOfArray.prototype.everyArray.prototype.someArray.prototype.forEachArray.prototype.mapArray.prototype.filterArray.prototype.reduceArray.prototype.reduceRight

语法

我将挑选5种方法,我个人认为是最有用的,很多开发者都会碰到。

var new_arr = arr.filter(callback(element, index, array){}, this)

1) indexOf

参数

indexOf()方法返回在该数组中第一个找到的元素位置,如果它不存在则返回-1。

callback 回调 element 当前的value index 当前的索引值 array arr这个数组对象this 回调的this指向

不使用indexOf时

返回值

var arr = ['apple','orange','pear'],found = false;for(var i= 0, l = arr.length; i< l; i++){if{found = true;}}console.log;

var arr = ['apple','orange','pear'];console.log("found:", arr.indexOf;

Array 类型//符合条件的值组成的数组

2) filter

用法

该filter()方法创建一个新的匹配过滤条件的数组。

//如果返回值是true的话,就是符合条件。//filter 不会改变原数组,它返回过滤后的新数组。//这个里返回数组里面的偶数[10,11,12,13].filter//只要审核通过的。当然正常情况下,对象比这个复杂一些。[{state:1},{state:0},{state:0},{state:0}].filter//只要成年人,记录是有效的[{age:18,state:1},{age:16,state:0},{age:21,state:0}].filter=>v.state == 1 && v.age > 17)

不用 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;}}console.log("Filter results:",newArr);

场景就是过滤,把符合条件的整理到一起,常见的就是展示审核通过的数据,只显示关注我的人,只显示妹子,对吧糙汉子就过滤不看了。

用了 filter():

Array.forEach

var arr = [ {"name":"apple", "count": 2}, {"name":"orange", "count": 5}, {"name":"pear", "count": 3}, {"name":"orange", "count": 16},]; var newArr = arr.filter{ return item.name === "orange";});console.log("Filter results:",newArr);
arr.forEach(callback(element, index, array){}, this)

3) forEach()

参数

forEach为每个元素执行对应的方法

callback 回调 element 当前的value index 当前的索引值 array arr这个数组对象this 回调的this指向

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;}console.log("========================");//Uses forEach to iteratearr.forEach{console.log;

返回值

forEach是用来替换for循环的

undefined// 这个东西没有返回值

4) map()

//遍历数组。打印到控制台[10,11,12,13].forEach})// 成功的收集到success里面,错误的收集到error里面。var success = [],error = [];[{state:1},{state:0},{state:0},{state:0}].forEach=>{ if{ success.push }else{ error.push// 给20岁的小姐姐打招呼[{state:1,age: 1},{state:0,age: 20},{state:0,age: 19},{state:0,age: 31}].forEach=>{ if{ console.log

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;

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{ item.full_name = [item.first_name,item.last_name].join; }console.log;

比如说绑定事件,比如判断值然后push到不同的地方

本文由澳门威尼斯人平台发布于服务器&运维,转载请注明出处:Array数组对象中的forEach、map、filter及reduce详析_javascript技巧_脚本之家

关键词: