15個(gè)必須知道的JavaScript數(shù)組方法
（給前端大學(xué)加星標(biāo)，提升前端技能.）原文 |?https://www.ibrahima-ndaw.com/blog/15-must-known-javascript-array-methods-in-2020/譯文 | 楊小二在JavaScript中，數(shù)組是一個(gè)特殊的變量，用于存儲(chǔ)不同的元素。它具有一些內(nèi)置屬性和方法，可用于根據(jù)需要添加，刪除，迭代或操作數(shù)。并且了解JavaScript數(shù)組方法可以提升你的開發(fā)技能。
在本文中，我們將介紹15種關(guān)于JavaScript的數(shù)組方法，這些方法可以幫助你正確地處理數(shù)據(jù)。
- 1.some（）
- 2. reduce（）
- 3. Every（）
- 4. map（）
- 5. flat（）
- 6. filter（）
- 7. forEach（）
- 8. findIndex（）
- 9. find（）
- 10. sort（）
- 11. concat（）
- 12. fill（）
- 13. includes（）
- 14. reverse（）
- 15. flatMap（）
注意，大多數(shù)情況下，我們將簡(jiǎn)化作為參數(shù)傳遞的函數(shù)。
//?Instead?of?using?this?waymyAwesomeArray.some(test => { if (test === "d") { return test }})// We'll use the shorter onemyAwesomeArray.some(test => test === "d")2、reduce（）此方法接收一個(gè)函數(shù)作為累加器。它為數(shù)組中的每個(gè)元素依次執(zhí)行回調(diào)函數(shù)，不包括數(shù)組中被刪除或者從未被賦值的元素。函數(shù)應(yīng)用于累加器，數(shù)組中的每個(gè)值最后只返回一個(gè)值。譯者注：reduce() 方法接受四個(gè)參數(shù)：初始值（上一次回調(diào)的返回值），當(dāng)前元素值，當(dāng)前索引，原數(shù)組。const?myAwesomeArray?=?["a",?"b",?"c",?"d",?"e"]myAwesomeArray.some(test => test === "d")//------->?Output?:?true
3、Every（）此方法是對(duì)數(shù)組中每項(xiàng)運(yùn)行給定函數(shù)，如果數(shù)組的每個(gè)元素都與測(cè)試匹配，則返回true，反之則返回false。const?myAwesomeArray?=?[1,?2,?3,?4,?5]myAwesomeArray.reduce((total, value) => total * value)//?1?*?2?*?3?*?4?*?5//------->?Output?=?120
4、map（）該方法返回一個(gè)新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。它按照原始數(shù)組元素順序依次處理元素。譯者注：map() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)；map() 不會(huì)改變?cè)紨?shù)組。const?myAwesomeArray?=?["a",?"b",?"c",?"d",?"e"]myAwesomeArray.every(test => test === "d")// ------->?Output?:?falseconst?myAwesomeArray2?=?["a",?"a",?"a",?"a",?"a"]myAwesomeArray2.every(test => test === "a")//------->?Output?:?true
5、flat（）此方法創(chuàng)建一個(gè)新數(shù)組，其中包含子數(shù)組上的holden元素，并將其平整到新數(shù)組中。請(qǐng)注意，此方法只能進(jìn)行一個(gè)級(jí)別的深度。const myAwesomeArray = [5, 4, 3, 2, 1]myAwesomeArray.map(x => x * x)//------->?Output?:?25//??????????????????16//??????????????????9//??????????????????4//??????????????????1
6、filter（）該方法接收一個(gè)函數(shù)作為參數(shù)。并返回一個(gè)新數(shù)組，該數(shù)組包含該數(shù)組的所有元素，作為參數(shù)傳遞的過濾函數(shù)對(duì)其返回true。譯者注：filter（）方法是對(duì)數(shù)據(jù)中的元素進(jìn)行過濾，也就是說是不能修改原數(shù)組中的數(shù)據(jù)，只能讀取原數(shù)組中的數(shù)據(jù)，callback需要返回布爾值；為true的時(shí)候，對(duì)應(yīng)的元素留下來；為false的時(shí)候，對(duì)應(yīng)的元素過濾掉。const myAwesomeArray = [[1, 2], [3, 4], 5]myAwesomeArray.flat()//------->?Output?:?[1,?2,?3,?4,?5]
7、forEach（）此方法用于調(diào)用數(shù)組的每個(gè)元素。并將元素傳遞給回調(diào)函數(shù)。譯者注: forEach() 對(duì)于空數(shù)組是不會(huì)執(zhí)行回調(diào)函數(shù)的。const myAwesomeArray = [ { id: 1, name: "john" },{ id: 2, name: "Ali" }, { id: 3, name: "Mass" },{ id: 4, name: "Mass" },]myAwesomeArray.filter(element => element.name === "Mass")//------->?Output?:?0:{id:?3,?name:?"Mass"},//??????????????????1:{id:?4,?name:?"Mass"}
8、?findIndex（）此方法返回傳入一個(gè)測(cè)試條件（函數(shù)）符合條件的數(shù)組第一個(gè)元素位置。它為數(shù)組中的每個(gè)元素都調(diào)用一次函數(shù)執(zhí)行，當(dāng)數(shù)組中的元素在測(cè)試條件時(shí)返回 true 時(shí), findIndex() 返回符合條件的元素的索引位置，之后的值不會(huì)再調(diào)用執(zhí)行函數(shù)。如果沒有符合條件的元素返回 -1譯者注：findIndex() 對(duì)于空數(shù)組，函數(shù)是不會(huì)執(zhí)行的， findIndex() 并沒有改變數(shù)組的原始值。const myAwesomeArray = [ { id: 1, name: "john" },{ id: 2, name: "Ali" }, { id: 3, name: "Mass" },]myAwesomeArray.forEach(element => console.log(element.name))//------->?Output?:?john//??????????????????Ali//??????????????????Mass
9、?find（）此方法返回通過測(cè)試（函數(shù)內(nèi)判斷）的數(shù)組的第一個(gè)元素的值。find() 方法為數(shù)組中的每個(gè)元素都調(diào)用一次函數(shù)執(zhí)行：當(dāng)數(shù)組中的元素在測(cè)試條件時(shí)回 true 時(shí), find() 返回符合條件的元素，之后的值不會(huì)再調(diào)用執(zhí)行函數(shù)。如果沒有符合條件的元素返回 undefined。譯者注: find() 對(duì)于空數(shù)組，函數(shù)是不會(huì)執(zhí)行的；find() 并沒有改變數(shù)組的原始值。const myAwesomeArray = [ { id: 1, name: "john" },{ id: 2, name: "Ali" }, { id: 3, name: "Mass" },]myAwesomeArray.findIndex(element => element.id === 3)//?------->?Output?:?2myAwesomeArray.findIndex(element => element.id === 7)//------->?Output?:?-1
10、?sort（）此方法接收一個(gè)函數(shù)作為參數(shù)。它對(duì)數(shù)組的元素進(jìn)行排序并返回它。也可以使用含有參數(shù)的sort()方法進(jìn)行排序。const myAwesomeArray = [ { id: 1, name: "john" },{ id: 2, name: "Ali" }, { id: 3, name: "Mass" },]myAwesomeArray.find(element => element.id === 3)//?------->?Output?:?{id:?3,?name:?"Mass"}myAwesomeArray.find(element => element.id === 7)//------->?Output?:?undefined
11、?concat（）此方法用于連接兩個(gè)或多個(gè)數(shù)組/值，它不會(huì)改變現(xiàn)有的數(shù)組。而僅僅返回被連接數(shù)組的一個(gè)新數(shù)組。const?myAwesomeArray?=?[5,?4,?3,?2,?1]//?Sort?from?smallest?to?largestmyAwesomeArray.sort((a, b) => a - b)// ?------->?Output?:?[1,?2,?3,?4,?5]//?Sort?from?largest?to?smallestmyAwesomeArray.sort((a, b) => b - a)//------->?Output?:?[5,?4,?3,?2,?1]
12、?fill（）此方法的作用是使用一個(gè)固定值來替換數(shù)組中的元素。該固定值可以是字母、數(shù)字、字符串、數(shù)組等等。它還有兩個(gè)可選參數(shù)，表示填充起來的開始位置（默認(rèn)為0）與結(jié)束位置（默認(rèn)為array.length）。譯者注：fill() 方法用于將一個(gè)固定值替換數(shù)組的元素。const myAwesomeArray = [1, 2, 3, 4, 5]constmyAwesomeArray2 = [10, 20, 30, 40, 50]myAwesomeArray.concat(myAwesomeArray2)//------->?Output?:?[1,?2,?3,?4,?5,?10,?20,?30,?40,?50]
13、?includes（）const?myAwesomeArray?=?[1,?2,?3,?4,?5]//?The?first?argument?(0)?is?the?value//?The?second?argument?(1)?is?the?starting?index//?The?third?argument?(3)?is?the?ending?indexmyAwesomeArray.fill(0, 1, 3)//------->?Output?:?[1,?0,?0,?4,?5]
譯者注：includes() 方法區(qū)分大小寫。
14、?reverse（）此方法用于顛倒數(shù)組中元素的順序。第一個(gè)元素成為最后一個(gè)，最后一個(gè)元素將成為第一個(gè)。const?myAwesomeArray?=?[1,?2,?3,?4,?5]myAwesomeArray.includes(3)//?------->?Output?:?truemyAwesomeArray.includes(8)//?------->?Output?:?false
15、?flatMap（）該方法將函數(shù)應(yīng)用于數(shù)組的每個(gè)元素，然后將結(jié)果壓縮為一個(gè)新數(shù)組。它在一個(gè)函數(shù)中結(jié)合了flat（）和map（）。const?myAwesomeArray?=?["e",?"d",?"c",?"b",?"a"]myAwesomeArray.reverse()// ------->?Output?:?['a',?'b',?'c',?'d',?'e']
const myAwesomeArray = [[1], [2], [3], [4], [5]]myAwesomeArray.flatMap(arr => arr * 10)//------->?Output?:?[10,?20,?30,?40,?50]//?With?.flat()?and?.map()myAwesomeArray.flat().map(arr => arr * 10)//------->?Output?:?[10,?20,?30,?40,?50]
分享前端好文，點(diǎn)亮?在看?
評(píng)論
圖片
表情