Javascript數組方法探究一二

1. Array.prototype.slice方法

數組的 slice 方法一般用來從一個數組中抽取片段。不過，它還有將「類數組」(好比arguments和​HTMLCollection​)轉換爲真正數組的本領。

1 var nodesArr = Array.prototype.slice.call(document.forms);
2 
3 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」：

 1 function ArraySlice(start, end) {
 2   CHECK_OBJECT_COERCIBLE(this, "Array.prototype.slice");
 3   ...
 4   var result = []; // 這句是關鍵
 5 
 6   if (end_i < start_i) return result;
 7 
 8   if (UseSparseVariant(array, len, IS_ARRAY(array), end_i - start_i)) {
 9      ...
10     SparseSlice(array, start_i, end_i - start_i, len, result);
11   } else {
12     SimpleSlice(array, start_i, end_i - start_i, len, result);
13   }
14   ...
15   return result;

接着猜測調用「類數組」走的應該是SimpleSlice方法，而後在源碼查找「SimpleSlice「，發現Array.prototype.splice源碼中也調用了SimpleSlice方法，且結果變量也初始化爲空數組。不過，想用splice方法把「類數組」轉化爲真正數組，必需要傳入起始位置參數爲0，即：

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

由於它的實現原理就是將被刪除的數組項組成新數組。感興趣的童鞋能夠看下Array.prototype.splice的源碼實現。
此外，slice還能夠克隆一個數組：

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

補充：
使用如下方法也可將類數組轉換爲真實數組：
(1). [].concat.apply([], 類數組); 

(2). var arr = [];   [].push.apply(arr, 類數組);

 

2. Array.prototype.push 方法
使用 push方法能夠合併數組：

1 var arr1 = [1, 'str', {name: 'lang'}];
2 var arr2 = [2, 'ing'];
3 Array.prototype.push.apply(arr1, arr2);
4 // 返回結果：[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屬性去截斷數組：

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

與此同時，若是把length屬性變大，數組的長度值變會增長，且使用undefined來做爲新的元素填充。

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

 

 

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

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