DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 深入探密Javascript數組方法
深入探密Javascript數組方法
編輯: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 < start_i) return result;
  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()返回數組對象的原始值

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved