JS數(shù)組的操作

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

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

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

  • 構(gòu)造數(shù)組

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

      無參構(gòu)造數(shù)組

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

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

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

      多個參數(shù)構(gòu)造數(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è)置數(shù)組的length:
      數(shù)組的長度可以通過對arr.length進行賦值來改變,長度變化后該數(shù)組的值也會產(chǎn)生相應(yīng)額變化,多出來的長度會用undefined進行填充,而少了的則從數(shù)組的尾部開始刪除:

      通過length改變數(shù)組

  • 數(shù)組的索引

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

      檢索數(shù)組

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

    • 通過索引修改數(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ù)組結(jié)合成一個數(shù)組,參數(shù)為需要結(jié)合的數(shù)組,該方法不會對原數(shù)組產(chǎn)生影響,返回的是一個新的數(shù)組,生成的新數(shù)組一般通過賦值進行使用,用法如下:
    concat
  • slice:
    slice()方法用于分割數(shù)組,它接受兩個參數(shù),第一個是分割的起始索引(包括該值),第二個是結(jié)束索引(分割不包括該值),參數(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)化

七、總結(jié)

  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ù),第一個是刪除的起始位置,第二個是結(jié)束位置(不包含該位元素);
    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ù)是判斷的標(biāo)準(zhǔn):

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

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