讀書筆記（一）——淺談JavaScript和DOM中的類數組對象

JavaScript是一門弱類型語言，它的數據類型分為兩大類：簡單數據類型（5種：Undefined、Null、Boolean、Number、String）和復雜數據類型（1種：Object）。Object是ECMAScript中使用最多的一個類型，所有的引用類型的值都是Object類型的實例。引用類型，本質上是一種數據結構，用於將數據和功能組織在一起。對象是某個特定引用類型的實例。

 

在JavaScript中，有一種特殊的對象，被稱為類數組（array-like）對象，其在書中的定義為：

• 擁有length屬性，其它屬性（索引）為非負整數
• 不具有數組所具有的方法

 

類數組示例：

1:

var a = {'1':'gg','2':'love','4':'meimei',length:5};

 

2:

var a= {};

for(var i=0; i<10 ; i++){
　　a[i] = i*i;
}

a.length = i;

可以看出，通過將對象的每個屬性名設為遞增的非負整數，且動態定義一個length屬性來表示元素個數，就可以使用對象來模擬數組。類數組對象可以像數組一樣，使用[]通過下標訪問。但它們終究只是類似數組，而不是數組，所以並不能使用數組的特有方法，如splice、indexOf、pop等。

 

類數組對象和數組的區別：

1. 一個是對象，一個是數組
2. 當新元素被添加時，數組的length屬性的值會自動更新，類數組對象則不會
3. 設置數組的length屬性可擴展或截斷數組，而對於類數組對象來說僅僅是改變了一個屬性的值而已
4. 類數組不能調用數組方法

 

類數組判斷：

《javascript權威指南》上給出了代碼用來判斷一個對象是否屬於“類數組”：

// Determine if o is an array-like object.
// Strings and functions have numeric length properties, but are 
// excluded by the typeof test. In client-side JavaScript, DOM text
// nodes have a numeric length property, and may need to be excluded 
// with an additional o.nodeType != 3 test.
function isArrayLike(o) {
    if (o &&                                // o is not null, undefined, etc.
        typeof o === 'object' &&            // o is an object
        isFinite(o.length) &&               // o.length is a finite number
        o.length >= 0 &&                    // o.length is non-negative
        o.length===Math.floor(o.length) &&  // o.length is an integer
        o.length < 4294967296)              // o.length < 2^32
        return true;                        // Then o is array-like
    else
        return false;                       // Otherwise it is not
}

 

類數組轉換：

有些時候，我們需要將一個類數組對象轉換為一個真正的數組，轉換之后可使用數組方法

Array.prototype.slice.call(Object)

對於IE9以前的版本(DOM實現基於COM)，可以使用makeArray來實現:

// 偽數組轉化成數組
var makeArray = function(obj) {
    if (!obj || obj.length === 0) {
        return [];
    }
    // 非偽類對象，直接返回最好
    if (!obj.length) {
        return obj;
    }
    // 針對IE8以前 DOM的COM實現
    try {
        return [].slice.call(obj);
    } catch (e) {
        var i = 0,
            j = obj.length,
            res = [];
        for (; i < j; i++) {
            res.push(obj[i]);
        }
        return res;
    }
};

 

常見類數組對象：

1.arguments

//屬性: 
length //長度  
callee //正在執行的函數

arguments是最常見的類數組對象，在函數內部使用，示例：arguments[0] 或 functionName.arguments[0]

 

在JS的DOM中，有三個常用到的類數組對象：NodeList  NamedNodeMap 和 HTMLCollection

 

2.NodeList

//屬性:  
length //長度
  
//方法:  
item(idx) //通過索引訪問節點

以下代碼形式返回類型為NodeList：

childNodes 
getElementsByClassName(className)  
getElementsByTagName(tagName)

 

3.NamedNodeMap

//屬性：
length //長度

//方法：
item(idx) //通過索引訪問節點
getNamedItem(NS) //通過名稱（和命名空間）訪問節點 
setNamedItem(NS) //通過名稱（和命名空間）設置節點 
removeNamedItem(NS) //根據名稱（和命名空間）刪除節點

以下代碼形式返回類型為NamedNodeMap：

element.attributes

 

4.HTMLCollection

//屬性:  
length //長度  

//方法:  
item(idx) //通過索引訪問節點
namedItem(name) //通過name 屬性或 id 屬性訪問節點

以下代碼形式返回類型為HTMLCollection：

document.images //所有img元素  
document.links //所有帶href屬性的a元素和area元素  
document.anchors //所有帶name屬性的a元素  
document.forms //所有form元素  
document.scripts //所有script元素  
tBodies(table元素)
rows(table、tbody、thead、tfoot元素)
cells(tr元素)

 

HTMLCollection  NodeList以及NamedNodeMap都是“動態的”，每當文檔結構發生變化時，他們都會得到更新，始終會保存着最新，最准確的信息