JavaScript 基礎資料篩選、過濾 示範

假設我們有以下使用者資料：

    
    const users = [
        {
            id: 1,
            name: '小明',
            age: 17,
        },
        {
            id: 2,
            name: '老王',
            age: 18,
        },
        {
            id: 3,
            name: '大頭',
            age: 19,
        },
    ];
    

資料過濾

要過濾出年齡大於等於 18 的可以怎麼做？

    
    const result = users.filter(function (user) {
        return user.age >= 18;
    });
    
    console.log(JSON.stringify(result, null, 2));
    // [{"id":2,"name":"老王","age":18},{"id":3,"name":"大頭","age":19}]
    

不過上面的語法太長了，可以簡化成：

    
const result = users.filter(user => user.age >= 18)
    

假設包含上面的條件，現在又要要求 id 要小於等於 2 可以怎麼做？直接再接上一個 filter 即可：

    
    const result = users
        .filter(user => user.age >= 18)
        .filter(user => user.id <= 2);
    

資料重組

如果篩選出來的資料要轉換成另一種方式回傳，可以使用 .map 達成。假設我們只要保留 id 和 name 欄位， age 欄位不需要：

    
    const result = users.map(function (user) {
        return {
            id: user.id,
            name: user.name,
        };
    });

    console.log(JSON.stringify(result));
    // [{"id":1,"name":"小明"},{"id":2,"name":"老王"},{"id":3,"name":"大頭"}]
    

一樣可以簡化：

    
    const result = users.map(user => ({
        id: user.id,
        name: user.name,
    }));
    

也可以修改屬性的名稱和輸出的內容：

    
    const result = users.map(user => ({
        代號: `編號${user.id}`,
        名稱: user.name,
    }));

    console.log(JSON.stringify(result));
    // [{"代號":"編號1","名稱":"小明"},{"代號":"編號2","名稱":"老王"},{"代號":"編號3","名稱":"大頭"}]
    

方法鏈(Method chaining)

在上面的範例中有看到 .filter 之後可以繼續 .filter ，這樣拿上一個結果在同一個程式碼片段繼續執行的程式撰寫方式就被稱呼為「方法鏈(Method chaining)」，可以省去計算過程中需要建立只使用一次的變數，當遇到比較複雜的資料處理時就可以很簡單優雅的處理：

    
    const result = users
        .filter(user => user.age >= 18)
        .filter(user => user.id <= 2)
        .map(user => ({
            代號: `編號${user.id}`,
            名稱: user.name,
        }));

    console.log(JSON.stringify(result));
    // [{"代號":"編號2","名稱":"老王"}]