JS數(shù)組操作之增刪改查的簡單實現(xiàn)
JS提供了很多方便操作數(shù)組的方法,本文所要分享的就是如何快速對數(shù)組進(jìn)行增、刪、改、查。
一、增
1、push()
可接收任意數(shù)量的參數(shù),把它們逐個添加至數(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ù)逐個添加至數(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()方法有點類似,同樣是將元素添加至數(shù)組末尾,只不過這個數(shù)組已經(jīng)不是原來的那個數(shù)組了,而是其副本,所以concat()操作數(shù)組后會返回一個新的數(shù)組。具體用法如下:
① 不傳參數(shù),返回當(dāng)前數(shù)組副本
② 傳遞一或多個數(shù)組,則該方法會將這些數(shù)組中的每一項都添加到結(jié)果數(shù)組中
③ 傳遞非數(shù)組參數(shù),這些參數(shù)就會被直接添加到結(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三個元素。
4、splice()
前面的三個方法都具有很大局限性,因為不是添加到數(shù)組前就是數(shù)組后,而splice()就不一樣了,它非常靈活和強(qiáng)大。靈活是因為它可以添加元素到數(shù)組的任意位置,強(qiáng)大是因為它除了可以添加元素之外還具有刪除和替換元素的功能(這個后面會陸續(xù)講到)。
splice()可以向數(shù)組指定位置添加任意數(shù)量的元素,需要傳入至少3個參數(shù): 起始位置、0(要刪除的元素個數(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ù)組末尾刪除最后一項并返回該項。
接著上例:
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)先出的隊列,該方法可刪除數(shù)組第一項并返回該項。
繼續(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()一樣是返回一個新數(shù)組,不會影響原數(shù)組,只不過slice()是用來裁剪數(shù)組的,返回裁剪下來的數(shù)組,具體用法如下:
slice()方法可以接受一或兩個參數(shù),即要返回項的起始和結(jié)束位置。在只有一個參數(shù)的情況下,slice()方法返回從該參數(shù)指定位置開始到當(dāng)前數(shù)組末尾的所有項。如果有兩個參數(shù),該方法返回起始和結(jié)束位置之間的項——但不包括結(jié)束位置的項。
咱們還是繼續(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ù)講這個“萬能”的方法。
上面講到,該方法在添加數(shù)組元素的時候需要傳入3個以上參數(shù),而其中第2個參數(shù)就是用于指定要刪除元素的個數(shù)的,那時我們傳的是數(shù)字0。那么,如果單單只需刪除元素,我們就只需給splice()傳入兩個參數(shù),第1個參數(shù)用于指定要刪除的第一項的位置,第2個參數(shù)用于指定要刪除元素的個數(shù)。
繼續(xù)上例~~
arr.splice(2,4); console.log(arr); // [-1, 0, 1, 2]
從索引項為2的位置開始刪除4個元素,所以結(jié)果為 [-1, 0, 1, 2]。
三、改
這個其實最靈活的方式就是直接使用splice()這個強(qiáng)大的方法了,其實通過以上對該方法的了解,我們大致就能知道使用該方法修改數(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()
這兩個方法都接收兩個參數(shù):要查找的項和(可選的)表示查找起點位置的索引。其中,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)找不到該元素時,返回 -1 ,lastIndexOf()方法同理。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Javascript Function對象擴(kuò)展之延時執(zhí)行函數(shù)
這篇文章主要介紹 在js里面怎么延時執(zhí)行一個函數(shù)?2010-07-07JavaScript正則替換HTML標(biāo)簽功能示例
這篇文章主要介紹了JavaScript正則替換HTML標(biāo)簽功能,結(jié)合完整實例形式詳細(xì)分析了javascript正則替換字符串操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-03-03Javascript循環(huán)刪除數(shù)組中元素的幾種方法示例
這篇文章主要給大家介紹了關(guān)于Javascript循環(huán)刪除數(shù)組中元素的幾種方法,文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí),對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。2017-05-05JavaScript 程序循環(huán)結(jié)構(gòu)詳解
這篇文章主要為大家介紹了JavaScript 程序循環(huán)結(jié)構(gòu),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2021-12-12讓html元素隨瀏覽器的大小自適應(yīng)垂直居中的實現(xiàn)方法
下面小編就為大家?guī)硪黄宧tml元素隨瀏覽器的大小自適應(yīng)垂直居中的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10JavaScript常用截取字符串的三種方式用法區(qū)別實例解析
本文給大家分享JavaScript常用截取字符串的三種方式及每種用法的區(qū)別解析,感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05