快捷導(dǎo)航

深入探密Javascript數(shù)組方法

更新時間：2015年01月08日 08:46:01 投稿：hebedich

這篇文章主要詳細(xì)介紹了Javascript數(shù)組方法，十分的全面詳盡，有需要的小伙伴可以來研究下，希望對大家能有所幫助

在JavaScript中，數(shù)組可以使用Array構(gòu)造函數(shù)來創(chuàng)建，或使用[]快速創(chuàng)建，這也是首選的方法。數(shù)組是繼承自O(shè)bject的原型，并且他對typeof沒有特殊的返回值，他只返回'object'。

1. Array.prototype.slice方法
數(shù)組的 slice 方法通常用來從一個數(shù)組中抽取片斷。不過，它還有將“類數(shù)組”(比如arguments和HTMLCollection)轉(zhuǎn)換為真正數(shù)組的本領(lǐng)。

復(fù)制代碼代碼如下:

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

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

我就好奇了為什么數(shù)組的slice方法有這樣的本領(lǐng)，它在javascript引擎中是如何實(shí)現(xiàn)的？slice的兄弟方法有沒有這樣的本領(lǐng)？

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

在v8-master/src/array.js中查找“Array.prototype.slice”：

復(fù)制代碼代碼如下:

function ArraySlice(start, end) {

  CHECK_OBJECT_COERCIBLE(this, "Array.prototype.slice");

  ...

  var result = []; // 這句是關(guān)鍵

  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;

接著猜想調(diào)用“類數(shù)組”走的應(yīng)該是SimpleSlice方法，然后在源碼查找“SimpleSlice“，發(fā)現(xiàn)Array.prototype.splice源碼中也調(diào)用了SimpleSlice方法，且結(jié)果變量也初始化為空數(shù)組。不過，想用splice方法把“類數(shù)組”轉(zhuǎn)化為真正數(shù)組，必須要傳入起始位置參數(shù)為0，即：

復(fù)制代碼代碼如下:

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

因?yàn)樗膶?shí)現(xiàn)原理就是將被刪除的數(shù)組項(xiàng)組成新數(shù)組。感興趣的童鞋可以看下Array.prototype.splice的源碼實(shí)現(xiàn)。
此外，slice還可以克隆一個數(shù)組：

復(fù)制代碼代碼如下:

 var arr = [1, 2, 3];

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

2. Array.prototype.push 方法
使用 push方法可以合并數(shù)組：

復(fù)制代碼代碼如下:

 var arr1 = [1, 'str', {name: 'lang'}];

 var arr2 = [2, 'ing'];

 Array.prototype.push.apply(arr1, arr2);

 // 返回結(jié)果：[1, "str", {name: 'lang'}, 2, "ing"]

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

復(fù)制代碼代碼如下:

var arr = ['1', '2', '10', '12'];

arr.sort();

// 返回結(jié)果：["1", "10", "12", "2"]

上面的結(jié)果通常不是我們想要的，那么如何按數(shù)值大小排序：

復(fù)制代碼代碼如下:

arr.sort(function(a, b) {

  return a - b;

})

// 返回結(jié)果：["1", "2", "10", "12"]

有了排序比較器函數(shù)之后，就可以自定義很多比較器，從而實(shí)現(xiàn)個性化的排序。

4. length 屬性
數(shù)組的length屬性，不是只讀的，也就說還可寫哦，比如使用length屬性去截斷數(shù)組：

復(fù)制代碼代碼如下:

 var arr = [1, 2, 3, 4];

 arr.length = 2;

 // arr: [1, 2]

 arr.length = 0;

 // arr: []

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

復(fù)制代碼代碼如下:

 var arr = [];

 arr.length = 3;

 // arr: [undefined, undefined, undefined]

好了，今天就總結(jié)到這里了，已經(jīng)凌晨了，以后有什么新發(fā)現(xiàn)再append到這里。
之前，沒有寫博客的習(xí)慣，只習(xí)慣把平時的總結(jié)放到有道云筆記中，沒想到把觀點(diǎn)寫出來著實(shí)要花點(diǎn)心思的，因?yàn)橐紤]如何表達(dá)，才能讓別人更好地理解。

有什么表達(dá)不對或理解錯誤的地方，還望大家?guī)兔χ刚鰜怼?/p>

另附上一些常用的javascript數(shù)組方法

concat()連接兩個或更多的數(shù)組，并返回結(jié)果。
join()把數(shù)組的所有元素放入一個字符串。元素通過指定的分隔符進(jìn)行分隔。
pop()刪除并返回數(shù)組的最后一個元素
push()向數(shù)組的末尾添加一個或更多元素，并返回新的長度。
reverse()顛倒數(shù)組中元素的順序。
shift()刪除并返回數(shù)組的第一個元素
slice()從某個已有的數(shù)組返回選定的元素
sort()對數(shù)組的元素進(jìn)行排序
splice()刪除元素，并向數(shù)組添加新元素。
toSource()返回該對象的源代碼
toString()把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果。
toLocaleString()把數(shù)組轉(zhuǎn)換為本地數(shù)組，并返回結(jié)果。
unshift()向數(shù)組的開頭添加一個或更多元素，并返回新的長度。
valueOf()返回數(shù)組對象的原始值

您可能感興趣的文章: