javascript數(shù)組includes、reduce的基本使用
前言
在過去的幾年中,JavaScript語言進行了多次更新。為了跟上技術更新的腳步,時刻保持一顆學習的心。趁著休息的時間學習熟悉一下數(shù)組的includes、reduce的使用。
Array.prototype.includes
ES7添加對此方法的支持,includes() 方法用來判斷一個數(shù)組是否包含一個指定的值的元素,并返回布爾值true或false,如果包含則返回 true,否則返回 false。
語法
arr.includes(valueToFind[, fromIndex])
參數(shù)
- valueToFind(必須):需要查找的元素值,比較字符串和字符時是區(qū)分大小寫。
- fromIndex(可選):從數(shù)組 fromIndex 索引處開始查找 valueToFind。
- 負數(shù) ,則按升序從 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,從數(shù)組索引為`1`往后找 console.log(numbers.includes("一", -3)); // true,從 `array.length + fromIndex` 的索引開始完后找,跟上面從索引為1開始等效
使用 includes 方法可以使代碼簡短易懂。include 方法在比較值時也很方便,如下代碼。
// 過去 const day = "星期二"; if (day === "星期二" || day === "星期三" || day === "星期四") { console.log(day); } // 現(xiàn)在 if (["星期二", "星期三", "星期四"].includes(day)) { console.log(day); }
Array.prototype.reduce
reduce() 方法對數(shù)組中的每個元素執(zhí)行reducer函數(shù)(升序執(zhí)行),將其結果匯總為單個返回值。
語法
Array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
為數(shù)組中的每一個元素依次執(zhí)行callback函數(shù),不包括數(shù)組中被刪除或從未被賦值的元素。
參數(shù)
- callback(必須):執(zhí)行數(shù)組中每個值 (如果沒有提供 initialValue則第一個值除外)的reducer函數(shù),包含四個參數(shù)
- accumulator(必須):累計器累計回調的返回值; 它是上一次調用回調時返回的累積值,初始值可以通過initialValue定義,默認為數(shù)組的第一個元素值,累加器將保留上一個操作的值,就像靜態(tài)變量一樣
- currentValue(必須):數(shù)組中正在處理的元素
- index(可選):數(shù)組中正在處理的當前元素的索引。 如果提供了initialValue,則起始索引號為 0,否則從索引 1 起始。
注意:如果沒有提供 initialValue,reduce 會從索引 1 的地方開始執(zhí)行 callback 方法,跳過第一個索引。如果提供 initialValue,從索引 0 開始。 - array(可選):調用 reduce() 的數(shù)組
- initialValue(可選):作為第一次調用 callback 函數(shù)時的第一個參數(shù)的值。 如果沒有提供初始值,則將使用數(shù)組中的第一個元素。 在沒有初始值的空數(shù)組上調用 reduce 將報錯。
返回值
函數(shù)累計處理的結果。
實例
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,累計器初始值為數(shù)組的第一個元素的值1 console.log(reduceNumbers(arrNumbers, 10)); // 25,累計器初始值為10
console.log(當前索引:${currentIndex}),是為了更加直觀的看到索引值。
第一次未定義初始值輸出如下:
當前索引:1
當前索引:2
當前索引:3
當前索引:4
第二次定義了累計器初始值輸出如下:
當前索引:0
當前索引:1
當前索引:2
當前索引:3
當前索引:4
接下來我們來看一個奇葩需求,出于某種原因,需要一個包含所有用戶全名的新數(shù)組(他們的姓,加上他們的名字),但只有當他們是20多歲,并且他們的全名是3個字的時候才需要。不要問我們?yōu)槭裁葱枰@么奇葩的數(shù)據(jù)子集,產(chǎn)品經(jīng)理問了,我們很樂意幫忙^_^
const users = [ { firstName: "堅", 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ī)實現(xiàn) const getFilterResult = users // 第一步篩選年齡20-30之間的用戶 .filter((user) => filterByAge(user)) // 拼接全名 .map((user) => getFullName(user)) // 篩選 .filter((fullName) => fullName.length === 3); console.log(getFilterResult); // [ '諸葛亮', '劉伯溫' ] // 迭代方式實現(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, [])); // [ '諸葛亮', '劉伯溫' ]
總結
到此這篇關于javascript數(shù)組includes、reduce基本使用的文章就介紹到這了,更多相關javascript數(shù)組includes、reduce內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
支付寶小程序實現(xiàn)類似微信多行輸入功能(思路詳解)
這篇文章主要介紹了支付寶小程序實現(xiàn)類似微信多行輸入功能,輸入超過 8 行的時候會出現(xiàn)滾動,這樣做的好處就是輸入框不會直接頂?shù)巾撁孀铐敳?支付寶小程序實現(xiàn)多行輸入框:使用textarea多行輸入框實現(xiàn),感興趣的朋友一起看看吧2024-02-02JavaScript Date對象詳解及時間戳和時間的相互轉換問題
這篇文章主要介紹了JavaScript Date對象詳解及時間戳和時間的相互轉換問題,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01JavaScript地圖拖動功能SpryMap的簡單實現(xiàn)
SpryMap是一個獨立的并且是輕量級的JavaScript類庫,它不依賴于任何其他的JS框架2013-07-07