1. 程式人生 > 實用技巧 >js陣列方法詳細總結

js陣列方法詳細總結

前言

引用型別之陣列,陣列是資料的有序列表,但是js中的陣列每一項可以儲存任何型別的資料,第一項可以是字串,第二項可以是數值,第三項可以是物件,等等,陣列的大小是可以動態調整的,即可以隨著資料的新增自動增長以容納新增資料。

正文

一、建立方式

陣列有兩種建立方式,一是使用建構函式的方法,一種是使用字面量的方式

①建構函式

var arr = new Array()

其中可以給建構函式傳遞引數

如果是

var arr = new Array(5) // 表示要建立的陣列的長度為5的空陣列,每一項為undefined

還可以

var arr = new Array('red','yellow','blue')

這就建立了一個包含這三項的一個數組。另外new操作符也可以省略

②字面量方式

建陣列的第二種基本方式是使用陣列字面量表示法。陣列字面量由一對包含陣列項的方括號表示,多個數組項之間以逗號隔開。通過設定這個屬性,可以從陣列的末尾移除項或向陣列中新增新項。

通過設定這個屬性,可以從陣列的末尾移除項或向陣列中新增新項陣列最多可以包含4294967295個項,這幾乎已經能夠滿足任何程式設計需求了。如果想新增的項數超過這個上限值,就會發生異常。而建立一個初始大小與這個上限值接近的陣列,則可能會導致執行時間超長的指令碼錯誤。

二、檢測陣列

檢測一個物件是不是陣列型別,不推薦使用instanceof操作符,我們使用Array.isArray()方法。

三、轉換方法

所有物件都具有toLocaleString()、toString()和valueOf()方法。

①使用valueOf()方法還是會返回陣列本身

②使用toString()會返回由陣列中每個值的字串形式拼接而成的一個以逗號分隔的字串,內部為了建立這個字串會呼叫陣列每一項的toString()方法。不支援傳參。

③使用toLocaleString()會返回由陣列中每個值的字串形式拼接而成的一個以逗號分隔的字串,內部為了建立這個字串會呼叫陣列每一項的toLocaleString()方法。不支援傳參。

陣列中還有一個join()方法可以把陣列轉換成字串,該方法只接收一個引數,引數以字串的形式傳參,引數用作分隔字元,不傳參的情況下預設為逗號分隔,如果陣列中的某一項的值是null或者undefined,那麼該值在join()、toLocaleString()、toString()和valueOf()方法返回的結果中以空字串表示。

四、陣列增刪改查方法

  1. push()方法可以接收任意數量的引數,把它們逐個新增到陣列末尾,並返回修改後陣列的長度

  2. unshift()方法在陣列前端新增任意個項了,並返回新陣列的長度

  3. pop()方法則從陣列末尾移除最後一項,減少陣列的length值,然後返回移除的項

  4. shift(),它能夠移除陣列中的第一個項並返回該項

  5. reverse()對陣列順序進行顛倒,注意並不能使陣列實現從小到大的排序,只是使陣列前後順序顛倒,返回值是顛倒順序後的陣列且原陣列也已經被影響

  6. sort()預設對陣列進行按升序排列,內部會呼叫陣列每一項的valueOf()方法,實際的是比較的字串,所以有時候並不能真正的按數值大小來進行排序,

    所以該方法可以接收一個比較函式

     function compare (value1,value2) {
                if(value1>value2) {
                    return -1
                }else if (value1<value2) {
                    return 1
                }else {
                    return 0
                }
            }
    

    可以更改return的返回值來規定排序規則,使用則為arr.sort(compare),函式不需要加()。

  7. concat()方法會先建立當前陣列一個副本,然後將接收到的引數新增到這個副本的末尾,最後返回新構建的陣列,原陣列不會受到影響。如果傳遞給concat()方法的是一或多個數組,則該方法會將這些陣列中的每一項都新增到結果陣列中。如果傳遞的值不是陣列,這些值就會被簡單地新增到結果陣列的末尾。

  8. slice(),它能夠基於當前陣列中的一或多個項建立一個新陣列。slice()方法可以接受一或兩個引數,即要返回項的起始和結束位置。在只有一個引數的情況下,slice()方法返回從該引數指定位置開始到當前陣列末尾的所有項。如果有兩個引數,該方法返回起始和結束位置之間的項——但不包括結束位置的項。注意,slice()方法返回新建立的陣列,不會影響原始陣列

    如果slice()方法的引數中有一個負數,則用陣列長度加上該數來確定相應的位置。例如,在一個包含5項的陣列上呼叫slice(-2, -1)與呼叫slice(3,4)得到的結果相同。如果結束位置小於起始位置,則返回空陣列。且如果兩個引數都為負數,與陣列長度相加後都仍為負數,也會返回一個空陣列。

  9. splice()方法,splice()的主要用途是向陣列的中部插入項,他有三種用法

    刪除:可以刪除任意數量的項,只需指定2個引數:要刪除的第一項的位置和要刪除的項數。例如,splice(0,2)會刪除陣列中的前兩項。

    插入:可以向指定位置插入任意數量的項,只需提供3個引數:起始位置、0(要刪除的項數)和要插入的項。如果要插入多個項,可以再傳入第四、第五,以至任意多個項。例如,splice(2,0, "red", "green")會從當前陣列的位置2開始插入字串"red"和"green"。

    替換:可以向指定位置插入任意數量的項,且同時刪除任意數量的項,只需指定3個引數:起始位置、要刪除的項數和要插入的任意數量的項。插入的項數不必與刪除的項數相等。例如,splice (2,1, "red", "green")會刪除當前陣列位置2的項,然後再從位置2開始插入字串"red"和"green"。

    splice()方法始終都會返回一個數組,該陣列中包含從原始陣列中刪除的項(如果沒有刪除任何項,則返回一個空陣列)

  10. indexOf()和lastIndexOf()。這兩個方法都接收兩個引數:要查詢的項和(可選的)表示查詢起點位置的索引。其中,indexOf()方法從陣列的開頭(位置0)開始向後查詢,lastIndexOf()方法則從陣列的末尾開始向前查詢。

    這兩個方法都返回要查詢的項在陣列中的位置,或者在沒找到的情況下返回-1。在比較第一個引數與陣列中的每一項時,會使用全等操作符;也就是說,要求查詢的項必須嚴格相等(就像使用===一樣)

  11. ECMAScript 5為陣列定義了5個迭代方法。每個方法都接收兩個引數:要在每一項上執行的函式和(可選的)執行該函式的作用域物件——影響this的值。傳入這些方法中的函式會接收三個引數:陣列項的值、該項在陣列中的位置和陣列物件本身。根據使用的方法不同,這個函式執行後的返回值可能會也可能不會影響方法的返回值。以下是這5個迭代方法的作用。

    ❏ every():對陣列中的每一項執行給定函式,如果該函式對每一項都返回true,則返回true。

    ❏ some():對陣列中的每一項執行給定函式,如果該函式對任一項返回true,則返回true。

    ❏ filter():對陣列中的每一項執行給定函式,返回該函式會返回true的項組成的陣列。

    ❏ map():對陣列中的每一項執行給定函式,返回每次函式呼叫的結果組成的陣列。

    ❏ forEach():對陣列中的每一項執行給定函式。這個方法沒有返回值。

  12. ECMAScript 5還新增了兩個歸併陣列的方法:reduce()和reduceRight()。這兩個方法都會迭代陣列的所有項,然後構建一個最終返回的值。其中,reduce()方法從陣列的第一項開始,逐個遍歷到最後。而reduceRight()則從陣列的最後一項開始,向前遍歷到第一項。

    這兩個方法都接收兩個引數:一個在每一項上呼叫的函式和(可選的)作為歸併基礎的初始值。傳給reduce()和reduceRight()的函式接收4個引數:前一個值、當前值、項的索引和陣列物件。這個函式返回的任何值都會作為第一個引數自動傳給下一項。第一次迭代發生在陣列的第二項上,因此第一個引數是陣列的第一項,第二個引數就是陣列的第二項。

    var arr = new Array(5,8,9,36,7);
    console.log(arr.reduce(function test (prev,cur,index,arr) {
               return prev+cur
           })) // 65
    

    但是如下程式碼會報錯:

     var arr = new Array(5,8,9,36,7);
            function test (prev,cur,index,arr) {
               return prev+cur;
            }
           console.log(arr.reduce(test (prev,cur,index,arr)));