1. 首页
  2. IT资讯

JS中array对象的各种方法理解(forEach,reduce等)

forEach()

如果有一个数组arr,那么 forEach 方法接收一个函数fn作为参数,然后依次对这个数组的每一项执行这个函数fn,同时这个函数fn又有三个参数,分别为当前值,当前位置,整个数组。也可以理解成value,key,arr.

例如:

var arr = [345] arr.forEach(function(value,key,array){console.log('[' + key + '] = ' + value)})  // [0] = 3 // [1] = 4 // [2] = 5 

也就是说,forEach方法接受了这个函数,然后这个函数会对数组的每一项都执行,而且必然会接受forEach方法吐给他的这三个参数value,key,还有数组本身。其实这里的三个参数名字叫value,key,array只是为了方便理解,不管你写成什么,这个参数函数在对数组每一项执行的时候,总会接受到数组吐给他的三个参数:当前值,当前位置,整个数组。注意,不管你用不用他,他就是要给你。比如写成

arr.forEach(function(asd,dsa,qwe){console.log('['+ dsa +'] = '+ asd)}) 

结果是一样的。

还有特别注意,如果这个参数函数的参数只写了一个,比如 arr.forEach ( function( a ){……………………..}) 那么这个参数a的值就是数组每一项的value,或者说他的element,或者说“当前的值”。如果这个参数函数的参数只写了两个,那么这两个参数的值就分别是“当前值”和“当前位置”。所以用不到后面一两个的话一般就不写了。

forEach 方法除了接受一个函数作为参数,他还可以接受第二个参数,绑定参数函数的this变量。

var abc = [];  [1, 2, 3].forEach(function(a){ this.push(a * a) }, abc);  abc // [1, 4, 9] 

map()

map() 方法跟 foreach方法很像,不过不同的是它会返回一个数组。map()方法也是接受一个函数作为参数,然后将数组的所有成员依次传入参数函数,然后把每一次的执行结果组成一个新的数组返回。

同样的,这个参数函数也接受三个参数,分别为当前值,当前位置,整个数组,也就是value,key,还有整个数组。

[1, 3, 2].map(function(value, key, arr) {   return value * key; });  // [0, 3, 4] 

map()方法也可以接受第二个参数,用来绑定前一个参数函数内部的this变量。

var arr = ['c', 'b', 'a'];  [1, 2].map(function (i,o,p) {   return this[i]; }, arr) // ['b', 'a']  [1, 2].map(function (i,o,p) {   return this[o]; }, arr) // ['c', 'b'] 

filter()

顾名思义 filter 方法用于过滤数组成员,满足条件的成员组成一个新数组返回。

它的参数是一个函数,所有数组成员依次执行该函数,执行该函数后返回结果为 true 的那些成员组成一个新数组返回。该方法不会改变原数组。

该方法的参数函数同样可以接受三个参数:当前值,当前位置和整个数组。

[1, 2, 3, 4, 5].filter(function (v) {return (v > 4);})  // [5] 

forEach方法也同样可以接受第二个参数,绑定参数函数的this变量。不写例子了。


sort()

这个比较简单,sort 方法对数组成员进行排序。排序的方式,比如从大到小还是从小到大,听你安排,看你传入的函数来定。

所以,sort 方法也可以接受一个函数。而这个函数又接受两个参数,这两个参数代表参与比较大小并排序的数组中的前两个成员(因为数组不同于对象,数组是有序的),如果该函数的返回值 return 大于0,表示第一个成员排在第二个成员后面;否则都是第一个成员排在第二个成员前面。

[2, 4, 3].sort(function (a, b) {   return a - b; }) // [2, 3, 4]  [2, 4, 3].sort(function (a, b) {   return b - a; }) // [4, 3, 2] 

如果实在记不住没关系,大多数时候换一下 a-b 变成 b-a 就行了,总会有你想要的结果的。

还有复杂点的例子,如果数组的成员不能“直接”比较的话,

[   { name: "张三", age: 30 },   { name: "李四", age: 24 },   { name: "王五", age: 28 } ].sort(function (a, b) {   return a.age - b.age; })  // [ //   { name: "李四", age: 24 }, //   { name: "王五", age: 28  }, //   { name: "张三", age: 30 } // ] 

reduce(),reduceRight()

reduce 方法和 reduceRight 方法依次处理数组的每个成员,最终累计为一个值。它们的差别是,reduce 是从左到右处理(从第一个成员到最后一个成员),reduceRight 则是从右到左(从最后一个成员到第一个成员),其他完全一样。

[1, 2, 3, 4, 5].reduce(function (a, b) {   console.log(a, b);   return a + b; }) // 1 2 // 3 3 // 6 4 // 10 5 //return:15 

reduce方法和reduceRight方法的第一个参数都是一个函数。该函数接受以下四个参数。

累积值,默认为数组的第一个成员

当前值,默认为数组的第二个成员

当前位置(从0开始)

原数组

这四个参数之中,只有前两个是必须的,后两个则是可选的。

也就是可以这样理解reduce方法,他把每一次处理的结果,作为一个累计值(累计的结果),然后继续和下一个“当前值”做处理。知道遍历完数组,得到一个最终值。

reduce 方法同样接受除了函数之外的第二个参数,作为累计值(也就是前一个参数函数的第一个参数)的初始值,此时,当前值则从数组的第一个成员的值开始计算。

[1, 2, 3, 4, 5].reduce(function (sum, b) {   return sum + b; }, 3);  // 18 

reduce方法还可以用来代替map()和filter()

//map 可以用 reduce 来表示 a=[1,2,3] a.reduce(function(arr,b){   arr.push(b*2)   return arr },[])   //filter 可以用reduce来表示 a = [1,2,3,4,5,6,7,8,9,10] a.reduce(function(a,b){   if(b % 2 == 0){     a.push(b)   }   return a },[]) 

所以 reduce 比 map 和 filter 吊多了。

原文始发于:JS中array对象的各种方法理解(forEach,reduce等)

主题测试文章,只做测试使用。发布者:酒颂,转转请注明出处:http://www.cxybcw.com/25013.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code