【JavaScript】陣列的批次處理 ForEach/Map/Filter/ Reduce/ Every/Some/Sort/For in

ForEach函數

• 用來處理原始的陣列
• 用法：陣列.forEach(function(item,index){.....})

原始資料：一個調查誰是gay的問卷

var whoisgay = [{
    name: "neo",
    age: 12,
    gay: true
}, {
    name: "ben",
    age: 20,
    gay: true
}, {
    name: "chen",
    age: 14,
    gay: false
}]

教授說：「哎呀，這些受訪人數的平均年齡太小了，這不好跟倫理委員會招待，讓他們多10歲吧。」

whoisgay.forEach(function (item, index) {
    item.age += 10;
})

輸出 [{
    name: "neo",
    age: 22,
    gay: true
}, {
    name: "ben",
    age: 30,
    gay: true
}, {
    name: "chen",
    age: 24,
    gay: false
}]

Map函數

• 陣列轉換器，可以把原始資料A(N筆)一筆ㄧ的轉換資料成B(N筆)
• Map很棒，可以它不能篩選資料。原始陣列有100筆，新資料就會有100筆。
• 和ForEach的差別是Map會return
• 用法：陣列.map(function(item,index){ return .....})

同樣的原始資料:調查誰是gay的問卷

var whoisgay = [{
    name: "neo",
    age: 12,
    gay: true
}, {
    name: "ben",
    age: 20,
    gay: true
}, {
    name: "chen",
    age: 14,
    gay: false
}]

教授說：「哎呀這其實是個匿名調查，我們只需要年齡跟性向資料就好。」
➡︎ 用map轉換正個陣列，讓他變成新的沒有名字陣列

var noname = whoisgay.map(function (item, index) {
    return {
        age: item.age,
        gay: item.gay
    }
})

console.log(noname)

輸出：
[ { age: 12, gay: true },
  { age: 20, gay: true },
  { age: 14, gay: false } ]

另一個案例：把陣列平方處理

var array = [1, 2, 3, 4, 5];

var newarray = array.map(function (item, index) {
    return item * item;  //[1,4,9,16,25]
})

Filter函數

• Filter可以篩選資料，只要return結果是true，它就會把這筆資料塞進去新陣列
• 用法：陣列.filter(function(item,index){ return true/false})

var whoisgay = [{
    name: "neo",
    age: 12,
    gay: true
}, {
    name: "ben",
    age: 20,
    gay: true
}, {
    name: "chen",
    age: 14,
    gay: false
}]

教授又來了，教授說：「哎呀，我們只要研究同性戀的年齡，那些不是同性戀的資料可以不用啦。」

var gayage = whoisgay.filter(function (item, index) {
    if (item.gay) {  //如果是gay
        return true  //就是return true，並把這個item篩進去這個陣列
    }
})

結果（2筆）：
[ { name: 'neo', age: 12, gay: true },
  { name: 'ben', age: 20, gay: true } ]

Find函數

• 找到第一筆符合的資料
• filter會回傳陣列，但find只會找到第一筆資料
• 用法：陣列.find(function(item,index){ if ... return item)

var whoisgay = [{
    name: "neo",
    age: 12,
    gay: true
}, {
    name: "ben",
    age: 20,
    gay: true
}, {
    name: "chen",
    age: 14,
    gay: false
}]

教授說：「那個啊，我們這個研究做了可以抽獎，嗯．．．就抽第一個是gay的同學吧。」

var ifgay = whoisgay.find(function (item, index) {
    if (item.gay) {
        return item
    }
})
輸出：{ name: 'neo', age: 12, gay: true }

Every函數

• 如果每個資料都符合某個標準，回傳true/false
• 用法：陣列.every(function(item,index){ if ... return 判斷式)

教授說：「那個啊，可以確定一下是不是每個受訪者都成年嗎？」

var whoisgay = [{
    name: "neo",
    age: 12,
    gay: true
}, {
    name: "ben",
    age: 20,
    gay: true
}, {
    name: "chen",
    age: 14,
    gay: false
}]

var ifadult = whoisgay.every(function (item, index) {
    return item.age>=20
})
輸出：false

Some函數

• 如果有至少一筆資料是符合標準，回傳true/false
• 用法：陣列.some(function(item,index){ return 判斷式)

教授說：「那個啊，我聽說叫neo的人很少，我看一下這些受試者是不是有至少一個叫neo的啊？」

var whoisgay = [{
    name: "neo",
    age: 12,
    gay: true
}, {
    name: "ben",
    age: 20,
    gay: true
}, {
    name: "chen",
    age: 14,
    gay: false
}]

var ifneo = whoisgay.some(function (item, index) {
    return item.name == 'neo'
})

輸出：true

Sort排序函數

• 可以進行資料排序a>b（小到大）a<b（大到小）
• 用法：陣列.sort(function(a,b){ return a<b)

var whoisgay = [{
    name: "neo",
    age: 12,
    gay: true
}, {
    name: "ben",
    age: 20,
    gay: true
}, {
    name: "chen",
    age: 14,
    gay: false
}]

教授說：「我想要讓資料順序，由年齡從小到大排」

whoisgay.sort(function (a, b) {
    return a.age > b.age;
    // 如果為真，就由小排到大
})

輸出：[ { name: 'neo', age: 12, gay: true },
  { name: 'chen', age: 14, gay: false },
  { name: 'ben', age: 20, gay: true } ]

Reduce函數

• 可以有一個暫存的變數去收集資料
• 用法：reduce(function (變數, 抓陣列的資料) { return 變數 + 抓陣列的資料}, 初始值)

var whoisgay = [{
    name: "neo",
    age: 12,
    gay: true
}, {
    name: "ben",
    age: 20,
    gay: true
}, {
    name: "chen",
    age: 14,
    gay: false
}]

教授：「我想要知道大家的平均年齡：）」

var total = whoisgay.reduce(function (total, item) {
    return total + item.age
}, 0)

var number = whoisgay.length

console.log(total / number)

For in

• 可以把資料的index撈出來

var whoisgay = [{
    name: "neo",
    age: 12,
    gay: true
}, {
    name: "ben",
    age: 20,
    gay: true
}, {
    name: "chen",
    age: 14,
    gay: false
}]

for (index in whoisgay) {
    console.log(index)
}
輸出：0,1,2

​