JavaScript 數組操作函數總結

2021-02-19 藍橋杯


js中數組操作函數還是非常多的,今天忽然想到來總結一下,也算是溫故而知新吧。不過不會針對每個辦法都進行一下總結,只是針對一些比較常用的做個備註一下。

這裡總結到的 js 數組操作函數有:push,pop,join,shift,unshift,slice,splice,concat

(1)push 和 pop

這兩個函數都是對數組從尾部進行壓入或彈出操作。push(arg1,arg2,...)可以每次壓入一個或多個元素,並返回更新後的數組長度。注意如果參數也是數組的話,則是將全部數組當做一個元素壓入到原本的數組裡面去。pop() 函數則每次只會彈出結尾的元素,並返回彈出的元素,若是是對空組數調用 pop() 則返回undefined。

示例:

var oldArr=[1,2,3];

alert(oldArr.push(4,[5,6]))//這裡只會將[5,6]當做一個元素來策畫,返回更新後的數組長度5

此時 oldArr = [1,2,3,4,[5,6]]

oldArr.pop()//這裡彈出最後一個元素[5,6],而不是6

此時 oldArr = [1,2,3,4]

oldArr.pop()-->4

oldArr.pop()-->3

oldArr.pop()-->2

oldArr.pop()-->1

alert(oldArr.pop())-->undefined(空數組彈出)

(2)unshift 和 shift

unshift() 方法可向數組的開頭添加一個或更多元素,並返回新的長度。unshift() 方法將把它的參數插入 arrayObject 的頭部,並將已經存在的元素順次地移到較高的下標處,以便留出空間。該方法的第一個參數將成為數組的新元素 0,如果還有第二個參數,它將成為新的元素 1,以此類推。

請注意,unshift() 方法不創建新的創建,而是直接修改原有的數組。另外在 Internet Explorer 瀏覽器中 unshift() 無法執行!

如下示例,我們將創建一個數組,並把一個元素添加到數組的開頭,並返回數組的新長度:

code

1

2

3

4

5

6

7

8

9

<script type="text/javascript">

var arr = new Array()

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr.join() + "<br />")

document.write(arr.unshift("William") + "<br />")

document.write(arr.join())

</script>

輸出:

George,John,Thomas
4
William,George,John,Thomas

shift() 用於將數組的第一個元素從原數組中刪除,並返回第一個元素的值(即被刪除的元素的值)。

注意:若數組是空的,那麼 shift() 將不進行任何操縱,直接返回 undefined 值。另外該方法也不創建新數組,而是直接修改原有的 arrayObject。

示例:在本例中,我們將創建一個數組,並刪除數組的第一個元素:

code

1

2

3

4

5

6

7

8

9

<script type="text/javascript">

var arr = new Array

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr.join() + "<br />")

document.write(arr.shift() + "<br />")

document.write(arr.join())

</script>

輸出:

George,John,Thomas 
George 
John,Thomas

(3)join()

作用是將數組各個元素是通過指定的分隔符進行連接成為一個字符串。其作用和toString()相同。

語法

arrayObject.join(separator)

參數 separator 可選。指定要使用的分隔符。如果省略該參數,則使用逗號作為分隔符。

示例:

code

1

2

3

4

5

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr.join())

輸出

George,John,Thomas

(4)slice()

該方法可從已有的數組中返回選定的元素

語法

arrayObject.slice(start,end)

返回值

返回一個新的數組,包含從 start 到 end (不包括該元素)的 arrayObject 中的元素。

注意:您可使用負值從數組的尾部選取元素。如果 end 未被規定,那麼 slice() 方法會選取從 start 到數組結尾的所有元素。

示例:

code

1

2

3

4

5

6

7

8

9

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr.join() + "<br />")

document.write(arr.slice(1) + "<br />")

document.write(arr.join())

</script>

輸出:

George,John,Thomas
John,Thomas
George,John,Thomas

(5)splice()

該方法用於插入、刪除或替換數組的元素。

語法

arrayObject.splice(index,howmany,element1,,elementX)

返回值

如果從 arrayObject 中刪除了元素,則返回的是含有被刪除的元素的數組。

說明

splice() 方法可刪除從 index 處開始的零個或多個元素,並且用參數列表中聲明的一個或多個值來替換那些被刪除的元素。需要注意的是 splice() 方法與 slice() 方法的作用是不同的,splice() 方法會直接對數組進行修改。

示例:

例子 1

在本例中,我們將創建一個新數組,並向其添加一個元素:

code

1

2

3

4

5

6

7

8

9

10

11

12

<script type="text/javascript">

var arr = new Array(6)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

arr[3] = "James"

arr[4] = "Adrew"

arr[5] = "Martin"

document.write(arr.join() + "<br />")

arr.splice(2,0,"William")

document.write(arr.join() + "<br />")

</script>

輸出:

George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin

例子 2

在本例中我們將刪除位於 index 2 的元素,並添加一個新元素來替代被刪除的元素:

code

1

2

3

4

5

6

7

8

9

10

11

12

<script type="text/javascript">

var arr = new Array(6)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

arr[3] = "James"

arr[4] = "Adrew"

arr[5] = "Martin"

document.write(arr.join() + "<br />")

arr.splice(2,1,"William")

document.write(arr.join())

</script>

輸出:

George,John,Thomas,James,Adrew,Martin
George,John,William,James,Adrew,Martin

例子 3

在本例中我們將刪除從 index 2 ("Thomas") 開始的三個元素,並添加一個新元素 ("William") 來替代被刪除的元素:

code

1

2

3

4

5

6

7

8

9

10

11

12

<script type="text/javascript">

var arr = new Array(6)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

arr[3] = "James"

arr[4] = "Adrew"

arr[5] = "Martin"

document.write(arr.join() + "<br />")

arr.splice(2,3,"William")

document.write(arr.join())

</script>

輸出:

George,John,Thomas,James,Adrew,Martin
George,John,William,Martin

(6)contact()

該方法用於連接兩個或多個數組。它不會改變現有的數組,而僅僅會返回被連接數組的一個副本。

語法

arrayObject.concat(arrayX,arrayX,.,arrayX)

示例:

例子 1

在本例中,我們將把 concat() 中的參數連接到數組 a 中:

code

1

2

3

4

<script type="text/javascript">

var a = [1,2,3];

document.write(a.concat(4,5));

</script>

輸出:

1,2,3,4,5

例子 2

在本例中,我們創建了兩個數組,然後使用 concat() 把它們連接起來:

code

1

2

3

4

5

6

7

8

9

10

11

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

var arr2 = new Array(3)

arr2[0] = "James"

arr2[1] = "Adrew"

arr2[2] = "Martin"

document.write(arr.concat(arr2))

</script>

輸出:

George,John,Thomas,James,Adrew,Martin

例子 3

在本例中,我們創建了三個數組,然後使用 concat() 把它們連接起來:

code

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

var arr2 = new Array(3)

arr2[0] = "James"

arr2[1] = "Adrew"

arr2[2] = "Martin"

var arr3 = new Array(2)

arr3[0] = "William"

arr3[1] = "Franklin"

document.write(arr.concat(arr2,arr3))

</script>

輸出:

George,John,Thomas,James,Adrew,Martin,William,Franklin


相關焦點

  • JavaScript:學會splice()數組操作
    面試的時候如果主考官讓你使用JavaScript來實現對數組元素進行插入、刪除、替換操作。
  • 走近 (javascript, 函數式)
    函數式編程卻屬於聲明式的編程方式,這種範式會描述一系列的操作,而不去暴露它們是如何實現的,以及數據是如何從中間穿過。在這裡,「動詞」是第一詞彙,我們更加注重於描述不同動作之間的組合和順序。比如,我們需要將一個數組的每個數平方以後,找出其中的奇數,並生成新的數組。
  • 每日一課 | JavaScript中的數組
    JavaScript中的數組具有length屬性,該屬性返回該數組的大小。,並且未在數組中添加任何元素。 1)同時聲明和填充數組var array=[10,20,30];console.log(array);2)使用數組構造函數聲明數組:在此方法中,我們使用數組構造函數聲明數組,然後使用索引填充此數組。
  • js數組常用的幾個函數總結
    javascript中,數組是很常用的。數組的函數很多,下面分享幾個常用的數組函數。每個函數都用瀏覽器測試過。     下面每個測試結果都是在google瀏覽器console上執行的。length屬性。數組的length屬性,返回數組的元素個數.JavaScript使用一個32位整數,保存數組的元素個數。
  • 有趣的JavaScript原生數組函數
    數組對象繼承自Object.prototype,對操作符返回的數組類型返回對象而不是array。然而,[]實例,數組也返回true。變量,類數組對象的實現更複雜,例如字符串對象,參數對象,參數對象不是數組的實例,但有長度屬性,並能通過索引取值,所以能像多個相同進行循環操作。在這裡,我將複習一些複製原型的方法,並探索這些方法的用法。
  • 如何在 JavaScript 中等分數組
    將數組分為兩個相等的部分我們可以分兩步將數組分成兩半:使用length/2和Math.ceil()方法找到數組的中間索引使用中間索引和Array.splice()方法獲得數組等分的部分Math.ceil() 函數返回大於或等於一個給定數字的最小整數。
  • javascript常用函數推薦
    繼續上一篇的內容,本文繼續javascript數組相關的常用函數推薦,基於ES6+規範,上一篇請查看這裡countOccurrences計算數組中值的出現次數。每次遇到數組內的特定值時,使用Array.prototype.reduce()遞增計數器。
  • 使用JavaScript對象數組進行函數式編程
    我們著眼於使用map,filter和reduce來操縱對象數組,使用從函數式編程中借用的技術。數據操作是任何JavaScript應用程式中的常見任務。在日常使用中,我們通常需要使用這些方法來處理數據對象的數組,這是文檔中缺乏的場景。另外,這些操作符經常被用功能性語言來看,並為JavaScript帶來了一種新的透視功能,即通過具有功能性觸摸的對象進行迭代。在這篇文章中,我們將打破使用的幾個例子map,reduce和filter操作對象的數組。
  • javascript基礎總結
    這就導致很多人都會用JavaScript,但卻很少有人能用的很精通的原因,因為他們大小看js這門語言的基礎和內在了,基礎,無論何時都是一個重要的存在,最直接的就是在你面試的時候,如果連js的數據類型都答不上來那是不是就太過分了…… 接下來,就讓我們一起總結一下JavaScript的基礎。一、語法javascript中的一切(變量、函數名和操作符)都區分大小寫。
  • 給初學者:JavaScript 中數組操作注意點
    然而反序列化並不會把時間格式的字符串轉化為 Date 對象4.運行效率低下作為原生函數, JSON.stringify 和 JSON.parse 自身操作 JSON 字符串的速度是很快的。然而為了深拷貝數組把對象序列化成 JSON 再反序列化回來完全沒有必要。
  • [翻譯]淺談JavaScript中的高階函數
    原文Understanding High-Order Functions in JavaScript - (https://blog.bitsrc.io/understanding-higher-order-functions-in-javascript-75461803bad)
  • JavaScript alert()函數用法說明
    JavaScript alert()函數用法說明 你對JavaScript alert()函數的用法是否熟悉,這裡和大家分享一下,alert消息對話框通常用於一些對用戶的提示信息,例如在表單中輸入了錯誤的數據時。
  • numpy中數組操作的相關函數
    在numpy中,有一系列對數組進行操作的函數,在使用這些函數之前,必須先了解以下兩個基本概念副本視圖副本是一個數組的完整拷貝
  • 15個必須知道的JavaScript數組方法
    它具有一些內置屬性和方法,可用於根據需要添加,刪除,迭代或操作數。並且了解JavaScript數組方法可以提升你的開發技能。在本文中,我們將介紹15種關於JavaScript的數組方法,這些方法可以幫助你正確地處理數據。注意,大多數情況下,我們將簡化作為參數傳遞的函數。1、some()此方法為參數傳遞的函數測試數組。
  • 12 個非常有用的 JavaScript 技巧
    操作符轉換布爾值有時候我們需要對一個變量查檢其是否存在或者檢查值是否有一個有效值,如果存在就返回true值。為了做這樣的驗證,我們可以使用!!操作符來實現是非常的方便與簡單。對於變量可以使用!!variable做檢測,只要變量的值為:0、null、" "、undefined或者NaN都將返回的是false,反之返回的是true。
  • 優秀程式設計師通過簡單代碼,窺探電腦編程中強大的數組操作功能
    優秀程式設計師通過簡單代碼,窺探電腦編程中強大的數組操作功能。程式語言中,數組是一個非常重要的概念,也是一種很常用的類型。本文中通過javascript語言的代碼實例,展現編程中數組的魅力。在javascript語言中,數組Array類型是一種引用類型,可以保存任何數據類型的數據。如字符串,數值,對象等。
  • 分享幾個javascript實用函數
    從本文開始小編將定期發布javascript相關的代碼集錦,每次發十個與大家分享,首先是數組篇,也許有人會說,可以用常用的lodash的等庫啊。bifurcateBy// 根據回調函數將值拆分為兩個組,回調函數指定輸入集合中的元素屬於哪個組。// 如果回調函數返回真值,則集合元素屬於第一個組; 否則,它屬於第二組。
  • JavaScript 基礎:「21」使用 push()和pop()方法操作數組
    歡迎關注路條編程網站,本專題主要介紹 JavaScript 基本語法、注釋、變量聲名、各種運算符、字符串、數組及條件語句等。
  • JavaScript
    1.2.8 函數(無重載)1.2.9 小結1.3DOM(Document Object Model)1.3.1 基本概念1.3.2 Element元素(通過Document獲取)1.3.3 Attribute屬性(通過Element進行操作)1.3.4 Text文本1.3.5 總結
  • Javascript中split函數用法指導手冊
    Javascript中split函數用法指導手冊 本文向大家重點講解一下Javascript中split函數使用,它可以將一個字符串分割為子字符串,然後將結果作為字符串數組返回,相信本文介紹你對split函數的用法有明確的認識。