学JS的心路历程 -数组常见处理方法

昨天我们有提到说for-of和forEach可以用来处理数组，但其实还有很多方法可以更快速及精简代码的达到你要的效果。

话不多说，我们赶紧来看吧！

Array.prototype.map（）

会回传一个新数组，其值为原数组每一个值经回呼函式运算后的回传值。故新数组长度会与原数组相同。

要注意的是，如果没有回传值，会预设回传undefined。

var arr = [1,2,3,4,5,6,7,8,9]；

var arrMap = arr.map（（item，index，array）=>{

return item * index

}）

console.log（arrMap）；//[0，2，6，12，20，30，42，56，72]

map最常拿来与for和for-in作比较，有人认为我用原本的循环就可以达成了，为何还要用map呢？

那我们来比较一下两者吧：

var arr = [1,2,3,4,5,6,7,8,9]；

var arrMap = arr.map（（item，index，array）=>{

return item * index

}）

var arrFor = []；

for（let i = 0；i < arr.length；i++）{

arrFor.push（arr[i]*i）

}

虽然意思都是一样，但是今天别人看到你写for时需要思考说，这个for是在干嘛？有改动什么东西吗？

但如果是map别人一看就知道说，这是对原数组作操作并回传一个新的(cctsol)。

Array.prototype.filter（）

会回传一个数组，其值为原数组每一个值经回呼函式运算后回传为true的值，故长度不一定等于原数组。

var arr = [1,2,3,4,5,6,7,8,9]；

var arrFilter = arr.filter（（item，index，array）=>{

return item%2 === 0；

}）；

console.log（arrFilter）；//[2，4，6，8]

通常用于条件过滤，所以才叫做filter（过滤）。

像是过滤出不重复的数组：

var arr = ['Jason'，'Turtle'，'Chris'，'Jason'，'Kai'，'Chris'，'Henry'，'Kai']；

var uniquePerson = arr.filter（（item，index，array）=>{

return array.indexOf（item）=== index；

}）；

console.log（uniquePerson）；//[“Jason”，“Turtle”，“Chris”，“Kai”，“Henry”]

Array.prototype.find（）

会回传第一个满足函式条件的值，否则回传undefined。

var arr = ['Jason'，'Turtle'，'Chris'，'Jason'，'Kai'，'Chris'，'Henry'，'Kai']；

var findPerson = arr.find（（item，index，array）=>{

return item === 'Chris'；

}）；

console.log（findPerson）；

Array.prototype.every（）

会回传数组是否每一个值都满足函式的条件。

var arr = [{

name:“Jason”，

age: 29

}，

{

name:“Chris”，

age: 31

}，

{

name:“Kai”，

age: 24

}，

{

name:“Henry”，

age: 24

}

]；

var checkAge = arr.every（（item，index，array）=>{

return item.age > 10；

}）；

console.log（checkAge）；//true

var test = arr.every（（item，index，array）=>{

return item.age < 30；

}）；

console.log（test）；//false

Array.prototype.some（）

跟every用法很像，差别在于只要部分符合及回传true。

var arr = [{

name:“Jason”，

age: 29

}，

{

name:“Chris”，

age: 31

}，

{

name:“Kai”，

age: 24

}，

{

name:“Henry”，

age: 24

}

]；

var test = arr.some（（item，index，array）=>{

return item.age < 30；

}）；

console.log（test）；//true

Array.prototype.reduce（）

会将数组内每一个值经回呼函式运算后回传单一个值。

这个方法很特别的是每一次呼叫可以跟前一个回传值作再次运算并回传。

accumulator用来累积回呼函式回传值的累加器，是上一次呼叫后，所回传的累加数值。

currentValue是当前数组的值

currentIndex当前数组值的索引（可选）

array原本的数组（可选）

var arr = [1,2,3,4,5,6,7,8,9,10]；

var sum = arr.reduce（（accumulator，item）=>{

return accumulator + item；

}）；

console.log（sum）；

在这边要注意到reduce有个很特别的参数initialValue初始值，若没有提供初始值，原数组的第一个元素将会被当作初始的累加器。

var arr = [1,2,3,4,5,6,7,8,9,10]；

var sum = arr.reduce（（accumulator，item）=>{

console.count（accumulator，item）；

return accumulator + item；

}，0）；

console.log（sum）；

可以跟上一个例子作比较，会发现没有提供initialValue，会少运算一次喔(aichi-kaigo)！

以上是今天的数组常见处理方法，下次要对数组作操作时不要一开始就用for，试着用这先简单明了的方法吧！