JS數(shù)組操作之增刪改查

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()方法同理。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 由于最近都在freecodecamp上刷代碼,運(yùn)用了很多JavaScript數(shù)組的方法,因此做了一份關(guān)于JavaS...
    2bc5f46e925b閱讀 2,171評(píng)論 0 16
  • 第5章 引用類型(返回首頁) 本章內(nèi)容 使用對(duì)象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學(xué)一百閱讀 3,674評(píng)論 0 4
  • 數(shù)組是值的有序集合。每個(gè)值叫做一個(gè)元素,而每個(gè)元素在數(shù)組中有一個(gè)位置,以數(shù)字表示,稱為索引。 JavaScript...
    劼哥stone閱讀 1,242評(píng)論 6 20
  • 第三章 類型、值和變量 1、存取字符串、數(shù)字或布爾值的屬性時(shí)創(chuàng)建的臨時(shí)對(duì)象稱做包裝對(duì)象,它只是偶爾用來區(qū)分字符串值...
    坤少卡卡閱讀 720評(píng)論 0 1
  • 薰衣草,記得初識(shí)它的時(shí)候,好像是當(dāng)年看一部電視劇“薰衣草”(還有一首“花香”),紫色的它特別的吸睛~而且看著一大片...
    WoWkx閱讀 400評(píng)論 0 0

友情鏈接更多精彩內(nèi)容