JS陣列操作之增刪改查

2021-10-01 20:22:27 字數 3396 閱讀 4757

js提供了很多方便運算元組的方法,本文所要分享的就是如何快速對陣列進行增、刪、改、查。

1、push()

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

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

2、unshift()

該方法與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

3、concat()

該方法與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三個元素。

4、splice()

前面的三個方法都具有很大侷限性,因為不是新增到陣列前就是陣列後,而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()一樣是直接在原陣列上修改的。

1、pop()

與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個引數用於指定要刪除元素的個數。

繼續上例~~

arr.splice(2,4);

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

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

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

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

依然繼續上例~~

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()方法則從陣列的末尾開始向前查詢。

例如:

var index = arr.indexof(0);

console.log(index); // 1

index = arr.indexof(3,0);

console.log(index); // -1

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

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

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

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

一 增 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....

js操作cookie(增刪改查)

關鍵字 js操作cookie 增刪改查 另外關於刪除cookie失敗的原因及解決辦法如下 解決簡要 刪除cookie保險的方式就是 設定cookie時是什麼樣式,刪除時就應該是什麼樣式,加上expires屬性就行了 一般expires屬性設定為 1就可以了 js 無法清除cookie的解決方法 專案...