Js數組方法解析

封面圖片來自Google

除了Object外，Array類型恐怕是Js中最經常使用的類型了

Js中數組的特色：

• 有序表
• 能夠存儲任意類型數據
• 數組長度是動態的（能夠隨數據的添加自動增加內容）

一、建立數組

建立數組的兩種基本方式：構造函數Array()和數組字面量[]

/ * 構造函數 */
var arr1 = new Array()          // 建立一個空數組
var arr2= new Array(3)          // 建立一個length爲3的空數組
var arr2= new Array('ok')       // ['ok']
var arr2= new Array(3,5)        // [3,5]
var arr3= Array('ok')           // ['ok'] 數組的建立省略new，效果也是相同的，區別於對象

/* 數組字面量 */
var arr4=[]                     //空數組
var arr5=[3]                     // [3]
var arr5=[3,'array',{'name':'Leo'}]    // [3,'array',{'name':'Leo'}]

/* 不要像下面這樣！！ */
var arrNotRecommend1=[1,2,]             //會建立一個2項或者3項的數組
var arrNotRecommend2=[, , , , ]         //會建立一個4項或者5項的數組
                                        //緣由是老版本（IE8-）的瀏覽器在數組字面量的實現上存在BUG


複製代碼

對於Array()建立數組有些缺陷（坑），由於給的參數個數(0,1,2+)不一樣都會致使Array()有不一樣的行爲，因此通常建議用數組字面量，或者Array.of()（ES6方法，後面提到）

二、訪問和設置數組的成員

2.一、使用 arr[idx] 方括號訪問

索引是以 0 開始的，以以前的 arr5 爲例：

arr5[0]             // 3 訪問第一項
arr5[2]             // {'name':'Leo'}

arr5[2]='edit'      // 修改第三項數據爲 ’edit‘
arr5[3]='add'        // 新增第四項爲 'add'
複製代碼

2.二、length屬性 ：數據項個數

Js數組的 length 屬性是可讀可寫的，因此能夠經過數組的 length 屬性對其進行加長和移除項的操做

var tryArrLen=['data1',2,'data3'] 
tryArrLen.length            // 3
tryArrLen.length=4          //數組新增一項，該項默認會爲'undefined'
tryArrLen[5]='add'          //數組新增一項，值爲'add'
tryArrLen[tryArrLen.length]='data'          //利用'length'屬性向數組末尾添加元素

tryArrLen.length=2          //數組項減小到2，會刪除第三項'data3'
tryArrLen[2]                //此時再次訪問第三項，也會爲undefined，不過緣由是第三項已經被刪除了
複製代碼

2.三、length屬性騷操做

var tryArrLen2=[1,2,3]
tryArrLen2[99]=100          //在第一百項添加一個數據 '100'
複製代碼

此時 tryArrLen2.length=?,答案是 100,而且從第四項到第九十九項的數據都是空位，簡單的理解爲 undifined。

具體來講ES6的數組方法都把空位做爲undefined,而ES5數組方法中對空位的處理不太統一，參考數組的空位

var tryArrLen3=[1,2,3]
tryArrLen3.length=4294967296    // RangeError: Invalid array length
複製代碼

Js數組最多能夠包含 4294967295 項，超出了，報 RangeError。

三、數組檢測

一個經典問題：如何檢測某個對象是否是數組？

3.一、常規操做

方法	不足
arr isInstanceOf Array	arr必須和Array在同一個全局做用域。多個全局環境時候(好比frame)就是妖怪。
Array.isArray(arr)	對老版本瀏覽器兼容性很差

3.二、騷操做

Object.prototype.toString.call(arr) == "[Object Array]"
複製代碼

任何一個對象上調用 Object 原生的 toString() 方法，都會返回一個
[Object NativeConstructorName] 的字符串。

注意！！前提是Object.prototype.toString()自己也沒有被修改過，由於其也有可能被修改...

四、轉換方法

4.一、對象方法

• valueOf()：返回數組自己
• toString()：返回數組的字符串表示。每一個值以字符串表示，並以逗號,拼接
• toLocaleString()：和toString()基本相同，區別在於輸出的是本地化的、特定語言環境的字符串

/* 將下列代碼修改 'zh-cn'爲其餘語言，運行一下，你就明白了 */
var array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
var localeString = array1.toLocaleString('zh-cn', {timeZone: "UTC"});

console.log(localeString);
// expected output: "1,a,12/21/1997, 2:12:00 PM",
// This assumes "en" locale and UTC timezone - your results may vary
複製代碼

4.二、join()

和toString()基本相同，區別在於能夠指定以什麼字符串進行拼接

let arr=[1,2,3]
arr.join('+')               // "1+2+3"
複製代碼

五、棧和隊列方法

• push()：接收任意個數的參數，按順序添加到數組末尾
• pop()：移除數組的最後一項(不接收參數)，並返回該項，數組length-1
• shift()：移除數組的第一項(不接收參數)，並返回該項，數組length-1
• unshift()：接收任意個數的參數，按順序添加到數組前端

將這四個方法進行組合就能夠實現棧和隊列的基本操做

/* 棧 */
push()+pop()
unshift()+shift()

/* 隊列 */
push()+shift()
unshift()+pop()
複製代碼

六、重排序方法

6.一、reverse()

反轉數組的順序

6.二、sort()

默認調用每一個數組項的toString方法，在進行排序。能夠接收一個比較函數做爲排序的參數

比較函數接收兩個形參,表示數組中相鄰的兩個數,好比val1,val2。 返回值能夠爲

• 負數，即'val1'排在val2以前
• 0，不改變排序
• 正數，'val1'排在val2以後

因此在比較函數內能夠寫排序邏輯，比較經常使用的：

function compare(val1,val2){
    return val2-val1       
}
... 
arr.sort(compare)                //降序排列
複製代碼

七、操做方法

7.一、concat()

建立當前數組的副本，並將接收的參數添加到副本的末尾，並返回一個新數組（沒有參數即返回副本自己）

• 數組淺拷貝
• 合併數組

若concat()的參數是數組，則會將參數數組的每一項（考慮當數組中的項是數組或對象的狀況）添加到結果數組末尾。 若參數不是數組類型，則是簡單添加到結果數組的末尾。

7.二、slice()

對數組進行切片操做，不改變原數組，返回一個新數組。

接收一個或兩個數字參數：

• 1個參數：返回從該位置到數組末尾的切片，即 [ 參數 , arr.length)
• 2個參數：返回參數1位置到參數2位置-1的切片，即 [ 參數1 , 參數2 )

當參數爲負數時，則能夠將length加上該參數來肯定其正數位置。即負數從數組末尾算起（最後一位爲 -1 ，依次類推）

7.三、splice()

splice() 接收 2 個或者 2+n 個參數，返回值永遠爲一個數組，包含從原數組中刪除的項(沒有刪除返回空數組)。splice() 操做會改變原數組。

splice( startPos, delCount , el1,el2,..eln )
複製代碼

• startPos: 起始位置
• delCount:（從起始位置起）刪除的項數
• el:（可選參數）插入或者替換的項

主要能夠實現數組的刪除、插入和替換操做。

• 刪除 只需指定兩個參數 startPos、delCount
• 插入 指定 startPos ,且 delCount=0 ，後面跟須要插入的若干個元素
• 替換 指定 startPos，delCount 爲（從 startPos 開始）要替換的元素個數，後面給須要替換的若干個元素。（注：delCount 能夠和參數中元素個數不同，多餘的就變爲刪除或者插入操做）。

八、位置方法

• indexOf()：從前日後找
• lastIndexOf()：從後往前找

都接收兩個參數：待查找的項和（可選）查找的起始位置。 返回值爲待查找的項在數組中的位置，沒有找到則返回-1

注：查找時候使用的是 === 進行判斷

九、迭代方法

迭代方法都不可使用break或者continue進行中斷。

• forEach()：對數組每一項運行指定函數，沒有返回值
• map()：對數組每一項運行指定函數，返回return的結果組成的新數組。
• filter()：對數組每一項運行指定函數，返回return的結果爲true的成員組成的新數組。
• every()：對數組每一項運行指定函數，若指定函數對每一項都return的值爲true，則返回true，不然false
• some()：對數組每一項運行指定函數，若指定函數對任意一項return的值爲true，則返回true，不然false

十、歸併方法

• reduce()：從前到後遍歷
• reduceRight()：從後到前遍歷

都接收4個參數：前一個值，當前值，項的索引，數組對象。每次return的值會傳遞到下一次處理的第一個參數中。

十一、ES6+ 數組方法

參考：

• 《JavaScript高級編程》
• ECMAScript入門 | 阮一峯
• JavaScript入門 | 阮一峯
• mdn