深入探密Javascript數組方法_基礎知識

在JavaScript中，陣列可以使用Array建構函數來創建，或使用[]快速創建，這也是首選的方法。陣列是繼承自Object的原型，他對typeof沒有特殊的回傳值，他只回傳'object'。

1. Array.prototype.slice方法
陣列的 slice 方法通常用來從一個陣列中抽取片段。不過，它還有將「類別數組」(例如arguments和HTMLCollection)轉換為真正數組的本領。

複製程式碼 程式碼如下:

 var nodesArr = Array.prototype.slice.call(document.forms);
 var argsArr = Array.prototype.slice.call(arguments);

我好奇了為什麼陣列的slice方法有這樣的本領，它在javascript引擎中是如何實現的？ slice的兄弟方法有沒有這樣的本領？

帶著好奇心，下載Google的V8 javascript引擎源碼到本地，V8源碼的下載位址：https://github.com/v8/v8。

在v8-master/src/array.js中尋找「Array.prototype.slice」：

複製程式碼 程式碼如下:

function ArraySlice(start, end) {
  CHECK_OBJECT_COERCIBLE(this, "Array.prototype.slice");
  ...
  var result = []; // 這句話是關鍵
  if (end_i   if (UseSparseVariant(array, len, IS_ARRAY(array), end_i - start_i)) {
     ...
    SparseSlice(array, start_i, end_i - start_i, len, result);
  } else {
    SimpleSlice(array, start_i, end_i - start_i, len, result);
  }
  ...
  return result;

接著猜想呼叫「類別數組」走的應該是SimpleSlice方法，然後在原始碼查找「SimpleSlice「，發現Array.prototype.splice源碼中也呼叫了SimpleSlice方法，且結果變數也初始化為空數組。不過，想用splice方法把「類別數組」轉換成真正數組，必須傳入起始位置參數為0，即：

複製程式碼 程式碼如下:

 var nodesArr = Array.prototype.splice.call(document.forms, 0);

因為它的實作原理就是將被刪除的陣列項目組成新數組。有興趣的童鞋可以看下Array.prototype.splice的源碼實作。
此外，slice還可以複製一個陣列：

複製程式碼 程式碼如下:

 var arr = [1, 2, 3];
 var cloneArr = arr.slice(); // cloneArr:  [1, 2, 3]

2. Array.prototype.push 方法
使用 push方法可以合併數組：

複製程式碼 程式碼如下:

 var arr1 = [1, 'str', {name: 'lang'}];
 var arr2 = [2, 'ing'];
 Array.prototype.push.apply(arr1, arr2);
 // 回傳結果：[1, "str", {name: 'lang'}, 2, "ing"]

3. Array.prototype.sort 方法
先上代號：

複製程式碼 程式碼如下:

var arr = ['1', '2', '10', '12'];
arr.sort();
// 回傳結果：["1", "10", "12", "2"]

上面的結果通常不是我們想要的，那麼如何按數值大小排序：

複製程式碼 程式碼如下:

arr.sort(function(a, b) {
  return a - b;
})
// 回傳結果：["1", "2", "10", "12"]

有了排序比較器函數之後，就可以自訂很多比較器，從而實現個人化的排序。

4. length 屬性
陣列的length屬性，不是唯讀的，也就說還可寫哦，例如使用length屬性去截斷數組：

複製程式碼 程式碼如下:

 var arr = [1, 2, 3, 4];
 arr.length = 2;
 // arr: [1, 2]
 arr.length = 0;
 // arr: []

同時，如果把length屬性變大，數組的長度值變會增加，並且使用undefined來作為新的元素填充。

複製程式碼 程式碼如下:

 var arr = [];
 arr.length = 3;
 // arr: [undefined, undefined, undefined]

好了，今天就總結到這裡了，已經凌晨了，以後有什麼新發現再append到這裡。
之前，沒有寫部落格的習慣，只習慣把平常的總結放到有道雲筆記中，沒想到把觀點寫出來著實要花點心思的，因為要考慮如何表達，才能讓別人更好地理解。

有什麼表達不對或理解錯誤的地方，還望大家幫忙指正出來。

另附上一些常用的javascript陣列方法

concat()連接兩個或更多的數組，並傳回結果。
join()把陣列的所有元素放入一個字串。元素透過指定的分隔符號進行分隔。
pop()刪除並傳回陣列的最後一個元素
push()在數組的末尾添加一個或更多元素，並傳回新的長度。
reverse()顛倒數組中元素的順序。
shift()刪除並傳回陣列的第一個元素
slice()從某個已有的陣列傳回選取的元素
sort()對陣列的元素進行排序
splice()刪除元素，並在陣列中新增元素。
toSource()傳回該物件的原始碼
toString()把陣列轉換為字串，並回傳結果。
toLocaleString()把陣列轉換為本地數組，並回傳結果。
unshift()在陣列的開頭新增一個或更多元素，並傳回新的長度。
valueOf()傳回數組物件的原始值