終於有人把15個JavaScript的重要陣列方法給講出來了

搭建bc介面API系統演示 發表於 2022-04-28
JavaScript

雖然剽竊別人的技術很讓人羞恥,但是為了分享給大家更好的技術知識,我就羞恥哈也沒問題。有關這15個JavaScript的重要陣列方法,也是花了點功夫才搞到的,接下來大家一起學習知新。

陣列方法的重要一點是有些是可變的,有些是不可變的。在決定針對特定問題使用哪種方法時,務必牢記這一點。

此列表中的大多數陣列方法都採用類似的回撥作為引數。第一個引數是當前項,第二個引數是索引,第三個是整個陣列。現在我們已經解決了這個問題,讓我們從列表開始:

1、ForEach

迴圈遍歷陣列中的每個元素並執行回撥函式。

複製
const arr = [1, 2, 3];arr.forEach(num => console.log(num));// Console: 1, 2, 31.2.3.

2、Map

迴圈遍歷陣列中的每個元素並執行回撥函式。使用回撥函式的返回值建立一個新陣列。

複製
const arr = [1, 2, 3, 4, 5];const areEven = arr.map(num => num % 2 === 0);console.log(areEven); // Console: [false, true, false, true, false]1.2.3.

3、Filter

迴圈遍歷陣列中的每個元素,並僅選擇符合條件的元素。根據所選元素返回一個新陣列。

複製
const arr = [1, 2, 3, 4, 5];const evenNumbers = arr.filter(num => num % 2 === 0);console.log(evenNumbers); // Console [2, 4]1.2.3.

4、Find

查詢陣列中滿足條件的第一個元素。如果沒有找到,將返回 undefined。

複製
const arr = [1, 2, 3, 4, 5];const firstEvenNumber = arr.find(num => num % 2 === 0);console.log(firstEvenNumber); // Console [2]1.2.3.

5、FindIndex

與前面的方法類似,它返回滿足給定條件的第一個元素的索引。如果沒有找到,則返回 -1。

複製
const arr = [1, 2, 3, 4, 5];const firstEvenNumberIdx = arr.findIndex(num => num % 2 === 0);console.log(firstEvenNumberIdx);1.2.3.

6、Reduce

這是一種高階方法,可用於組合陣列的元素。主要區別在於回撥將累加器作為第一個引數。回撥的返回值成為下一次迭代的累加器。

複製
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 valueconst sum = arr.reduce((acc, num) => acc + num, 0);console.log(sum); // Console: 151.2.3.4.5.6.

7、Every

此方法接受一個返回布林值的回撥。如果條件對陣列中的所有元素都有效,那麼 Every() 將返回 true。

複製
const arr = [1, 2, 3, 4, 5];const areAllEven = arr.every(num => num % 2 === 0);console.log(areAllEven); // Console: false1.2.3.

8、Some

像前面的方法一樣,這個方法也接受一個返回布林值的回撥。如果條件對至少一個元素有效,Some() 將返回 true。

複製
const arr = [1, 2, 3, 4, 5];const isOneEven = arr.some(num % 2 === 0);console.log(isOneEven); // true1.2.3.

9、 Sort

這是一種用於對陣列中的元素進行排序的方法。

預設情況下,它按升序對陣列進行排序。它需要一個回撥函式,有兩個元素——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);1.2.3.

請記住,與其他陣列方法不同,sort 會改變陣列。

10、Flat

Flat 用於將巢狀陣列展平為單個陣列。您可以指定將陣列展平的深度。

複製
const arr = [[[1, 2], [3]], [4, 5]];const flattenedArr = arr.flat(4);console.log(flattenedArr); // Console [1, 2, 3, 4, 5]1.2.3.

11、 Reverse

反轉陣列中元素的順序。

複製
const arr = [1, 2, 3, 4, 5];const reversedArr = arr.reverse();console.log(reversedArr); // Console [5, 4, 3, 2, 1]1.2.3.

12、Include

如果陣列中存在元素,則此方法返回 true。

複製
const arr = [1, 2, 3, 4, 5];console.log(arr.includes(5)); // trueconsole.log(arr.includes(10)); // false1.2.3.

13、Fill

fill 方法將陣列的元素設定為給定值。當我想使用 map/forEach 方法特定次數時,我喜歡使用此方法。

複製
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]1.2.3.4.

14、At

此方法返回給定索引的元素。這與訪問(即 arr[1])元素的傳統方式之間的區別在於它也支援負索引。

複製
const arr = [1, 2, 3, 4, 5];console.log(arr.at(1)); // 2console.log(arr.at(-1)); // 5// Important: Negative indices start from `1`, positive indices start from `0`.1.2.3.4.

15、 Concat

複製
此方法用於組合兩個陣列。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]1.2.3.4.

綜上所訴:以上是我今天與您分享的JavaScript的15個重要陣列。

希望為您提供幫助,如果您喜歡,請記住與正在程式設計的朋友分享新知。


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/70017243/viewspace-2889281/,如需轉載,請註明出處,否則將追究法律責任。