任務目標

陣列原型(Array Prototype)是個物件, 代表著陣列建構式的模型. 裡面存放著一些好用的方法與特性, 所有透過陣列建構式建立的陣列實例都可以使用之.

這篇在介紹如何使用一些常見的陣列原型方法, 讓我們看下去!

花果山眾猴們要舉行一場果王大賽, 下面是想參賽的猴名單.

const monkeys = [
  { first: 'Andy', last: 'Tsai', banana: 18, bala: 12 },
  { first: 'O', last: 'Tree', banana: 16, bala: 3 },
  { first: 'Frog', last: 'X', banana: 23, bala: 14 },
  { first: 'Penguin', last: 'Run', banana: 14, bala: 2 },
  { first: 'Don', last: 'Slam', banana: 13, bala: 5 },
];

首先要篩選出符合果王大賽資格的參賽者, 條件是擁有的蕉數必須超過10根, 芭樂的數量必須超過2顆, 評審團決定使用filter()方法篩選出符合資格的參賽者!

Array.prototype.filter(callback)

陣列通過filter方法後, 陣列內的每個值會依序做為參數傳入自訂的回呼函式, 所有符合篩選條件的值會回傳為一個新的陣列. 如下:

const qualifiedMonkeys = monkeys.filter(function(monkey) {
  return monkey.banana > 10 && monkey.bala > 2;
});

我們可以使用ES6的Arrow Function讓程式碼變得更精簡:

const qualifiedMonkeys = monkeys.filter(monkey => monkey.banana > 10 && monkey.bala > 2);
console.log(`${qualifiedMonkeys}`);

如上, qualifiedMonkeys結果為符合參賽資格的猴們, 很遺憾, 企鵝猴慘遭淘汰. 原陣列monkeys並不會被改變.

掌握大會權力的猴主席想知道符合資格的猴們的全名, 要是有一份陣列記錄著全名就好了, 我們可以透過map()方法做到這樣的事.

Array.prototype.map(callback)

陣列通過map方法後, 陣列內的每個值會依序做為參數傳入自訂的回呼函式, 經過函式 處理後的值會回傳為一個新的陣列. 原陣列一樣不會被改變.

const fullname = qualifiedMonkeys.map(monkey => `${monkey.first} ${monkey.last}`);
console.log(fullname)

如上, fullname內裝著的正是我們需要的猴們的全名!

接著終於來到重頭戲蕉王選拔, 依照擁有的香蕉數量由多到少進行排名, 究竟誰能成為蕉王呢? 使用sort()方法便能一探究竟...

Array.prototype.sort([comparedFunction(a,b)])

陣列通過sort方法後, 如果方法內有自訂comparedFunction, 會根據comparedFunction回傳的值來決定處理過後新陣列的排序.
如果回傳值 > 0, a會排在b後面
如果回傳值 < 0, b會排在a後面
如果回傳值 = 0, a, b位置不會更動
如果方法內沒有自訂comparedFunction, 預設會以alphabetical排序

const bananaOrder = qualifiedMonkeys.sort((prev, next) => next.banana - prev.banana);
console.log(bananaOrder);

如上, bananaOrder中, 根據香蕉數量由多到少排出了各猴的名次! 讓我們恭喜蛙猴成為一代蕉王!

果王大賽終於要落幕了, 非常榮幸的, 每隻猴擁有的水果都必須當作供品獻給公家的倉庫, 猴們聽了是暴跳不已, 尤其以老樹猴反應最大, 但這也是沒辦法的事, 工作人員開始累加所有水果的數量, 用reduce()方法能夠做到這點.

Array.prototype.reduce(callback)

陣列通過reduce方法後, 陣列值會依序被被方法內自訂的回呼函式處理, 簡化並回傳為單一的值.

自訂函數接受四個引數, 分別為accumulator, currentValue, currentIndex, array, 跟[initialValue].

accumulator為callback每次執行後回傳的值, 可以選擇性的設定[initialValue]的值來初始化accumulator的值
currentValue為正在處理中的陣列值, currentIndex為其引數
array則為原陣列本身

const totalFruits = monkeys.reduce((total, monkey) => {
  return total + (monkey.banana + monkey.bala)
}, 0);
console.log(totalFruits);

如上, totalFruits記錄了累加後的貢品數量, 共120顆水果.

以上就是JS30 第四篇的心得!
補充, 在JS30的練習中有將上述Array方法混用以實現某些功能的實例, 在這就不多介紹了, 放在Reference讓有興趣的人研究.

Reference

Array Prototype & Methods
練習的完整程式碼
.
.
.
.

一百二十顆水果的真相:

沒錯, 企鵝猴即使沒有符合果王大賽的參賽資格, 他的水果一樣被沒收了, 可憐的孩子...