昨天我們有提到說 for-of
和 forEach
可以用來處理陣列,但其實還有很多方法可以更快速及精簡程式碼的達到你要的效果。
話不多說,我們趕緊來看吧!
會回傳一個新陣列,其值為原陣列每一個值經回呼函式運算後的回傳值。故新陣列長度會與原陣列相同。
要注意的是,如果沒有回傳值,會預設回傳 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
別人一看就知道說,這是對原陣列作操作並回傳一個新的。
會回傳一個陣列,其值為原陣列每一個值經回呼函式運算後回傳為 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"]
會回傳第一個滿足函式條件的值,否則回傳 undefined。
var arr = ['Jason','Turtle','Chris','Jason','Kai','Chris','Henry','Kai'];
var findPerson = arr.find((item,index,array)=>{
return item === 'Chris';
});
console.log(findPerson);
會回傳陣列是否每一個值都滿足函式的條件。
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
跟 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
會將陣列內每一個值經回呼函式運算後回傳單一個值。
這個方法很特別的是每一次呼叫可以跟前一個回傳值作再次運算並回傳。
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
,會少運算一次喔!
以上是今天的陣列常見處理方法,下次要對陣列作操作時不要一開始就用 for
,試著用這先簡單明瞭的方法吧!
參考資料:
JavaScript 陣列處理方法
JavaScript取出陣列重複/不重複值的方法
MDN - Array