悟透前端 | javascript數組之includes、reduce

在過去的幾年中，JavaScript語言進行了屢次更新。爲了跟上技術更新的腳步，時刻保持一顆學習的心。趁着休息的時間學習熟悉一下數組的includes、reduce的使用。數組

Array.prototype.includes

ES7添加對此方法的支持，includes() 方法用來判斷一個數組是否包含一個指定的值的元素，並返回布爾值true或false，若是包含則返回 true，不然返回 false。markdown

語法

arr.includes(valueToFind[, fromIndex])函數

參數

valueToFind（必須）：須要查找的元素值，比較字符串和字符時是區分大小寫。
fromIndex（可選）：從數組 fromIndex 索引處開始查找 valueToFind。
- 負數，則按升序從 array.length + fromIndex 的索引開始搜（即便從末尾開始往前跳 fromIndex 的絕對值個索引，而後日後搜尋）。
- 默認值爲 0。

返回值

包含則返回 true，不然返回 false。學習

實例

// ES5 Code
const numbers = ["一", "二", "三", "四"];
console.log(numbers.indexOf("一") > -1); // true
console.log(numbers.indexOf("六") > -1); // false

// ES7 Code
console.log(numbers.includes("一")); // true
console.log(numbers.includes("六")); // false

console.log(numbers.includes("一",1)); // false，從數組索引爲`1`日後找
console.log(numbers.includes("一", -3)); // true，從 `array.length + fromIndex` 的索引開始完後找，跟上面從索引爲1開始等效
複製代碼

使用 includes 方法可使代碼簡短易懂。include 方法在比較值時也很方便，以下代碼。spa

// 過去
const day = "星期二";
if (day === "星期二" || day === "星期三" || day === "星期四") {
    console.log(day);
}

// 如今
if (["星期二", "星期三", "星期四"].includes(day)) {
    console.log(day);
}
複製代碼

Array.prototype.reduce

reduce() 方法對數組中的每一個元素執行reducer函數（升序執行），將其結果彙總爲單個返回值。prototype

語法

Array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])code

爲數組中的每個元素依次執行callback函數，不包括數組中被刪除或從未被賦值的元素。orm

參數

callback（必須）：執行數組中每一個值 (若是沒有提供 initialValue則第一個值除外)的reducer函數，包含四個參數
- accumulator（必須）：累計器累計回調的返回值; 它是上一次調用回調時返回的累積值，初始值能夠經過initialValue定義，默認爲數組的第一個元素值，累加器將保留上一個操做的值，就像靜態變量同樣索引
- currentValue（必須）：數組中正在處理的元素ip
- index（可選）：數組中正在處理的當前元素的索引。若是提供了initialValue，則起始索引號爲 0，不然從索引 1 起始。
  
  注意：若是沒有提供 initialValue，reduce 會從索引 1 的地方開始執行 callback 方法，跳過第一個索引。若是提供 initialValue，從索引 0 開始。
- array（可選）：調用 reduce() 的數組
initialValue（可選）：做爲第一次調用 callback 函數時的第一個參數的值。若是沒有提供初始值，則將使用數組中的第一個元素。 在沒有初始值的空數組上調用 reduce 將報錯。

返回值

函數累計處理的結果。

實例

const arrNumbers = [1, 2, 3, 4, 5];
const reduceNumbers = (arrayNumbers, accumulatorInitVal = false) => {
    const reduceCallback = (accumulator, currentVal, currentIndex) => {
        console.log(`當前索引：${currentIndex}`);
        return accumulator + currentVal;
    };
    return accumulatorInitVal
        ? arrayNumbers.reduce(reduceCallback, accumulatorInitVal)
        : arrayNumbers.reduce(reduceCallback);
};

console.log(reduceNumbers(arrNumbers)); // 15，累計器初始值爲數組的第一個元素的值1
console.log(reduceNumbers(arrNumbers, 10)); // 25，累計器初始值爲10
複製代碼

console.log(當前索引：${currentIndex})，是爲了更加直觀的看到索引值。

第一次未定義初始值輸出以下：

當前索引：1
當前索引：2
當前索引：3
當前索引：4
複製代碼

第二次定義了累計器初始值輸出以下：

當前索引：0
當前索引：1
當前索引：2
當前索引：3
當前索引：4
複製代碼

接下來咱們來看一個奇葩需求，出於某種緣由，須要一個包含全部用戶全名的新數組（他們的姓，加上他們的名字），但只有當他們是20多歲，而且他們的全名是3個字的時候才須要。不要問咱們爲何須要這麼奇葩的數據子集，產品經理問了，咱們很樂意幫忙^_^

const users = [
    {
        firstName: "堅",
        lastName: "孫",
        age: 37,
    },
    {
        firstName: "策",
        lastName: "孫",
        age: 21,
    },
    {
        firstName: "葛亮",
        lastName: "諸",
        age: 28,
    },
    {
        firstName: "備",
        lastName: "劉",
        age: 44,
    },
    {
        firstName: "統",
        lastName: "龐",
        age: 22,
    },
    {
        firstName: "維",
        lastName: "姜",
        age: 19,
    },
    {
        firstName: "伯溫",
        lastName: "劉",
        age: 22,
    },
];
const getFullName = (user) => `${user.lastName}${user.firstName}`;
const filterByAge = (user) => user.age >= 20 && user.age < 30;

// 常規實現
const getFilterResult = users
    //  第一步篩選年齡20-30之間的用戶
    .filter((user) => filterByAge(user))
    //  拼接全名
    .map((user) => getFullName(user))
    //  篩選
    .filter((fullName) => fullName.length === 3);

console.log(getFilterResult);   // [ '諸葛亮', '劉伯溫' ]

// 迭代方式實現
const iterationsFilterResult = (arrayResult, currentUser) => {
    const fullname = getFullName(currentUser);
    if (filterByAge(currentUser) && fullname.length === 3) {
        arrayResult.push(fullname);
    }
    return arrayResult;
};
console.log(users.reduce(iterationsFilterResult, []));  // [ '諸葛亮', '劉伯溫' ]
複製代碼