陣列的 map, filter ，sort和 reduce 用法

林暉發表於2018-07-29
陣列Filter

此處也是通過網上的一個題目例子來對陣列的這幾種用法進行分析整理的，可以在瀏覽器的控制檯中列印結果進行對比。此處給出兩組陣列

  • 第一組(包含名、姓、出生日期以及死亡日期)
const inventors = [
    { first: `Albert`, last: `Einstein`, year: 1879, passed: 1955 },
    { first: `wawa`, last: `fs`, year: 1830, passed: 1905 },
    { first: `grvd`, last: `xcvxcv`, year:1900, passed: 1977 },
    { first: `Hanna`, last: `Hammarström`, year: 1829, passed: 1909 }
];
複製程式碼
  • 第二組(people陣列，包含一組人名，名姓之間用逗號分隔。)
[`Albert, Einstein`, `wawa, fs`, `grvd, xcvxcv`, `Hanna, Hammarström`]
複製程式碼
根據這兩組陣列，完成以下的題目
  • 篩選出生於16世紀的發明家；
  • 以陣列形式，列出其名與姓；
  • 根據其出生日期，並從大到小排序；
  • 計算所有的發明家加起來一共活了幾歲；
  • 按照其年齡大小排序；

filter()（過濾操作，篩選符合條件的所有元素，若為true則返回組成新陣列，以第一題為例：）

    function bornyear(inventor) {
      return inventor.year >= 1800 && inventor.year < 1900;
    }
    var fifteen = inventors.filter(bornyear);
    console.log(fifteen);
    // 可簡化為
    const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600));
複製程式碼

首先通過一個函式bornyear,在函式中進行條件的篩選，篩選出生日期在19世紀的發明家，返回的是true或者false。之後通過呼叫filter方法，將陣列inventors裡面的元素進行是否符合函式bornyear的篩選條件進行過濾。最後返回的是符合條件的一個結果陣列如下。

[
{first: "Albert", last: "Einstein", year: 1879, passed: 1955},
{first: "wawa", last: "fs", year: 1830, passed: 1905},
{first: "Hanna", last: "Hammarström", year: 1829, passed: 1909}
]
複製程式碼

map(對映操作，對原陣列每個元素進行處理，並回傳新的陣列。以第二題為例)

 const fullnames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
 console.log(fullnames);
複製程式碼

列印出來的結果為：

["Albert Einstein", "wawa fs", "grvd xcvxcv", "Hanna Hammarström"]
// inventors.map後面通過傳入原運算元組，然後再進行字串拼接的處理。最終返回的陣列是一個經過處理之後的新陣列
複製程式碼

sort(排序操作，預設排序順序是根據字串Unicode碼點，如10在2之前,而數字又在大寫字母之前, 大寫字母在小寫字母之前。也可使用比較函式，陣列會按照呼叫該函式的返回值排序，格式如下)

function compare(a, b) {
    if (a < b) {
    // 按某種排序標準進行比較, a 小於 b
      return -1;
    }
    if (a > b) {
      return 1;
    }
    // 當a === b 時候
      return 0;
}

複製程式碼

要比較數字而非字串，比較函式可以簡單的以 a 減 b，如下的函式將會將陣列升序排列：

 function compareNumbers(a, b) {
    return a - b;
 }
複製程式碼

針對第三題，我們就可以簡單用加減比較

 const birthdate = inventors.sort((inventora, inventorb) => (inventorb.year - inventora.year));
console.log(birthdate)
複製程式碼

列印出來的結果為：

[
{first: "grvd", last: "xcvxcv", year: 1900, passed: 1977},
{first: "Albert", last: "Einstein", year: 1879, passed: 1955},
{first: "wawa", last: "fs", year: 1830, passed: 1905},
{first: "Hanna", last: "Hammarström", year: 1829, passed: 1909}
]
複製程式碼

reduce()（歸併操作，總共兩個引數，第一個是函式，可以理解為累加器，遍歷陣列累加回傳的返回值，第二個是初始數值。如果沒有提供初始值，則將使用陣列中的第一個元素。以第四題為例：）

const totalyears = inventors.reduce((total, inventor) => { return total + (inventor.passed - inventor.year); }, 0);
console.log(totalyears);
複製程式碼

可以將陣列進行便利，按照篩選條件找出所要累加的值。返回的是累加的結果

相關文章