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

JS提供了很多方便操作數(shù)組的方法宠漩,本文所要分享的就是如何快速對數(shù)組進行增、刪抛计、改哄孤、查。

一吹截、增

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ù)刨摩,返回當前數(shù)組副本
② 傳遞一或多個數(shù)組,則該方法會將這些數(shù)組中的每一項都添加到結果數(shù)組中
③ 傳遞非數(shù)組參數(shù)世吨,這些參數(shù)就會被直接添加到結果數(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()就不一樣了戈轿,它非常靈活和強大凌受。靈活是因為它可以添加元素到數(shù)組的任意位置阵子,強大是因為它除了可以添加元素之外還具有刪除和替換元素的功能(這個后面會陸續(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()方法配合使用可以構成后進先出的棧,該方法可從數(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()方法配合使用可以構成先進先出的隊列,該方法可刪除數(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ù)左腔,即要返回項的起始和結束位置汰翠。在只有一個參數(shù)的情況下香嗓,slice()方法返回從該參數(shù)指定位置開始到當前數(shù)組末尾的所有項狐榔。如果有兩個參數(shù)藕筋,該方法返回起始和結束位置之間的項——但不包括結束位置的項葫督。

咱們還是繼續(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個元素,所以結果為 [-1, 0, 1, 2]堕阔。

三棍厂、改

這個其實最靈活的方式就是直接使用splice()這個強大的方法了,其實通過以上對該方法的了解超陆,我們大致就能知道使用該方法修改數(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

當找不到該元素時漠畜,返回 -1 币他,lastIndexOf()方法同理。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末憔狞,一起剝皮案震驚了整個濱河市圆丹,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌躯喇,老刑警劉巖辫封,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異廉丽,居然都是意外死亡倦微,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進店門正压,熙熙樓的掌柜王于貴愁眉苦臉地迎上來欣福,“玉大人,你說我怎么就攤上這事焦履⊥厝埃” “怎么了?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵嘉裤,是天一觀的道長郑临。 經(jīng)常有香客問我,道長屑宠,這世上最難降的妖魔是什么厢洞? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮典奉,結果婚禮上躺翻,老公的妹妹穿的比我還像新娘。我一直安慰自己卫玖,他們只是感情好公你,可當我...
    茶點故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著假瞬,像睡著了一般陕靠。 火紅的嫁衣襯著肌膚如雪嚣崭。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天懦傍,我揣著相機與錄音,去河邊找鬼芦劣。 笑死粗俱,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的虚吟。 我是一名探鬼主播寸认,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼串慰!你這毒婦竟也來了偏塞?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤邦鲫,失蹤者是張志新(化名)和其女友劉穎灸叼,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體庆捺,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡古今,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了滔以。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片捉腥。...
    茶點故事閱讀 38,654評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖你画,靈堂內(nèi)的尸體忽然破棺而出抵碟,到底是詐尸還是另有隱情,我是刑警寧澤坏匪,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布拟逮,位于F島的核電站,受9級特大地震影響适滓,放射性物質發(fā)生泄漏唱歧。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一粒竖、第九天 我趴在偏房一處隱蔽的房頂上張望颅崩。 院中可真熱鬧,春花似錦蕊苗、人聲如沸沿后。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽尖滚。三九已至喉刘,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間漆弄,已是汗流浹背睦裳。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留撼唾,地道東北人廉邑。 一個月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像倒谷,于是被迫代替她去往敵國和親蛛蒙。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,543評論 2 349

推薦閱讀更多精彩內(nèi)容

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