JS數(shù)組操作之增刪改查的簡單實(shí)現(xiàn)

JS提供了很多方便操作數(shù)組的方法，本文所要分享的就是如何快速對(duì)數(shù)組進(jìn)行增、刪、改、查。

一、增

1、push()

可接收任意數(shù)量的參數(shù)，把它們逐個(gè)添加至數(shù)組末尾，并返回修改后數(shù)組的長度。例如：

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()類似，也可接收任意數(shù)量的參數(shù)，只不過是將參數(shù)逐個(gè)添加至數(shù)組前端而已，同樣返回新數(shù)組長度。咱們接著上面的例子：

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()方法有點(diǎn)類似，同樣是將元素添加至數(shù)組末尾，只不過這個(gè)數(shù)組已經(jīng)不是原來的那個(gè)數(shù)組了，而是其副本，所以concat()操作數(shù)組后會(huì)返回一個(gè)新的數(shù)組。具體用法如下：

① 不傳參數(shù)，返回當(dāng)前數(shù)組副本

② 傳遞一或多個(gè)數(shù)組，則該方法會(huì)將這些數(shù)組中的每一項(xiàng)都添加到結(jié)果數(shù)組中

③ 傳遞非數(shù)組參數(shù)，這些參數(shù)就會(huì)被直接添加到結(jié)果數(shù)組的末尾

繼續(xù)接著上面的栗子：

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]

例子中一目了然，原數(shù)組保持不變，新數(shù)組后面添加了4、5、6三個(gè)元素。

4、splice()

前面的三個(gè)方法都具有很大局限性，因?yàn)椴皇翘砑拥綌?shù)組前就是數(shù)組后，而splice()就不一樣了，它非常靈活和強(qiáng)大。靈活是因?yàn)樗梢蕴砑釉氐綌?shù)組的任意位置，強(qiáng)大是因?yàn)樗丝梢蕴砑釉刂膺€具有刪除和替換元素的功能（這個(gè)后面會(huì)陸續(xù)講到）。

splice()可以向數(shù)組指定位置添加任意數(shù)量的元素，需要傳入至少3個(gè)參數(shù)： 起始位置、0（要?jiǎng)h除的元素個(gè)數(shù)）和要添加的元素。

依然接著上面的例子繼續(xù)：

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()一樣是直接在原數(shù)組上修改的。

二、刪

1、pop()

與push()方法配合使用可以構(gòu)成后進(jìn)先出的棧，該方法可從數(shù)組末尾刪除最后一項(xiàng)并返回該項(xiàng)。

接著上例：

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()方法配合使用可以構(gòu)成先進(jìn)先出的隊(duì)列，該方法可刪除數(shù)組第一項(xiàng)并返回該項(xiàng)。

繼續(xù)接著上例：

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()一樣是返回一個(gè)新數(shù)組，不會(huì)影響原數(shù)組，只不過slice()是用來裁剪數(shù)組的，返回裁剪下來的數(shù)組，具體用法如下：

slice()方法可以接受一或兩個(gè)參數(shù)，即要返回項(xiàng)的起始和結(jié)束位置。在只有一個(gè)參數(shù)的情況下，slice()方法返回從該參數(shù)指定位置開始到當(dāng)前數(shù)組末尾的所有項(xiàng)。如果有兩個(gè)參數(shù)，該方法返回起始和結(jié)束位置之間的項(xiàng)——但不包括結(jié)束位置的項(xiàng)。

咱們還是繼續(xù)接著上面例子吧~~

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()

好，繼續(xù)講這個(gè)“萬能”的方法。

上面講到，該方法在添加數(shù)組元素的時(shí)候需要傳入3個(gè)以上參數(shù)，而其中第2個(gè)參數(shù)就是用于指定要?jiǎng)h除元素的個(gè)數(shù)的，那時(shí)我們傳的是數(shù)字0。那么，如果單單只需刪除元素，我們就只需給splice()傳入兩個(gè)參數(shù)，第1個(gè)參數(shù)用于指定要?jiǎng)h除的第一項(xiàng)的位置，第2個(gè)參數(shù)用于指定要?jiǎng)h除元素的個(gè)數(shù)。

繼續(xù)上例~~

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

從索引項(xiàng)為2的位置開始刪除4個(gè)元素，所以結(jié)果為 [-1, 0, 1, 2]。

三、改

這個(gè)其實(shí)最靈活的方式就是直接使用splice()這個(gè)強(qiáng)大的方法了，其實(shí)通過以上對(duì)該方法的了解，我們大致就能知道使用該方法修改數(shù)組元素的基本原理。

原理很簡單，就是向指定位置插入任意數(shù)量的元素，且同時(shí)刪除任意數(shù)量的元素。

依然繼續(xù)上例~~

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

四、查

indexOf()和lastIndexOf()

這兩個(gè)方法都接收兩個(gè)參數(shù)：要查找的項(xiàng)和（可選的）表示查找起點(diǎn)位置的索引。其中，indexOf()從數(shù)組的開頭（位置0）開始向后查找，lastIndexOf()方法則從數(shù)組的末尾開始向前查找。

例如：

var index = arr.indexOf(0);
console.log(index);  // 1
index = arr.indexOf(3,0);
console.log(index);  // -1

當(dāng)找不到該元素時(shí)，返回 -1 ，lastIndexOf()方法同理。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。