欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript數(shù)組includes、reduce的基本使用

 更新時(shí)間:2021年07月02日 15:41:07   作者:天行無(wú)忌  
這篇文章主要給大家介紹了關(guān)于javascript數(shù)組includes、reduce的基本使用方法,includes方法是用于檢查特定元素是包含在數(shù)組還是字符串中的方法,而reduce用法則有很多,需要的朋友可以參考下

前言

在過(guò)去的幾年中,JavaScript語(yǔ)言進(jìn)行了多次更新。為了跟上技術(shù)更新的腳步,時(shí)刻保持一顆學(xué)習(xí)的心。趁著休息的時(shí)間學(xué)習(xí)熟悉一下數(shù)組的includes、reduce的使用。

Array.prototype.includes

ES7添加對(duì)此方法的支持,includes() 方法用來(lái)判斷一個(gè)數(shù)組是否包含一個(gè)指定的值的元素,并返回布爾值true或false,如果包含則返回 true,否則返回 false。

語(yǔ)法

arr.includes(valueToFind[, fromIndex])

參數(shù)

  • valueToFind(必須):需要查找的元素值,比較字符串和字符時(shí)是區(qū)分大小寫。
  • fromIndex(可選):從數(shù)組 fromIndex 索引處開始查找 valueToFind。
    • 負(fù)數(shù) ,則按升序從 array.length + fromIndex 的索引開始搜 (即使從末尾開始往前跳 fromIndex 的絕對(duì)值個(gè)索引,然后往后搜尋)。
    • 默認(rèn)值為 0。

返回值

包含則返回 true,否則返回 false。

實(shí)例

// 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,從數(shù)組索引為`1`往后找
console.log(numbers.includes("一", -3)); // true,從 `array.length + fromIndex` 的索引開始完后找,跟上面從索引為1開始等效

使用 includes 方法可以使代碼簡(jiǎn)短易懂。include 方法在比較值時(shí)也很方便,如下代碼。

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

// 現(xiàn)在
if (["星期二", "星期三", "星期四"].includes(day)) {
    console.log(day);
}

Array.prototype.reduce

reduce() 方法對(duì)數(shù)組中的每個(gè)元素執(zhí)行reducer函數(shù)(升序執(zhí)行),將其結(jié)果匯總為單個(gè)返回值。

語(yǔ)法

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

為數(shù)組中的每一個(gè)元素依次執(zhí)行callback函數(shù),不包括數(shù)組中被刪除或從未被賦值的元素。

參數(shù)

  • callback(必須):執(zhí)行數(shù)組中每個(gè)值 (如果沒有提供 initialValue則第一個(gè)值除外)的reducer函數(shù),包含四個(gè)參數(shù)
    • accumulator(必須):累計(jì)器累計(jì)回調(diào)的返回值; 它是上一次調(diào)用回調(diào)時(shí)返回的累積值,初始值可以通過(guò)initialValue定義,默認(rèn)為數(shù)組的第一個(gè)元素值,累加器將保留上一個(gè)操作的值,就像靜態(tài)變量一樣
    • currentValue(必須):數(shù)組中正在處理的元素
    • index(可選):數(shù)組中正在處理的當(dāng)前元素的索引。 如果提供了initialValue,則起始索引號(hào)為 0,否則從索引 1 起始。
      注意:如果沒有提供 initialValue,reduce 會(huì)從索引 1 的地方開始執(zhí)行 callback 方法,跳過(guò)第一個(gè)索引。如果提供 initialValue,從索引 0 開始。
    • array(可選):調(diào)用 reduce() 的數(shù)組
  • initialValue(可選):作為第一次調(diào)用 callback 函數(shù)時(shí)的第一個(gè)參數(shù)的值。 如果沒有提供初始值,則將使用數(shù)組中的第一個(gè)元素。 在沒有初始值的空數(shù)組上調(diào)用 reduce 將報(bào)錯(cuò)。

返回值

函數(shù)累計(jì)處理的結(jié)果。

實(shí)例

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

console.log(reduceNumbers(arrNumbers)); // 15,累計(jì)器初始值為數(shù)組的第一個(gè)元素的值1
console.log(reduceNumbers(arrNumbers, 10)); // 25,累計(jì)器初始值為10

console.log(當(dāng)前索引:${currentIndex}),是為了更加直觀的看到索引值。

第一次未定義初始值輸出如下:

當(dāng)前索引:1
當(dāng)前索引:2
當(dāng)前索引:3
當(dāng)前索引:4

第二次定義了累計(jì)器初始值輸出如下:

當(dāng)前索引:0
當(dāng)前索引:1
當(dāng)前索引:2
當(dāng)前索引:3
當(dāng)前索引:4

接下來(lái)我們來(lái)看一個(gè)奇葩需求,出于某種原因,需要一個(gè)包含所有用戶全名的新數(shù)組(他們的姓,加上他們的名字),但只有當(dāng)他們是20多歲,并且他們的全名是3個(gè)字的時(shí)候才需要。不要問(wèn)我們?yōu)槭裁葱枰@么奇葩的數(shù)據(jù)子集,產(chǎn)品經(jīng)理問(wèn)了,我們很樂(lè)意幫忙^_^

const users = [
    {
        firstName: "堅(jiān)",
        lastName: "孫",
        age: 37,
    },
    {
        firstName: "策",
        lastName: "孫",
        age: 21,
    },
    {
        firstName: "葛亮",
        lastName: "諸",
        age: 28,
    },
    {
        firstName: "備",
        lastName: "劉",
        age: 44,
    },
    {
        firstName: "統(tǒng)",
        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;

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

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

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

總結(jié)

到此這篇關(guān)于javascript數(shù)組includes、reduce基本使用的文章就介紹到這了,更多相關(guān)javascript數(shù)組includes、reduce內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論