分享15個(gè)JavaScript的重要數(shù)組方法
前言;
我們會(huì)在構(gòu)建的每個(gè)應(yīng)用程序中使用數(shù)組。它有幾種方法，其中一些非常令人困惑。我列出了 15 種，我們應(yīng)該掌握的數(shù)組方法，因?yàn)樗鼈兘?jīng)常派上用場。
數(shù)組方法的重要一點(diǎn)是有些是可變的，有些是不可變的。在決定針對特定問題使用哪種方法時(shí)，務(wù)必牢記這一點(diǎn)。
此列表中的大多數(shù)數(shù)組方法都采用類似的回調(diào)作為參數(shù)。第一個(gè)參數(shù)是當(dāng)前項(xiàng)，第二個(gè)參數(shù)是索引，第三個(gè)是整個(gè)數(shù)組。現(xiàn)在我們已經(jīng)解決了這個(gè)問題，讓我們從列表開始：
1、ForEach
循環(huán)遍歷數(shù)組中的每個(gè)元素并執(zhí)行回調(diào)函數(shù)。
const arr = [1, 2, 3]; arr.forEach(num => console.log(num)); // Console: 1, 2, 3
2、Map
循環(huán)遍歷數(shù)組中的每個(gè)元素并執(zhí)行回調(diào)函數(shù)。使用回調(diào)函數(shù)的返回值創(chuàng)建一個(gè)新數(shù)組。
const arr = [1, 2, 3, 4, 5]; const areEven = arr.map(num => num % 2 === 0); console.log(areEven); // Console: [false, true, false, true, false]
3、Filter
循環(huán)遍歷數(shù)組中的每個(gè)元素，并僅選擇符合條件的元素。根據(jù)所選元素返回一個(gè)新數(shù)組。
const arr = [1, 2, 3, 4, 5]; const evenNumbers = arr.filter(num => num % 2 === 0); console.log(evenNumbers); // Console [2, 4]
4、Find
查找數(shù)組中滿足條件的第一個(gè)元素。如果沒有找到，將返回 undefined。
const arr = [1, 2, 3, 4, 5]; const firstEvenNumber = arr.find(num => num % 2 === 0); console.log(firstEvenNumber); // Console [2]
5、FindIndex
與前面的方法類似，它返回滿足給定條件的第一個(gè)元素的索引。如果沒有找到，則返回 -1。
const arr = [1, 2, 3, 4, 5]; const firstEvenNumberIdx = arr.findIndex(num => num % 2 === 0); console.log(firstEvenNumberIdx);
6、Reduce
這是一種高級方法，可用于組合數(shù)組的元素。主要區(qū)別在于回調(diào)將累加器作為第一個(gè)參數(shù)?；卣{(diào)的返回值成為下一次迭代的累加器。
const arr = [1, 2, 3, 4, 5]; // `acc` is the value of the accumulator // the acccumulator is return value of the previous callback // the second argument i.e `0` is the default value const sum = arr.reduce((acc, num) => acc + num, 0); console.log(sum); // Console: 15
7、Every
此方法接受一個(gè)返回布爾值的回調(diào)。如果條件對數(shù)組中的所有元素都有效，那么 Every() 將返回 true。
const arr = [1, 2, 3, 4, 5]; const areAllEven = arr.every(num => num % 2 === 0); console.log(areAllEven); // Console: false
8、Some
像前面的方法一樣，這個(gè)方法也接受一個(gè)返回布爾值的回調(diào)。如果條件對至少一個(gè)元素有效，Some() 將返回 true。
const arr = [1, 2, 3, 4, 5]; const isOneEven = arr.some(num % 2 === 0); console.log(isOneEven); // true
9、 Sort
這是一種用于對數(shù)組中的元素進(jìn)行排序的方法。
默認(rèn)情況下，它按升序?qū)?shù)組進(jìn)行排序。它需要一個(gè)回調(diào)函數(shù)，有兩個(gè)元素——a 和 b。如果 a 小于 b，則返回 -1，否則返回 1。
如果它們相等，則返回 0。
const arr = [1, 2, 3, 4, 5]; const descendingArr = arr.sort((a, b) => b - a); console.log(descendingArr);
請記住，與其他數(shù)組方法不同，sort 會(huì)改變數(shù)組。
10、Flat
Flat 用于將嵌套數(shù)組展平為單個(gè)數(shù)組。您可以指定將數(shù)組展平的深度。
const arr = [[[1, 2], [3]], [4, 5]]; const flattenedArr = arr.flat(4); console.log(flattenedArr); // Console [1, 2, 3, 4, 5]
11、 Reverse
反轉(zhuǎn)數(shù)組中元素的順序。
const arr = [1, 2, 3, 4, 5]; const reversedArr = arr.reverse(); console.log(reversedArr); // Console [5, 4, 3, 2, 1]
12、Include
如果數(shù)組中存在元素，則此方法返回 true。
const arr = [1, 2, 3, 4, 5]; console.log(arr.includes(5)); // true console.log(arr.includes(10)); // false
13、Fill
fill 方法將數(shù)組的元素設(shè)置為給定值。當(dāng)我想使用 map/forEach 方法特定次數(shù)時(shí)，我喜歡使用此方法。
const emptyArr = new Array(5); // The problem with this is that you get `[empty x 10]` // You need real values to map over it. const filledArr = emptyArr.fill(3); // Console [3, 3, 3, 3, 3]
14、At
此方法返回給定索引的元素。這與訪問（即 arr[1]）元素的傳統(tǒng)方式之間的區(qū)別在于它也支持負(fù)索引。
const arr = [1, 2, 3, 4, 5]; console.log(arr.at(1)); // 2 console.log(arr.at(-1)); // 5 // Important: Negative indices start from `1`, positive indices start from `0`.
15、 Concat
此方法用于組合兩個(gè)數(shù)組。
const arr1 = [1, 2, 3, 4, 5]; const arr2 = [6, 7, 8, 9, 10]; console.log(arr1.concat(arr2)); // Console [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
到此這篇關(guān)于分享15個(gè)JavaScript的重要數(shù)組方法的文章就介紹到這了,更多相關(guān)JS數(shù)組方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js特效,頁面下雪的小例子，需要的朋友可以參考一下2013-06-06
layui表格數(shù)據(jù)復(fù)選框回顯設(shè)置方法
今天小編就為大家分享一篇layui表格數(shù)據(jù)復(fù)選框回顯設(shè)置方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了javascript事件綁定使用方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
學(xué)習(xí)JavaScript設(shè)計(jì)模式之策略模式
這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式中的策略模式，對JavaScript設(shè)計(jì)模式感興趣的小伙伴們可以參考一下2016-01-01
用Webpack構(gòu)建Vue項(xiàng)目的實(shí)踐
這篇文章主要介紹了用Webpack構(gòu)建Vue項(xiàng)目的實(shí)踐，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11![JavaScript輸出為[object?Object]問題的解決辦法](http://img.jbzj.com/images/xgimg/bcimg5.png)
JavaScript輸出為[object?Object]問題的解決辦法
平時(shí)我們在接收后端返回的json對象通常是一個(gè)字符串類型的object,所以一般我們要對這個(gè)object進(jìn)行類型轉(zhuǎn)化后,我們才能使用object里面的數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于JavaScript輸出為[object?Object]問題的解決辦法,需要的朋友可以參考下2023-11-11
JS實(shí)現(xiàn)常見的TAB、彈出層效果(TAB標(biāo)簽，斑馬線，遮罩層等)
這篇文章主要介紹了JS實(shí)現(xiàn)常見的TAB、彈出層效果,包括TAB標(biāo)簽，斑馬線，遮罩層等.以完整實(shí)例總結(jié)分析了JavaScript實(shí)現(xiàn)tab切換、隔行變換及彈出遮罩層的完整實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-10-10
JS實(shí)現(xiàn)禁止鼠標(biāo)右鍵的功能
遇到網(wǎng)頁上有精美圖片或者精彩文字想保存時(shí)，通常大家都是選中目標(biāo)后按鼠標(biāo)右鍵，在彈出菜單中選擇“圖片另存為”或“復(fù)制”來達(dá)到我們的目的。但是，目前有許多網(wǎng)頁都屏蔽了鼠標(biāo)右鍵，那么用js如何實(shí)現(xiàn)禁止鼠標(biāo)右鍵的功能呢？下面小編給大家介紹下2016-10-10
這篇文章主要介紹了微信小程序文章詳情功能,結(jié)合完整實(shí)例形式詳細(xì)分析了微信小程序文章詳情功能具體步驟、原理及功能實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-06-06
js如何查找json數(shù)據(jù)中的最大值和最小值方法
這篇文章主要介紹了js如何查找json數(shù)據(jù)中的最大值和最小值方法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04