譯文: JavaScript中類數組對象

它看起來像是一個數組,並且它有一個length屬性,然而它並非一個數組。JavaScript有時候是一門很怪異的語言,由於你很難定義一個數組的概念而沒有什麼例外的。
因此我說的這些類數組對象是什麼?它們有一些,其中包括arguments,arguments是一個很特殊的變量,你再全部函數體內均可以訪問到。javascript

1. arguments

假如你在一個工具(firebug)中檢查arguments這個變量,你會注意到它打印出來像是一個數組。它有按次序排列的元素,還有一個length屬性。java

var testFunction = function() {
  console.log(arguments);
  console.log(arguments.length);
};

因此我在抱怨什麼?嘗試arguments.shift(),報錯顯示arguments.shift() isn't a function,可是shift()是數組的一個函數。嘗試console.log(arguments.constructor),它會打印Object(),同時假如你輸入的是[].constructor,它會打印Array[]。這是否是很奇怪?
這固然不只侷限於arguments,看起來不少DOM集合都會返回這種對象,例如document.getElementsByTagName(), document.images, document.childNodes.在某些狀況下,這些相似數組的更適合轉變爲一個數組。數組

讓類數組對象成爲一個數組

固然這個標題是不太準確的,假如咱們須要將這些類數組對象變成數組同樣,咱們須要創建一個新的數組。框架

var testFunction = function() {
  // Create a new array from the contents of arguments
  var args = Array.prototype.slice.call(arguments);

  var a = args.shift();
  console.log("The first argument is: %s", a);

  // send the remaining arguments to some other function
  someOtherFunction(args);
};

顯然,關鍵的地方在Array.prototype.slice.call(arguments),拆開它仔細每一個部分。函數

  • Array 這是咱們想要的base object的名稱工具

  • prototype 這能夠被認爲是一個數組實例方法的命名空間prototype

  • slice 提取一個數組的一部分,並返回一個新的數組,沒有一個開始和結束索引,它只返回數組的副本.code

  • call 這是一個很是有用的函數,容許你在調用一個對象的函數,而後在另外一個函數的上下文中使用對象

另外一個方面,若是你曾經使用原型框架,你能夠經過$A()轉化這些類數組對象成爲數組。
談到$A,若是你不喜歡打上面那麼長的字符串代碼,而且你不使用Prototype。而後,你能夠建立一條捷徑,就像Prototype folks:索引

var $A = function(obj) {
  return Array.prototype.slice.call(obj);
};

// Example usage:
$A(document.getElementsByTagName("li"));

原文地址:Array-like Objects in JavaScript

相關文章
相關標籤/搜索