當前位置：首頁 > 科技 > 軟件

19個JavaScript數組常用方法總結！趕快收藏吧！

來源：責編：時間：2023-09-18 21:42:28 286觀看

導讀數組，是JavaScript中的一種數據格式，在JavaScript中經常使用。作為一名前端工程師，掌握Array的用法非常重要！那么，常用的數組方法你知道幾個呢？如果不知道也沒有關系，今天這篇文章將匯總詳細介紹Array中常用的一些方法，一起來

數組，是JavaScript中的一種數據格式，在JavaScript中經常使用。作為一名前端工程師，掌握Array的用法非常重要！

那么，常用的數組方法你知道幾個呢？

如果不知道也沒有關系，今天這篇文章將匯總詳細介紹Array中常用的一些方法，一起來學習一下吧！

01、push

功能：向數組末尾添加一個或多個元素，并返回數組的新長度。

//push()arry.push(element1,element2,...,elementN)

參數說明：element1、element2、…、elementN 是要添加到數組末尾的元素。

用法示例：

1. 將單個元素添加到數組末尾；

const numbers = [1, 2, 3];const length = numbers.push(4);console.log(numbers);  // [1, 2, 3, 4]console.log(length);   // 4

2、向數組末尾添加多個元素；

const fruits = ['apple', 'banana'];fruits.push('kiwi', 'orange');console.log(fruits);  // ['apple', 'banana', 'kiwi', 'orange']

02、pop

功能：刪除并返回數組最后一個元素

//pop()arry.pop()

注意：pop()方法會修改原數組，并將數組長度減一。

用法示例：

const fruits = ['apple', 'banana', 'kiwi'];const removedElement = fruits.pop();console.log(fruits);          // ['apple', 'banana']console.log(removedElement);  // 'kiwi'

使用pop方法刪除數組的最后一個元素；

03、shift

功能：刪除并返回數組的第一個元素

//shift()array.shift()

用法示例：

1、使用shift刪除元素，bing返回刪除的元素；

const fruits = ['apple', 'banana', 'kiwi'];const removedElement = fruits.shift();console.log(fruits);          // ['banana', 'kiwi']console.log(removedElement);  // 'apple'

2.如果刪除空數組，結果將返回undefined；

const emptyArray = [];const removedElement = emptyArray.shift();console.log(emptyArray);     // []console.log(removedElement);  // undefined

04、unshif

功能：向數組開頭添加一個或多個元素，并返回數組的新長度

//unshif()arry.unshif(element1,element2,...,elementN)

element1、element2、...、elementN 是要添加到數組開頭的元素。

用法示例：

1.基本用法，添加單個元素；

const numbers = [2, 3, 4];const length = numbers.unshift(1);console.log(numbers);  // [1, 2, 3, 4]console.log(length);   // 4

2.添加多個元素；

const fruits = ['banana', 'orange'];fruits.unshift('apple', 'kiwi');console.log(fruits);  // ['apple', 'kiwi', 'banana', 'orange']

05、concat

功能：將兩個或多個數組合并成一個新數組

value1, value2, …, valueN 是要連接的數組或值。

用法示例：

1. 連接兩個陣列：

const array1 = [1, 2, 3];const array2 = [4, 5, 6];const concatenatedArray = array1.concat(array2);console.log(concatenatedArray);  // [1, 2, 3, 4, 5, 6]

2. 連接數組和值：

const array = [1, 2, 3];const value = 4;const concatenatedArray = array.concat(value);console.log(concatenatedArray);  // [1, 2, 3, 4]

3. 連接多個陣列：

const array1 = [1, 2];const array2 = [3, 4];const array3 = [5, 6];const concatenatedArray = array1.concat(array2, array3);console.log(concatenatedArray);  // [1, 2, 3, 4, 5, 6]

06、slice

功能：從數組中提取指定范圍的元素并返回一個新數組

//splicearray.slice(start,end)

參數說明：

start 為提取元素起始位置的索引（包括該索引對應的元素）；
end 是提取元素結束位置的索引（不包括該索引對應的元素）；

如果未指定 end 參數，則提取從起始索引位置到數組末尾的所有元素。

用法示例：

1、提取指定范圍內的元素：

const fruits = ['apple', 'banana', 'kiwi', 'orange', 'grape'];const slicedElements = fruits.slice(1, 4);console.log(slicedElements);  // ['banana', 'kiwi', 'orange']

2、提取指定位置到數組末尾的元素：

const numbers = [1, 2, 3, 4, 5];const slicedElementsToEnd = numbers.slice(2);console.log(slicedElementsToEnd);  // [3, 4, 5]

3.復制數組：

const originalArray = [1, 2, 3, 4, 5];const copiedArray = originalArray.slice();console.log(copiedArray);  // [1, 2, 3, 4, 5]

07、splice

功能：刪除、替換或添加元素到數組的指定位置

//splice()array.splice(start,deleteCount,item1,item2,...)

參數說明：

start 是要修改的起始位置的索引；
deleteCount 是要刪除的元素數。

您可以根據需要指定item1、item2等參數來插入新元素。

如果未指定deleteCount，則刪除從起始索引位置開始的所有元素。

用法示例：

1、刪除元素：

const numbers = [1, 2, 3, 4, 5];const deletedElements = numbers.splice(2, 2);console.log(numbers);          // [1, 2, 5]console.log(deletedElements);  // [3, 4]

2. 更換元素：

const fruits = ['apple', 'banana', 'kiwi'];const replacedElements = fruits.splice(1, 1, 'orange', 'grape');console.log(fruits);             // ['apple', 'orange', 'grape', 'kiwi']console.log(replacedElements);   // ['banana']

3.插入元素：

const colors = ['red', 'blue', 'green'];colors.splice(1, 0, 'yellow', 'purple');console.log(colors);  // ['red', 'yellow', 'purple', 'blue', 'green']

08、join

功能：使用指定的分隔符將數組中的所有元素連接成字符串

//join（）array.join(separator)

分隔符是可選字符串參數，指定元素之間的分隔符，默認為逗號（,）。

用法示例：

1、數組之間用“-”分隔；

const fruits = ['apple', 'banana', 'kiwi'];const joinedString = fruits.join('-');console.log(joinedString);  // "apple-banana-kiwi"

2.默認使用逗號作為分隔符；

const numbers = [1, 2,3, 4, 5];const joinedStringDefault = numbers.join();console.log(joinedStringDefault);  // "1,2,3,4,5"

09、indexOf

功能：返回指定元素在數組中第一次出現的索引，如果沒有找到則返回-1。

//indexOf()array.indexOf（searchElement,formIndex)

1、搜索下標位置第一次出現的位置；

const fruits = ['apple', 'banana', 'kiwi', 'banana', 'orange'];const index = fruits.indexOf('banana');console.log(index);  // 1

2、查找指定位置的下標位置；

const numbers = [1, 2, 3, 4, 5, 3, 2, 1];const indexFromIndex = numbers.indexOf(3, 3);console.log(indexFromIndex);  // 5

10、lastIndexOf

功能：返回數組中最后一次出現的指定元素的索引，如果沒有找到則返回-1

//lastIndexOf（）array.lastIndexOf（searchElement,formIndex)

用法示例：

1、搜索數組中最后出現的下標位置；

const fruits = ['apple', 'banana', 'kiwi', 'banana', 'orange'];const lastIndex = fruits.lastIndexOf('banana');console.log(lastIndex);  // 3

2、從指定位置開始查找最后出現的下標位置；

const numbers = [1, 2, 3, 4, 5, 3, 2, 1];const lastIndexFromIndex = numbers.lastIndexOf(3, 4);console.log(lastIndexFromIndex);  // 2

11、forEach

功能：對數組中的每個元素執行指定的函數

forEach() 方法通常用于對數組中的每個元素執行操作，而不返回新數組。它提供了一種迭代數組并對每個元素執行相同操作的便捷方法。

注意：forEach()方法不能中斷或跳過迭代，它會遍歷數組中的每個元素，即使回調函數中使用了return語句，也不會中止遍歷。

12、map

功能：對數組中的每個元素執行指定的函數，并返回由執行結果組成的新數組。

用法示例：

map()方法可以根據自定義的處理邏輯對數組中的每個元素進行變換。您可以使用它生成一個新數組，其元素是處理原始數組的結果。

常見的使用場景包括對數組中每個元素的計算、轉換、映射等操作。

13、filter

作用：根據指定條件過濾掉數組中符合條件的元素，返回一個新數組

用法示例：

使用filter方法，可以從數組中過濾掉滿足特定條件的元素。

14、reduce

功能：對數組中的所有元素執行指定的歸約函數，并返回單值結果

參數說明：callback是回調函數，可以接受四個參數：

accumulator：累加器，用于保存計算結果。
currentValue：當前遍歷的元素。
index：當前遍歷元素的索引。
array：正在遍歷的數組。

用法示例：

調用reduce()方法，傳入累加函數(accumulator, currentValue) => Accumulator + currentValue，累加數組中所有元素。

累加器的初始值未指定，因此，reduce() 方法從數組的第一個元素開始，將當前元素添加到累加器，并更新累加器的值。最后返回的累加結果是數組所有元素的累加和。

15、sort

功能：對數組元素進行排序

用法示例：

// sort()const fruits = ['banana','apple','kiwi','pear'];fruits.sort();console.log(fruits);// Output:['apple','banana','kiwi','pear']

1、不傳遞參數調用sort，會直接修改原數組，返回排序后的數組；

2、傳入比較函數，該函數接受兩個參數，返回一個代表比較結果的數字；

16、reverse

功能：反轉數組中元素的順序

通過使用reverse()方法，可以輕松反轉數組中元素的順序，適用于需要反轉數組內容的情況。

注意：reverse()方法會直接修改原數組，不會創建新數組。如果需要保留原始數組的副本并執行反向操作，可以先使用 slice() 方法創建一個新數組，然后調用reverse() 方法。

17、includes

功能：判斷數組是否包含指定元素，返回true或false

用法示例：

1. 檢查數組是否包含特定元素：

const numbers = [1, 2, 3, 4, 5];console.log(numbers.includes(3));  // trueconsole.log(numbers.includes(6));  // false

2.使用fromIndex參數指定搜索的起始位置：

const numbers = [1, 2, 3, 4, 5];console.log(numbers.includes(3, 2));  // true, search starts from index 2console.log(numbers.includes(3, 4));  // false, search starts from index 4

3. 檢查數組中是否包含字符串：

const fruits = ['apple', 'banana', 'kiwi', 'pear'];console.log(fruits.includes('banana'));  // trueconsole.log(fruits.includes('grape'));   // false

18、some

功能：檢查數組中是否至少有一個元素滿足指定條件，返回true或false

用法示例：

1、檢查數組中是否有大于10的元素：

const numbers = [5, 8, 12, 3, 9];const hasGreaterThan10 = numbers.some(element => element > 10);console.log(hasGreaterThan10);  // true

2. 檢查數組中是否有偶數：

const numbers = [3, 7, 5, 12, 9];const hasEvenNumber = numbers.some(element => element % 2 === 0);console.log(hasEvenNumber);  // true

3. 檢查數組中是否存在包含特定字符的字符串：

const fruits = ['apple', 'banana', 'kiwi', 'pear'];const hasStrWithChar = fruits.some(element => element.includes('a'));console.log(hasStrWithChar);  // true

4、檢查數組中是否存在滿足復雜條件的元素：

const students = [  { name: 'Alice', score: 85 },  { name: 'Bob', score: 92 },  { name: 'Charlie', score: 76 },];const hasPassingScore = students.some(student => student.score >= 80);console.log(hasPassingScore);  // true

19、every

功能：檢查數組中所有元素是否滿足指定條件，返回true或false

用法示例：

1.檢查數組中的所有元素是否都大于 0：

const numbers = [5, 8, 12, 3, 9];const allGreaterThan0 = numbers.every(element => element > 0);console.log(allGreaterThan0);  // true

2.檢查數組中的所有元素是否都是偶數：

const numbers = [2, 4, 6, 8, 10];const allEvenNumbers = numbers.every(element => element % 2 === 0);console.log(allEvenNumbers);  // true

3.檢查數組中的所有字符串是否以大寫字母開頭：

const words = ['Apple', 'Banana', 'Cherry', 'Durian'];const allUpperCaseStart = words.every(element => /^[A-Z]/.test(element));console.log(allUpperCaseStart);  // true

4.檢查數組中的所有對象是否滿足特定條件：

const students = [  { name: 'Alice', score: 85 },  { name: 'Bob', score: 92 },  { name: 'Charlie', score: 76 },];const allPassingScore = students.every(student => student.score >= 80);console.log(allPassingScore);  // false

總結

以上就是我今天與你分享的19個常用的Array方法，你學會了嗎？

當然，Array在ES6中還有一些更高級的使用方法，可以更加快速地操作Array。

本文鏈接：http://www.tebozhan.com/showinfo-26-10493-0.html19個JavaScript數組常用方法總結！趕快收藏吧！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： Nginx map 實現時間格式轉換

下一篇：深入探究微服務架構下 API 網關的發展趨勢

標簽：

熱門焦點

跑分安卓第一！Redmi K60至尊版8月發布！盧偉冰：目標年度性能之王

8月5日消息，Redmi K60至尊版將于8月發布，在此前舉行的戰略發布會上，官方該機將搭載搭載天璣9200+處理器，安兔兔V10跑分超177萬分，是目前安卓陣營最高的分數
印度登月最關鍵一步！月船三號今晚進入環月軌道

8月5日消息，據印度官方消息，月船三號將于北京時間今晚21時30分左右開始近月制動進入環月軌道。這是該探測器能夠成功的最關鍵步驟之一，如果成功將開始圍
2023 年的 Node.js 生態系統

隨著技術的不斷演進和創新，Node.js 在 2023 年達到了一個新的高度。Node.js 擁有一個龐大的生態系統，可以幫助開發人員更快地實現復雜的應用。本文就來看看 Node.js 最新的生
Golang 中的 io 包詳解：組合接口

io.ReadWriter// ReadWriter is the interface that groups the basic Read and Write methods.type ReadWriter interface { Reader Writer}是對Reader和Writer接口的組合，
企業采用CRM系統的11個好處

客戶關系管理（CRM）軟件可以為企業提供很多的好處，從客戶保留到提高生產力。　　CRM軟件用于企業收集客戶互動，以改善客戶體驗和滿意度。　　CRM軟件市場規模如今超過580
三星電子Q2營收60萬億韓元存儲業務營收同比仍下滑超過50%

7月27日消息，據外媒報道，從三星電子所發布的財報來看，他們主要利潤來源的存儲芯片業務在今年二季度仍不樂觀，營收同比仍在大幅下滑，所在的設備解決方案
質感不錯！OPPO K11渲染圖曝光：旗艦IMX890傳感器首次下放

一直以來，OPPO K系列機型都保持著較為均衡的產品體驗，歷來都是2K價位的明星機型，去年推出的OPPO K10和OPPO K10 Pro兩款機型憑借各自的出色配置，堪稱有
朋友圈可以修改可見范圍了蘋果用戶可率先體驗

近日，iOS用戶迎來微信8.0.27正式版更新，除了可更換二維碼背景外，還新增了多項實用功能。在新版微信中，朋友圈終于可以修改可見范圍，簡單來說就是已發布的朋友圈
電博會上海爾智家模擬500平大平層，還原生活空間沉浸式體驗

電博會為了更好地讓參展觀眾真正感受到智能家居的絕妙之處，海爾智家的程傳嶺先生同樣介紹了展會上海爾智家的模擬500平大平層，還原生活空間沉浸式體驗。程傳

AVt天堂网手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

19個JavaScript數組常用方法總結！趕快收藏吧！

01、push

02、pop

03、shift

04、unshif

05、concat

06、slice

07、splice

08、join

09、indexOf

10、lastIndexOf

11、forEach

12、map

13、filter

14、reduce

15、sort

16、reverse

17、includes

18、some

19、every

總結

跑分安卓第一！Redmi K60至尊版8月發布！盧偉冰：目標年度性能之王

印度登月最關鍵一步！月船三號今晚進入環月軌道

2023 年的 Node.js 生態系統

Golang 中的 io 包詳解：組合接口

企業采用CRM系統的11個好處

三星電子Q2營收60萬億韓元存儲業務營收同比仍下滑超過50%

質感不錯！OPPO K11渲染圖曝光：旗艦IMX890傳感器首次下放

朋友圈可以修改可見范圍了蘋果用戶可率先體驗

電博會上海爾智家模擬500平大平層，還原生活空間沉浸式體驗

最新推薦

猜你喜歡

熱門推薦

相關資訊

19個JavaScript數組常用方法總結！ 趕快收藏吧！

01、push

02、pop

03、shift

04、unshif

05、concat

06、slice

07、splice

08、join

09、indexOf

10、lastIndexOf

11、forEach

12、map

13、filter

14、reduce

15、sort

16、reverse

17、includes

18、some

19、every

總結

最新推薦

猜你喜歡

熱門推薦

相關資訊

19個JavaScript數組常用方法總結！趕快收藏吧！