JavaScript數(shù)組 幾個(gè)常用方法總結(jié)
1、前言
數(shù)組方法有太多了,本文記錄一些本人容易記錯(cuò)的一些數(shù)組方法,用于鞏固及復(fù)習(xí)。
后續(xù)會(huì)慢慢的將其他數(shù)組方法添加進(jìn)來(lái)。
善用數(shù)組方法可以使數(shù)據(jù)處理變的優(yōu)雅且簡(jiǎn)單。
那下面讓我們開始吧:
2、filter()
描述:
filter()
方法創(chuàng)建一個(gè)新數(shù)組,并將符合條件的所有元素添加到創(chuàng)建的新數(shù)組中。
語(yǔ)法:
Array.filter(callback(element, index, array) { // 函數(shù)體 }, thisValue)
參數(shù):
callback
與thisValue
:
| 參數(shù) | 是否可選 | 描述 |
---|---|---|---|
參數(shù)一 | callback | 必選 | 用來(lái)測(cè)試數(shù)組的每個(gè)元素的函數(shù)。返回 true 表示該元素通過(guò)測(cè)試,保留該元素,false 則不保留。它接收三個(gè)參數(shù)。 |
參數(shù)二 | thisValue | 可選 | 執(zhí)行 callback 時(shí),用于 this 的值。 對(duì)象作為該執(zhí)行回調(diào)時(shí)使用,傳遞給函數(shù)。 如果省略了 thisValue ,"this" 的值為 "undefined" |
callback的參數(shù)列表:
| 參數(shù) | 是否可選 | 描述 |
---|---|---|---|
參數(shù)一 | element | 必選 | 當(dāng)前元素 |
參數(shù)二 | index | 可選 | 當(dāng)前元素的索引值 |
參數(shù)三 | array | 可選 | 調(diào)用了 filter 的數(shù)組本身 |
thisValue的參數(shù):
執(zhí)行 callback
時(shí),用于 this
的值。
返回值:
是一個(gè)由 filter()
參數(shù)一函數(shù)的返回值組成的新數(shù)組
示例:
let users = [ {id: 11, name: "孫悟空"}, {id: 21, name: "豬八戒"}, {id: 31, name: "沙和尚"} ]; // 返回前兩個(gè)用戶的數(shù)組 let filterUsers = users.filter(item => item.id < 31); console.log(filterUsers.length); // 2
3、map()
描述:
map()
方法創(chuàng)建一個(gè)新數(shù)組,新數(shù)組的每個(gè)元素是調(diào)用一次給定函數(shù)的返回值。
語(yǔ)法:
Array.map(callback(currentValue, index, array) { // 函數(shù)體 }, thisValue)
參數(shù):
callback
與thisValue
| 參數(shù) | 是否可選 | 描述 |
---|---|---|---|
參數(shù)一 | callback | 必選 | 數(shù)組中的每個(gè)元素都要運(yùn)行的回調(diào)函數(shù)。它接收三個(gè)參數(shù)。 |
參數(shù)二 | thisValue | 可選 | 執(zhí)行 callback 時(shí),用于 this 的值。 對(duì)象作為該執(zhí)行回調(diào)時(shí)使用,傳遞給函數(shù)。 如果省略了 thisValue ,"this" 的值為 "undefined" |
callback的參數(shù)列表:
| 參數(shù) | 是否可選 | 描述 |
---|---|---|---|
參數(shù)一 | element | 必選 | 當(dāng)前元素 |
參數(shù)二 | index | 可選 | 當(dāng)前元素的索引值 |
參數(shù)三 | array | 可選 | 調(diào)用了 filter 的數(shù)組本身 |
thisValue的參數(shù):
執(zhí)行 callback
時(shí),用于 this
的值。
返回值:
是一個(gè)由原數(shù)組每個(gè)元素執(zhí)行回調(diào)函數(shù)的結(jié)果組成的新數(shù)組。
示例:
let number = [1, 2, 3].map(item => item + 1); console.log(lengths); // 2, 3, 4
4、sort()
描述:
map()
方法在原數(shù)組上進(jìn)行修改更改元素的順序
注:默認(rèn)排序順序是在將元素轉(zhuǎn)換為字符串,然后比較它們的UTF-16代碼單元值序列時(shí)
語(yǔ)法:
Array.sort( compareFunction )
參數(shù):
compareFunction
| 參數(shù) | 是否可選 | 描述 |
---|---|---|---|
參數(shù)一 | compareFunction | 可選 | 規(guī)定排列順序的函數(shù)。如果省略,元素按照轉(zhuǎn)換為的字符串的各個(gè)字符的Unicode位點(diǎn)進(jìn)行排序。 |
compareFunction的參數(shù)列表:
| 參數(shù) | 是否可選 | 描述 |
---|---|---|---|
參數(shù)一 | firstEl | 必選 | 第一個(gè)用于比較的元素。 |
參數(shù)二 | secondEl | 必選 | 第二個(gè)用于比較的元素。 |
compareFunction返回值
返回一個(gè)說(shuō)明這兩個(gè)值順序的數(shù)字
- 若 a 小于 b,在排序后的數(shù)組中 a 應(yīng)該出現(xiàn)在 b 之前,則返回一個(gè)小于 0 的值。
- 若 a 等于 b,則返回 0。
- 若 a 大于 b,則返回一個(gè)大于 0 的值。
返回值:
返回值為排序后的數(shù)組,但是返回值通常會(huì)被忽略,因?yàn)樾薷牧嗽瓟?shù)組。
示例:
let number = [1, 2, 3].map(item => item + 1); console.log(lengths); // 2, 3, 4
5、reduce()
描述:
reduce()
方法為數(shù)組中的每一個(gè)元素依次執(zhí)行(升序執(zhí)行)回調(diào)函數(shù),不包括數(shù)組中被刪除或從未被賦值的元素。將其結(jié)果計(jì)算為一個(gè)值。
注:reduce() 可以作為一個(gè)高階函數(shù),用于函數(shù)的 compose。
語(yǔ)法:
Array.reduce(callback(accumulator, currentValue, index, array), initialValue)
參數(shù):
callback
與initialValue
| 參數(shù) | 是否可選 | 描述 |
---|---|---|---|
參數(shù)一 | callback | 必選 | 執(zhí)行數(shù)組中每個(gè)數(shù)組元素的函數(shù) (如果沒有initialValue初始值那么第一個(gè)值不會(huì)執(zhí)行改函數(shù))它接收四個(gè)參數(shù)。 |
參數(shù)二 | initialValue | 可選 | callback函數(shù)的初始值 |
callback的參數(shù)列表:
| 參數(shù) | 是否可選 | 描述 |
---|---|---|---|
參數(shù)一 | accumulator | 必選 | 累計(jì)器累計(jì)回調(diào)的返回值; 它是上一次調(diào)用回調(diào)時(shí)返回的累積值,或initialValue。 |
參數(shù)二 | currentValue | 必選 | 當(dāng)前元素 |
參數(shù)三 | index | 可選 | 當(dāng)前元素的索引值 |
參數(shù)四 | array | 可選 | 調(diào)用了 reduce() 的數(shù)組本身 |
initialValue的參數(shù):
作為第一次調(diào)用 callback
函數(shù)時(shí)的第一個(gè)參數(shù)的值。 如果沒有提供初始值,則將使用數(shù)組中的第一個(gè)元素作為初始值。 在沒有初始值的空數(shù)組上調(diào)用 reduce
將報(bào)錯(cuò)。
返回值:
函數(shù)累計(jì)處理后的結(jié)果
執(zhí)行完所有callback
函數(shù)的accumulator
參數(shù)
注: 我們的 reducer 函數(shù)的返回值分配給累計(jì)器,該返回值在數(shù)組的每個(gè)迭代中被記住,并最后成為最終的單個(gè)結(jié)果值。
示例:
let number = [1, 2, 3, 4]; let result = number.reduce((sum, current) => sum + current, 0); console.log(result); // 10
6、forEach()
描述:
reduce() 方法為數(shù)組中的每一個(gè)元素依次執(zhí)行(升序執(zhí)行)回調(diào)函數(shù),不包括數(shù)組中被刪除或從未被賦值的元素。將其結(jié)果計(jì)算為一個(gè)值。
注:reduce() 可以作為一個(gè)高階函數(shù),用于函數(shù)的 compose。
語(yǔ)法:
Array.forEach(callback(currentValue , index , array), thisValue)
參數(shù):
callback
與thisValue
| 參數(shù) | 是否可選 | 描述 |
---|---|---|---|
參數(shù)一 | callback | 必選 | 執(zhí)行數(shù)組中每個(gè)數(shù)組元素的函數(shù),它接收三個(gè)參數(shù)。 |
參數(shù)二 | thisValue | 可選 | 執(zhí)行 callback 時(shí),用于 this 的值。 對(duì)象作為該執(zhí)行回調(diào)時(shí)使用,傳遞給函數(shù)。 如果省略了 thisValue ,"this" 的值為 "undefined" |
callback的參數(shù)列表:
| 參數(shù) | 是否可選 | 描述 |
---|---|---|---|
參數(shù)一 | currentValue | 必選 | 當(dāng)前元素 |
參數(shù)二 | index | 可選 | 當(dāng)前元素的索引值 |
參數(shù)三 | array | 可選 | 調(diào)用了 forEach() 的數(shù)組本身 |
thisValue的參數(shù):
執(zhí)行 callback
時(shí),用于 this
的值。
返回值:
該方法沒有返回值。
示例:
let number = [1, 2, 3, 4]; number.forEach((item, index ,array) =>{ console.log(item); // 1/2/3/4 });
7、方法列表
方法屬性:
方法 | 改變?cè)瓟?shù)組 | 返回值描述 | 描述 |
---|---|---|---|
filter() | 否 | 過(guò)濾后的新數(shù)組 | 過(guò)濾器 |
map() | 否 | 循環(huán)后的新數(shù)組 | 循環(huán) |
sort() | 是 | 為排序后的數(shù)組 | 排序 |
reduce() | 否 | 為函數(shù)累計(jì)處理后的結(jié)果 | 累加器 |
forEach() | 是 | 沒有返回值為undefined | 循環(huán) |
到此這篇關(guān)于JavaScript數(shù)組 幾個(gè)常用方法總結(jié)的文章就介紹到這了,更多相關(guān)JavaScript數(shù)組 幾個(gè)常用方法 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
8、本文參考
MDN中文官網(wǎng)https://developer.mozilla.org/zh-CN/
W3School 簡(jiǎn)體中文版https://www.w3school.com.cn/
相關(guān)文章
采用CSS和JS,剛好我最近有個(gè)站點(diǎn)要用到下拉菜單!
采用CSS和JS,剛好我最近有個(gè)站點(diǎn)要用到下拉菜單!...2006-06-06Skypack布局前端基建實(shí)現(xiàn)過(guò)程詳解
這篇文章主要為大家介紹了Skypack布局前端基建過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07微信小程序 網(wǎng)絡(luò)請(qǐng)求API詳解
這篇文章主要介紹了微信小程序 網(wǎng)絡(luò)請(qǐng)求API詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10Thinkphp5微信小程序獲取用戶信息接口的實(shí)例詳解
這篇文章主要介紹了Thinkphp5微信小程序獲取用戶信息接口的實(shí)例詳解的相關(guān)資料,希望通過(guò)本文能幫助到大家,需要的朋友可以參考下2017-09-09JS實(shí)現(xiàn)可恢復(fù)的文件上傳示例詳解
這篇文章主要為大家介紹了JS實(shí)現(xiàn)可恢復(fù)的文件上傳示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12小程序開發(fā)踩坑:頁(yè)面窗口定位(相對(duì)于瀏覽器定位)(推薦)
這篇文章主要介紹了小程序開發(fā)頁(yè)面窗口定位,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04Zod進(jìn)行TypeScript類型驗(yàn)證使用詳解
這篇文章主要為大家介紹了Zod進(jìn)行TypeScript類型驗(yàn)證使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09微信小程序-getUserInfo回調(diào)的實(shí)例詳解
這篇文章主要介紹了微信小程序-getUserInfo回調(diào)的實(shí)例詳解的相關(guān)資料,希望通過(guò)本文能幫助到大家,讓大家理解掌握這部分內(nèi)容,需要的朋友可以參考下2017-10-10