JS陣列操作之增刪改查的簡單實現

2021-08-09 06:08:39 字數 4821 閱讀 2446

一、增

1、push()

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

?

1

2

3

4

5

6

7

vararr = ;

varlen = 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

2、unshift()

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

?

1

2

3

4

5

6

varlen = 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

3、concat()

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

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

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

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

繼續接著上面的栗子:

?

1

2

3

vararr1 = 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三個元素。

4、splice()

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

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

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

?

1

2

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()一樣是直接在原陣列上修改的。

二、刪

1、pop()

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

接著上例:

?

1

2

3

varitem = 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()方法配合使用可以構成先進先出的佇列,該方法可刪除陣列第一項並返回該項。

繼續接著上例:

?

1

2

3

varitem = 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()方法返回從該引數指定位置開始到當前陣列末尾的所有項。如果有兩個引數,該方法返回起始和結束位置之間的項——但不包括結束位置的項。

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

?

1

2

3

vararr2 = 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

2

arr.splice(2,4);

console.log(arr);// [-1, 0, 1, 2]

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

三、改

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

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

依然繼續上例~~

?

1

2

arr.splice(2,1,0.5,1,1.5);

console.log(arr);// [-1, 0, 0.5, 1, 1.5, 2]

四、查

indexof()和lastindexof()

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

例如:?

12

3

4

varindex = arr.indexof(0);

console.log(index);// 1

index = arr.indexof(3,0);

console.log(index);// -1

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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援指令碼之家。

JS陣列操作之增刪改查

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

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

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

陣列的增刪改查操作

新增 push 預設新增至陣列最後 unshift 向陣列開頭新增乙個或多個元素,並返回新的陣列長度 刪除 shift 刪除第一條資料 pop 刪除最後一條資料 splice 起始下標,結束下標不包括自己 刪除中間的某條資料 替換 splice 起始下標,刪除多少項,替換的新資料 例子 arr5.s...