JS數(shù)組的操作

上一篇JS字符串的操作中徽职,介紹了split方法可以將字符串轉(zhuǎn)化為以某種形式分割的數(shù)組湾宙,然后可以對其采用數(shù)組的操作方法,那么這一篇就來看看數(shù)組的操作方法是怎么樣的久锥。

一、如何創(chuàng)建數(shù)組

創(chuàng)建數(shù)組有兩種方式(①:構造數(shù)組异剥、②:字面量創(chuàng)建數(shù)組)

  • 構造數(shù)組

    • 無參構造
      無參構造數(shù)組可以使用關鍵詞new后接Array()方法創(chuàng)建一個數(shù)組瑟由,該數(shù)組是一個長度為0的空數(shù)組:

      無參構造數(shù)組

    • 單個參數(shù)構造數(shù)組
      該方法與無參構造類似,但是為Array()方法傳入了一個參數(shù)(該參數(shù)不能為負數(shù))冤寿,該參數(shù)制定了數(shù)組初始的長度歹苦,這些長度的值都是undefined

      單個參數(shù)的構造數(shù)組

    • 多個參數(shù)構造數(shù)組
      這種方法可以為Array()傳入多個參數(shù),這些參數(shù)就是該數(shù)組的初始值督怜,有幾個參數(shù)殴瘦,該數(shù)組的長度就是幾:

      多個參數(shù)構造數(shù)組

  • 字面量創(chuàng)建數(shù)組
    字面量創(chuàng)建數(shù)組是最常用的創(chuàng)建數(shù)組的方式,該方法通過將一個數(shù)組賦值給一個變量創(chuàng)建号杠,可以為創(chuàng)建的數(shù)組傳入值作為它的的初始值:


    字面量創(chuàng)建數(shù)組

二蚪腋、數(shù)組的長度及索引

  • 數(shù)組的長度

    • length:
      數(shù)組的長度可以通過arr.length的方式進行查詢:

      length

    • 設置數(shù)組的length:
      數(shù)組的長度可以通過對arr.length進行賦值來改變,長度變化后該數(shù)組的值也會產(chǎn)生相應額變化姨蟋,多出來的長度會用undefined進行填充屉凯,而少了的則從數(shù)組的尾部開始刪除:

      通過length改變數(shù)組

  • 數(shù)組的索引

    • 數(shù)組的索引用來檢索數(shù)組中處于某位的元素,用arr[idx]來表示眼溶,通常用于檢索數(shù)組或者通過賦值改變數(shù)組中的某個值悠砚,若是用于檢索時,輸入的索引大于數(shù)組長度堂飞,則值為undefined灌旧,此外,也可以用length表示數(shù)組的索引方便檢索未知位的數(shù)組:
      檢索數(shù)組:

      檢索數(shù)組

      修改數(shù)組對應索引的值:
      修改數(shù)組對應索引的值

    • 通過索引修改數(shù)組的長度
      我們還可以通過對數(shù)組中的某位索引進行賦值酝静,進而對數(shù)組的長度進行修改:


      通過索引修改數(shù)組長度

三节榜、數(shù)組中值的添加和刪除

  • 我們可以使用數(shù)組對象中的內(nèi)置方法對數(shù)組中的值進行添加和刪除,常用的有如下四種方法:
    (pop别智、push宗苍、shift、unshift)薄榛;

    • pop():
      pop()方法用于刪除數(shù)組中的最后一位值讳窟,并返回這個值,使用方法如下:
      pop
    • push()方法用于添加一個值到數(shù)組的最后一位敞恋,參數(shù)填寫需要添加進去的值丽啡,執(zhí)行后返回添加后數(shù)組的長度:
      push
    • shift()方法用于刪除數(shù)組中的第一位值,并返回這個值:
      shift
    • unshift()方法用于添加一個值到數(shù)組的第一位硬猫,然后返回添加后的數(shù)組長度补箍,參數(shù)為需要被添加進去的值:
      unshift
  • 然而上面四種操作都不是很方便改执,比如需要對數(shù)組中間的值進行刪除和添加它們就無能為力了,這時候我們可以使用數(shù)組對象內(nèi)置的方法splice()坑雅;
    splice功能非常強大辈挂,它可以接受兩個、三個或多個參數(shù)裹粤,它的第一個參數(shù)代表需要操作的值的索引终蒂,第二個參數(shù)是需要刪除的值的個數(shù),第三個參數(shù)可以是多個參數(shù)遥诉,代表需要添加進去的值拇泣,下面來看一下使用例子:

    • 刪除數(shù)組中的3:


      splice刪除
    • 添加一個100到4的前面:


      splice添加
    • 添加很多個100到5的前面:


      splice添加多個值

PS:pop()、push()矮锈、shift()霉翔、unshift()、splice()這五個方法都是直接對原數(shù)組進行的操作

四愕难、數(shù)組的排序

我們可以使用reverse()早龟、sort()對數(shù)組進行排序

  • reverse:
    reverse()方法可以將數(shù)組反轉(zhuǎn),逆向排序猫缭,這個方法會對原數(shù)組產(chǎn)生影響葱弟,使用如下:
    反轉(zhuǎn)數(shù)組
  • sort:
    sort()方法功能更加強大,它可以按照我們想要的方式對數(shù)組進行排序猜丹,無參數(shù)時按照ASCII碼的大小進行排序芝加,此外它可以接收一個回調(diào)函數(shù)作為參數(shù),然后按照該函數(shù)返回的值對數(shù)組進行排序射窒,這個方法也會對原數(shù)組產(chǎn)生影響:
    1.無參數(shù)時藏杖,按照值的第一位的ASCII碼進行排序:
    無參排序

    2.傳入回調(diào)函數(shù),該函數(shù)返回的是正數(shù)的話脉顿,則按照從小到大的順序排序:
    返回的如果是負數(shù)蝌麸,則按照從大到小的順序排序:
    有參排序

五、數(shù)組的分割和組合

除了上面的對數(shù)組中的值進行添加和刪除的五種操作方法外艾疟,數(shù)組對象還內(nèi)置了對數(shù)組進行分割和組合的方法

  • concat:
    concat()方法用于將兩個數(shù)組結合成一個數(shù)組来吩,參數(shù)為需要結合的數(shù)組,該方法不會對原數(shù)組產(chǎn)生影響蔽莱,返回的是一個新的數(shù)組弟疆,生成的新數(shù)組一般通過賦值進行使用,用法如下:
    concat
  • slice:
    slice()方法用于分割數(shù)組盗冷,它接受兩個參數(shù)怠苔,第一個是分割的起始索引(包括該值),第二個是結束索引(分割不包括該值)仪糖,參數(shù)允許負數(shù)柑司,該方法不會影響原數(shù)組迫肖,而是返回一個新的數(shù)組:
    slice

六、數(shù)組轉(zhuǎn)化為字符串(join()方法)

數(shù)組可以通過join()方法將數(shù)組轉(zhuǎn)化為字符串:
join()方法可以傳入一個參數(shù)攒驰,用作分隔轉(zhuǎn)化后的字符串的參照物咒程,該參數(shù)可以是空字符串,沒有參數(shù)則默認使用逗號進行分隔讼育,這個方法不會對原數(shù)組產(chǎn)生影響:
1.無參轉(zhuǎn)化:

無參轉(zhuǎn)化

2.有參轉(zhuǎn)化:
有參轉(zhuǎn)化

七、總結

  1. 長度:length
    可通過該屬性查詢數(shù)組的長度稠集;

  2. 刪除數(shù)組內(nèi)的元素:pop奶段、shift(對原數(shù)組產(chǎn)生影響)
    pop:刪除數(shù)組中的最后一位元素;
    shift:刪除數(shù)組中的第一位元素剥纷;

  3. 添加元素到數(shù)組里面:push痹籍、unshift(對原數(shù)組產(chǎn)生影響)
    push:添加一首元素到數(shù)組的最后一位;
    unshift:添加一個元素到數(shù)組的第一位晦鞋;

  4. 添加和刪除都可以的方法:splice(對原數(shù)組產(chǎn)生影響)
    splice:可接收參數(shù)蹲缠,第一個參數(shù)是索引位置,第二個是刪除元素的個數(shù)悠垛,后面的參數(shù)都是添加的元素线定;

  5. 數(shù)組分割和組合:slice、concat
    slice:分割數(shù)組确买,不會影響原數(shù)組斤讥,返回新的數(shù)組,有兩個參數(shù)湾趾,第一個是刪除的起始位置芭商,第二個是結束位置(不包含該位元素);
    concat:組合數(shù)組搀缠,可以將兩個數(shù)組組合為一個新數(shù)組铛楣,然后返回這個新數(shù)組,對原數(shù)組無影響艺普,接受一個參數(shù)簸州,該參數(shù)為需要組合的數(shù)組;

  6. 數(shù)組排序:reverse衷敌、sort(對原數(shù)組會產(chǎn)生影響)
    reverse:反轉(zhuǎn)數(shù)組勿侯,將數(shù)組內(nèi)元素原本的順序進行逆轉(zhuǎn)排列;
    sort:可對數(shù)組進行想要的方式排序缴罗,接收一個回調(diào)函數(shù)作為參數(shù)助琐,并按照該函數(shù)進行排序,如果沒有參數(shù)面氓,則按照ASCII碼的順序進行排序兵钮;

  7. 數(shù)組轉(zhuǎn)化字符串:join
    join:可以將數(shù)組轉(zhuǎn)化為字符串蛆橡,不會對原數(shù)組產(chǎn)生影響,接收一個參數(shù)掘譬,該參數(shù)是分隔新生成的字符串的參照物泰演,如果沒有添加參數(shù)則默認用逗號進行分隔;

八葱轩、ES5對數(shù)組擴展的新方法

  • Array.isArray()
    Array.isArray()用于判斷一個數(shù)據(jù)是否是數(shù)組睦焕,參數(shù)為需要判斷的數(shù)據(jù),返回一個布爾值:

    Array.isArray()

  • indexOf()和lastIndexOf()
    indexOf()和lastIndexOf()這兩個方法分別是正向查找元素和反向查找元素靴拱,接收一個被查找的元素作為參數(shù)垃喊,返回該元素在數(shù)組中的位置,其中indexOf()返回該元素第一次出現(xiàn)的索引袜炕,lastIndexOf()返回該元素最后一次出現(xiàn)的索引本谜,沒有找到則返回-1:

    indexOf()和lastIndexOf()

  • forEach
    forEach()方法可以用來遍歷數(shù)組,并且對數(shù)組的每個元素做出一些操作偎窘,它接收一個回調(diào)函數(shù)做參數(shù)乌助,該回調(diào)函數(shù)接收三個參數(shù),第一個代表屬組內(nèi)的元素陌知,第二個代表索引他托,第三個是數(shù)組,這個方法不會對原數(shù)組產(chǎn)生影響:

    forEach

  • every()和some()
    every()some()都可以判斷數(shù)組內(nèi)的元素是否符合要求纵诞,返回的都是布爾值上祈,區(qū)別是every判斷是所有元素都符合規(guī)則才返回true,而some是判斷只要有一個元素符合規(guī)則就返回true浙芙,它們都接受一個回調(diào)函數(shù)作為參數(shù)登刺,該回調(diào)函數(shù)是判斷的標準:

    every()和some()

  • map
    map()forEach()方法類似,也是傳入回調(diào)函數(shù)作為參數(shù)嗡呼,該回調(diào)函數(shù)接收三個參數(shù)纸俭,不同的是forEach()只為每個數(shù)組中的元素執(zhí)行一次回調(diào)函數(shù),而map()在執(zhí)行完回調(diào)函數(shù)后會返回一個新的數(shù)組:

    map()與forEach()的區(qū)別

  • filter
    filter()方法用來過濾一個數(shù)組南窗,將符合要求的元素組成一個新的數(shù)組揍很,原數(shù)組不變,接收一個回調(diào)函數(shù)作為參數(shù):

    filter()

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末万伤,一起剝皮案震驚了整個濱河市窒悔,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌敌买,老刑警劉巖简珠,帶你破解...
    沈念sama閱讀 217,406評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡聋庵,警方通過查閱死者的電腦和手機膘融,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來祭玉,“玉大人氧映,你說我怎么就攤上這事⊥鸦酰” “怎么了岛都?”我有些...
    開封第一講書人閱讀 163,711評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長振峻。 經(jīng)常有香客問我疗绣,道長,這世上最難降的妖魔是什么铺韧? 我笑而不...
    開封第一講書人閱讀 58,380評論 1 293
  • 正文 為了忘掉前任锄禽,我火速辦了婚禮捧存,結果婚禮上,老公的妹妹穿的比我還像新娘挖炬。我一直安慰自己讯壶,他們只是感情好料仗,可當我...
    茶點故事閱讀 67,432評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著伏蚊,像睡著了一般立轧。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上躏吊,一...
    開封第一講書人閱讀 51,301評論 1 301
  • 那天氛改,我揣著相機與錄音,去河邊找鬼比伏。 笑死胜卤,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的赁项。 我是一名探鬼主播葛躏,決...
    沈念sama閱讀 40,145評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼悠菜!你這毒婦竟也來了舰攒?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,008評論 0 276
  • 序言:老撾萬榮一對情侶失蹤悔醋,失蹤者是張志新(化名)和其女友劉穎摩窃,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體篙顺,經(jīng)...
    沈念sama閱讀 45,443評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡偶芍,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,649評論 3 334
  • 正文 我和宋清朗相戀三年充择,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片椎麦。...
    茶點故事閱讀 39,795評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡材彪,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出段化,到底是詐尸還是另有隱情,我是刑警寧澤显熏,帶...
    沈念sama閱讀 35,501評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站喘蟆,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏蕴轨。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,119評論 3 328
  • 文/蒙蒙 一橙弱、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧棘脐,春花似錦、人聲如沸蛀缝。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至俘闯,卻和暖如春潭苞,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背真朗。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評論 1 269
  • 我被黑心中介騙來泰國打工此疹, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 47,899評論 2 370
  • 正文 我出身青樓蝗碎,卻偏偏與公主長得像湖笨,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子蹦骑,可洞房花燭夜當晚...
    茶點故事閱讀 44,724評論 2 354

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

  • Ba la la la ~ 讀者朋友慈省,你們好啊,又到了冷鋒時間眠菇,話不多說边败,發(fā)車! 1捎废、數(shù)組的創(chuàng)建 var...
    王飽飽閱讀 232評論 0 1
  • 1笑窜、數(shù)組的創(chuàng)建 要說明的是,雖然第二種方法創(chuàng)建數(shù)組指定了長度登疗,但實際上所有情況下數(shù)組都是變長的排截,也就是說即使指定了...
    IT飛牛閱讀 225評論 0 0
  • 我們都曾是學生,我們都會選擇自己喜歡的職業(yè)來謀生辐益。我和你們一樣匾寝,也曾是一名學生,后來成了一名老師荷腊,再后來,我又從一...
    橙子的暖冬閱讀 265評論 8 5
  • # 個人原創(chuàng)輪子急凰,如需轉(zhuǎn)載請注明出處女仰。 受實習僧和今日頭條的登錄界面的啟發(fā),自己砸包拿圖結合兩者的亮點做了這個框架...
    木有錯閱讀 503評論 0 2