終於有人把15個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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 終於有人把能把資料採集給講明白了
- 終於有人把MYSQL索引講清楚了MySql索引
- 終於有人把BungeeCord群組服搭建教程方法講明白了
- 終於有人把網路爬蟲講明白了爬蟲
- 終於有人把隱私計算講明白了
- 終於有人把ERP和OA的區別講清楚了!
- 五險一金終於有人給講清楚了
- 終於有人把Web 3.0和元宇宙講明白了Web元宇宙
- 終於有人把工業資料採集講明白了
- 終於有人把安全知識圖譜技術講明白了(上篇)
- 瞧!終於有人把智慧製造與工業4.0講明白了
- 終於有人把雲端計算、大資料和 AI 講明白了大資料AI
- 這一次終於有人把MySQL主從複製講全面了!!!MySql
- ClickHouse與Hive的區別,終於有人講明白了Hive
- 終於有人把雲端計算、大資料和人工智慧講明白了大資料人工智慧
- 終於有人把Java記憶體模型說清楚了Java記憶體模型
- C#:終於有人把 ValueTask、IValueTaskSource、ManualResetValueTaskSourceCore 說清楚了!C#
- 終於有人將資料中臺講清楚了,原來根本不算啥
- 終於有人講透了使用者分析方法論
- 【教程】終於有人把Java記憶體模型說清楚了!Java記憶體模型
- Javascript - 陣列和陣列的方法JavaScript陣列
- 5000字長文分享!資料倉儲的建設與框架終於有人給講明白了框架
- 終於有人把不同標籤的加工內容與落庫講明白了丨DTVision分析洞察篇
- JavaScript陣列 幾個常用方法JavaScript陣列
- 資料視覺化的設計技巧,終於有人講明白了!視覺化
- 終於有人把機器學習中的文字摘要解釋清楚了!機器學習
- 終於有人把工資拖後腿的原因找到了,此文把平均數、中位數和眾數全講明白了
- 大資料基礎架構Hadoop,終於有人講明白了大資料架構Hadoop
- MPP大資料系統架構,終於有人講明白了大資料架構
- JavaScript陣列方法JavaScript陣列
- 索引失效底層原理分析,這麼多年終於有人講清楚了索引
- 終於有人能把c#樂娛LEY介面的作用講明白了C#
- JavaScript關於陣列的一些方法整理JavaScript陣列
- JavaScript陣列小方法JavaScript陣列
- JavaScript陣列方法(splice)JavaScript陣列
- javascript陣列常用方法JavaScript陣列
- JavaScript陣列方法大全JavaScript陣列
- 28個Javascript陣列方法,開發者的小抄JavaScript陣列