iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 4
0

第四天了,今天要來介紹Array的一些方法。

Day4

1.filter(),讓我們先來看看MDN web docs的解釋:filter() 方法會建立一個經指定之函式運算後,由原陣列中通過該函式檢驗之元素所構成的新陣列。
搭配上範例:

    const inventors = [
      { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
      { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
      { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
      { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
      { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
      { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
      { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
      { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
      { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
      { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
      { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
      { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
    ];
    const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600));
    console.log(fifteen)結果會回傳
    {first: "Galileo", last: "Galilei", year: 1564, passed: 1642}
    {first: "Johannes", last: "Kepler", year: 1571, passed: 1630}

在這裡是把inventors當作目標陣列進行filter(),篩選出year >=1500 以及year < 1600這兩個條件,這邊要注意的是我們const了一個變數來接收filter回傳的結果,inventors本身並不會改變。

2.map(),一樣先看看MDN web docs的解釋:map() 方法會建立一個新的陣列,其內容為原陣列的每一個元素經由回呼函式運算後所回傳的結果之集合。
範例:

//inventors為第一個範例的陣列資料
const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
console.log(fullNames)會印出
["Albert Einstein", "Isaac Newton", "Galileo Galilei", "Marie Curie", "Johannes Kepler", "Nicolaus Copernicus", "Max Planck", "Katherine Blodgett", "Ada Lovelace", "Sarah E. Goode", "Lise Meitner", "Hanna Hammarström"]

在這範例當中,我們取出陣列裡每個元素first跟last屬性,並且return回去。

3.sort(),MDN web docs的解釋:sort() 方法會原地(in place)對一個陣列的所有元素進行排序,並回傳此陣列。排序不一定是穩定的(stable)。預設的排序順序是根據字串的 Unicode 編碼位置(code points)而定。
範例:

const ordered = inventors.sort((a, b) => a.year > b.year ? 1 : -1);
console.log(ordered)會印出
[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {first: "Nicolaus", last: "Copernicus", year: 1473, passed: 1543}
1: {first: "Galileo", last: "Galilei", year: 1564, passed: 1642}
2: {first: "Johannes", last: "Kepler", year: 1571, passed: 1630}
3: {first: "Isaac", last: "Newton", year: 1643, passed: 1727}
4: {first: "Ada", last: "Lovelace", year: 1815, passed: 1852}
5: {first: "Hanna", last: "Hammarström", year: 1829, passed: 1909}
6: {first: "Sarah E.", last: "Goode", year: 1855, passed: 1905}
7: {first: "Max", last: "Planck", year: 1858, passed: 1947}
8: {first: "Marie", last: "Curie", year: 1867, passed: 1934}
9: {first: "Lise", last: "Meitner", year: 1878, passed: 1968}
10: {first: "Albert", last: "Einstein", year: 1879, passed: 1955}
11: {first: "Katherine", last: "Blodgett", year: 1898, passed: 1979}

這範例當中我們依照inventors的每個元素的year屬性去做排序,並可以依照函式內的設定去決定排序要從大到小,還是小到大

4.reduce(),MDN web docs的解釋:reduce() 方法將一個累加器及陣列中每項元素(由左至右)傳入回呼函式,將陣列化為單一值。
範例:

const totalYears = inventors.reduce((total, inventor) => {
      return total + (inventor.passed - inventor.year);
    }, 0);
console.log(totalYears)會印出861

reduce()函式需要傳入兩個參數,total為累加的數值,inventor為陣列的每個元素,而最後的0是初始值設定,如果沒有給初始值,會依照陣列的第一個元素的值為準。
這範例當中取出每個元素passed的值減去year的值,並累加起來,得出最後的值。

Array當中其實還有許多好用的方法,今天就先介紹這四種,以上是第四天的內容!


上一篇
JS30-Day3
下一篇
JS30-Day5
系列文
一直想著要做,卻懶得做的JS30系列13
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言