js陣列增刪改查的方法

2021-10-04 17:29:24 字數 3803 閱讀 2243

可接收任意數量的引數,把它們逐個新增至陣列末尾,並返回修改後陣列的長度。例如:

var arr =

;var len = arr.

push(1

);console.

log(arr)

;// [1]

console.

log(len)

;// 1

len = arr.

push(2

,3);

console.

log(arr)

;// [1,2,3]

console.

log(len)

;// 3

該方法與push()類似,也可接收任意數量的引數,只不過是將引數逐個新增至陣列前端而已,同樣返回新陣列長度。咱們接著上面的例子:

var len = arr.

unshift(0

);console.

log(arr)

;// [0, 1, 2, 3]

console.

log(len)

;// 4

len = arr.

unshift(-

2,-1

);console.

log(arr)

;// [-2, -1, 0, 1, 2, 3]

console.

log(len)

;// 6

該方法與push()方法有點類似,同樣是將元素新增至陣列末尾,只不過這個陣列已經不是原來的那個陣列了,而是其副本,所以concat()運算元組後會返回乙個新的陣列。具體用法如下:

① 不傳引數,返回當前陣列副本

② 傳遞一或多個陣列,則該方法會將這些陣列中的每一項都新增到結果陣列中

③ 傳遞非陣列引數,這些引數就會被直接新增到結果陣列的末尾

繼續接著上面的栗子:

var arr1 = arr.

concat(4

,[5,

6]);

console.

log(arr)

;// [-2, -1, 0, 1, 2, 3]

console.

log(arr1)

;// [-2, -1, 0, 1, 2, 3, 4, 5, 6]

例子中一目了然,原陣列保持不變,新陣列後面新增了4、5、6三個元素。

前面的三個方法都具有很大侷限性,因為不是新增到陣列前就是陣列後,而splice()就不一樣了,它非常靈活和強大。靈活是因為它可以新增元素到陣列的任意位置,強大是因為它除了可以新增元素之外還具有刪除和替換元素的功能(這個後面會陸續講到)。

splice()可以向陣列指定位置新增任意數量的元素,需要傳入至少3個引數: 起始位置、0(要刪除的元素個數)和要新增的元素。

依然接著上面的例子繼續:

arr.

splice(3

,0,0.2

,0.4

,0.6

,0.8);

console.

log(arr)

;// [-2, -1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2, 3]

可以看出,splice()與push()和unshift()一樣是直接在原陣列上修改的。

與push()方法配合使用可以構成後進先出的棧,該方法可從陣列末尾刪除最後一項並返回該項。

接著上例:

var item = arr.

pop();

console.

log(item)

;// 3

console.

log(arr)

;// [-2, -1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2]

2、shift()

與push()方法配合使用可以構成先進先出的佇列,該方法可刪除陣列第一項並返回該項。

繼續接著上例:

var item = arr.

shift()

;console.

log(item)

;// -2

console.

log(arr)

;// [-1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2]

3、slice()

該方法同concat()一樣是返回乙個新陣列,不會影響原陣列,只不過slice()是用來裁剪陣列的,返回裁剪切來的陣列,具體用法如下:

slice()方法可以接受一或兩個引數,即要返回項的起始和結束位置。在只有乙個引數的情況下,slice()方法返回從該引數指定位置開始到當前陣列末尾的所有項。如果有兩個引數,該方法返回起始和結束位置之間的項——但不包括結束位置的項。

咱們還是繼續接著上面例子吧~~

var arr2 = arr.

slice(2

,6);

console.

log(arr)

;// [-1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2]

console.

log(arr2)

;// [0.2, 0.4, 0.6, 0.8]

4、splice()

上面講到,該方法在新增陣列元素的時候需要傳入3個以上引數,而其中第2個引數就是用於指定要刪除元素的個數的,那時我們傳的是數字0。那麼,如果單單只需刪除元素,我們就只需給splice()傳入兩個引數,第1個引數用於指定要刪除的第一項的位置,第2個引數用於指定要刪除元素的個數。

繼續上例~~

// [-1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2]

arr.

splice(2

,4);

console.

log(arr)

;// [-1, 0, 1, 2]

從索引項為2的位置開始刪除4個元素,所以結果為 [-1, 0, 1, 2]。

這個其實最靈活的方式就是直接使用splice()這個強大的方法了,其實通過以上對該方法的了解,我們大致就能知道使用該方法修改陣列元素的基本原理。

原理很簡單,就是向指定位置插入任意數量的元素,且同時刪除任意數量的元素。

依然繼續上例~~

// [-1, 0, 1, 2]

arr.

splice(2

,1,0.5,1

,1.5);

//從索引2的數1開始刪除乙個數,插入0.5,1,1.5

console.

log(arr)

;// [-1, 0, 0.5, 1, 1.5, 2]

四、查

indexof()和lastindexof()

這兩個方法都接收兩個引數:要查詢的項和(可選的)表示查詢起點位置的索引。其中,indexof()從陣列的開頭(位置0)開始向後查詢,lastindexof()方法則從陣列的末尾開始向前查詢。

例如:

// [-1, 0, 0.5, 1, 1.5, 2]

var index = arr.

indexof(0

);console.

log(index)

;// 1 數字0的索引為1

index = arr.

indexof(3

,0);

console.

log(index)

;// -1 從索引為1的數0開始找,找數字3 找不到,返回-1

當找不到該元素時,返回 -1 ,lastindexof()方法同理。

增刪改查 JS陣列增刪改查這點事兒

1 length屬性 length屬性是陣列最重要的屬性,沒有之一,length屬性告訴我們這個陣列內有多少個資料元素,當length 0時說明陣列時乙個空陣列。我們想要遍歷陣列時可以直接將遍歷的終點設為 length 1。這是本文的重點,我們從增刪改查方面入手,梳理方法的作用和用法,有利於記憶和使...

Js陣列增刪改查,排序,分頁

ary.splice n,m,x 從索引n開始刪除m個元素,把新增的元素x放在索引n的前面,把刪除的元素當成乙個新陣列返回,原有陣列改變。ary.splice n,0,x 從索引n開始刪除0個元素,把新增加的元素x放在索引n的前面,返回的是乙個空陣列,原有陣列改變。var arr 2,5,4,100...

JS陣列操作之增刪改查

js提供了很多方便運算元組的方法,本文所要分享的就是如何快速對陣列進行增 刪 改 查。1 push 可接收任意數量的引數,把它們逐個新增至陣列末尾,並返回修改後陣列的長度。例如 var arr var len arr.push 1 console.log arr 1 console.log len ...