JavaScript-陣列處理方法

這裡整理對陣列資料的處理方法，會介紹的方法有：

• filter()
• find()
• forEach()
• map()
• every()
• some()
• reduce()

初始資料

接下來的案例皆以此份資料作示範

var memberList = [
    {
        name:"lin",
        coin:27,
        gender:"F",
        account:"lin27"
    },
    {
        name:"chen",
        coin:37,
        gender:"F",
        account:"chen37"
    },
    {
        name:"liu",
        coin:17,
        gender:"M",
        account:"liu17"
    },
    {
        name:"chien",
        coin:54,
        gender:"M",
        account:"chien54"
    },
    {
        name:"lin",
        coin:25,
        gender:"F",
        account:"lin22"
    },
]

Array.filter()：搜尋符合條件的所有資料

filter()方法會回傳一個新的陣列，其filter()方法中的 return 後方寫入判斷條件，若條件吻合而取得 true 值，則會將該item放入新的陣列中。

filter 函式，接受一個 callback 函式，callback 可以有三個參數(item, index, array)

• element：當前元素
• index：當前元素的所在陣列中的位置
• arr：已經過 filter 處理的陣列

var femaleList = memberList.filter(function(item,index,array){
    return item.gender ==="F";
})

console.log(femaleList);
//  [
//     {
//         name:"lin",
//         coin:"27",
//         gender:"F"
//     },
//     {
//         name:"chen",
//         coin:"37",
//         gender:"F"
//     },
// ]

Array.find():搜尋第一個符合條件的資料

find()與filter()很類似，皆是用來篩選符合條件的方法，但是find()方法只會回傳一個值，且是在陣列中第一個符合條件的值。

var aFemale = memberList.find(function(item,index,array){
    return item.gender==="F";
})

console.log(aFemale);
// {
//    name:"lin",
//    coin:"27",
//    gender:"F"
// },

Array.forEach():等同於for迴圈

forEach()方法並不會回傳值，而僅在迴圈中處理到每個值時，可以對該值做執行處理，若做資料變更則會直接改動原陣列。

memberList.forEach(function(item,index,array){
    item.coin += 10;
})

console.log(memberList);
// [
//     {
//         name:"lin",
//         age:"37",
//         gender:"F",
//         account:"lin27"
//     },
//     {
//         name:"chen",
//         coin:"47",
//         gender:"F",
//         account:"chen37"
//     },
//     {
//         name:"liu",
//         coin:"27",
//         gender:"M",
//         account:"liu17"
//     },
//     {
//         name:"chien",
//         coin:"64",
//         gender:"M",
//         account:"chien54"
//     },
//     {
//         name:"lin",
//         coin:"35",
//         gender:"F",
//         account:"lin22"
//     },
// ]

Array.every():檢查陣列資料完全符合

every()方法會回傳一個布林值為 true 或 false，every()方法中的 return 後方寫入檢查條件，用以檢查陣列中的每一筆資料是否皆符合條件。

var result1 = memberList.every(funciton(item,index,array){
    return item.coin>10;
})
var result2 = memberList.every(funciton(item,index,array){
    return item.coin>50;
})

console.log(result1);//true
console.log(result2);//false

Array.some():檢查陣列資料部分符合

some()也是用來檢查陣列中的每一筆資料，但是相較於every()較寬鬆，只要有部分資料吻合，就會獲得true。

var result3 = memberList.some(function(item,index,array){
    item.coin > 50;
})

console.log(result3);//true

Array.map():運算組合出一個新陣列

map()方法會回傳一個等同於原先陣列長度的新陣列，新陣列中的值為重新運算、合成過的資料，資料內容則定義在return後方。

var mapMember = memberList.map(function(item,index,array){
    if(item.gender==="F"){
        return item.account+"是女生";
    }else{
        return item.account+"是男生";
    }
})

console.log(mapMember);
// [
//     "lin27是女生", 
//     "chen37是女生", 
//     "liu17是男生", 
//     "chien54是男生", 
//     "lin22是女生"
// ]

Array.reduce():連續運算陣列中的值

reduce()方法最終會回傳陣列中每個物件接續運算後的值， reduce 函式，接受一個 callback 函式，以及一個初始值。

callback 可以有四個參數(accumulator, currentValue, currentIndex,array)

accumulator：前一個元素的回傳值
currentValue：當前元素
currentIndex：當前元素的所在陣列中的位置
array：完整陣列

var sumResult = memberList.reduce(function(accumulator,currentValue,currentIndex,array){
    return accumulator+currentValue.coin;
},0);

console.log(sumResult);//160

var maxResult = memberList.reduce(function(accumulator,currentValue,currentIndex,array){
     return Math.max( accumulator, currentValue.coin );
},0);

console.log(maxResult);//54