JS 類數組對象（ArrayLike Object）的判斷

NotFound 發布于2019-08-22 10:43 / 3280人閱讀

摘要：定義在權威指南中是這樣解釋類數組對象的一種常常完全合理的看法把擁有一個數值屬性和對應非整數屬性的對象看做一種類型的數組。常見的類數組對象有函數中的對象等。主要原因是因為類數組對象不是規范的，所以不同項目的定義會有所不同。

定義

在《JavaScript權威指南》中是這樣解釋類數組對象的：

一種常常完全合理的看法把擁有一個數值length屬性和對應非整數屬性的對象看做一種類型的數組。

常見的類數組對象有函數中的arguments對象、HTMLCollection、NodeList等。

判斷方法 《JavaScript權威指南》中給出的判斷方法

function isArrayLike(o) {
    if(o &&                                    // o不是null、undefined等
       typeof o === "object" &&                // o是對象
       isFinite(o.length) &&                   // o.length是有限數值
       o.length >= 0 &&                        // o.length為非負值
       o.length === Math.floor(o.length) &&    // o.length是整數
       o.length < 4294967296)                  // o.length < 2^32
       return true
    else
       return false
}

在這里我有一個疑問，根據定義，函數也有length數值屬性，應該也是類數組對象。但如果o是一個函數，那么typeof o返回的是"function"，并不是"object"，以致于調用isArrayLike函數會得到false。（感覺還是因為定義不嚴謹導致的）

underscore中的實現

var isArrayLike = function(collection) {
    // 返回參數 collection 的 length 屬性值
    var length = getLength(collection);
    
    // length是數值，非負，且小于等于MAX_ARRAY_INDEX
    // MAX_ARRAY_INDEX = Math.pow(2, 53) - 1
    return typeof length == "number" && length >= 0 && length <= MAX_ARRAY_INDEX;
  }

相對來說，underscore中的實現跟定義一樣寬松，函數也是類數組對象。甚至傳入數組，isArrayLike函數也會返回true。

jQuery中的實現

function isArrayLike(obj) {
    // 如果obj非null、undefined等，有length屬性，則length等于obj.length
    // 否則，length為false
    var length = !!obj && "length" in obj && obj.length,
        // 檢測obj的類型
        type = jQuery.type(obj)
        
        // 如果obj是function類型 或者是window對象 則返回false
        if (type === "function" || jQuery.isWindow(obj)) {
            return false
        }
        // obj本身是數組，則返回true
        // obj不是數組，但有length屬性且為0，例如{length : 0}，則返回true
        // obj不是數組,但有length屬性且為整數數值，obj[length - 1]存在，則返回true
        return type === "array" || length === 0 ||
            typeof length === "number" && length > 0 && (length - 1) in obj;
}

結語

類數組對象的判斷，不同版本的返回結果有細微的差別。主要原因是因為類數組對象不是規范的，所以不同項目的定義會有所不同。

GPU云服務器云服務器 java判斷對象類 js的一維對象數組 js數組的值是對象嗎判斷js對象不存在

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91127.html

js 面試官想了解你有多理解call,apply,bind?

摘要：返回值這段在下方應用中有詳細的示例解析。回調函數丟失的解決方案綁定回調函數的指向這是典型的應用場景綁定指向，用做回調函數。 showImg(https://segmentfault.com/img/remote/1460000019971331?w=1024&h=680); 函數原型鏈中的 apply，call 和 bind 方法是 JavaScript 中相當重要的概念，與 this...

wuaiqiu 2019-08-26 10:33 評論0 收藏0
深入理解JavaScript類數組

摘要：但是，我們可以借用類數組方法不難看出，此時的在調用數組原型方法時，返回值已經轉化成數組了。很多時候，深入看看源代碼也會讓你對這個理解的更透徹。的前端樂園原文鏈接深入理解類數組起因寫這篇博客的起因，是我在知乎上回答一個問題時，說自己在學前端時把《JavaScript高級程序設計》看了好幾遍。于是在評論區中，出現了如下的對話：showImg(https://segmentfault.c...

Towers 2019-08-19 18:16 評論0 收藏0
數組的使用總結— (js基礎復習第2期)

摘要：前一個值，當前值，索引，數組對象產生新數組的迭代器方法類似，對數組的每個元素使用某個函數，并返回新數組和相似，傳入一個返回值為布爾類型的函數。 1. 前言數組真的是每天用了，但是有很多方法都是記不住，總是要百度查，很煩，所以才寫了個數組使用總結，有什么不對的希望大家指出來。 2. 思路先看看這些問題都記得很清楚么？創建數組，怎么創建數組的數組的構造方法Array有哪些方法？E...

zhigoo 2019-08-23 13:10 評論0 收藏0
前端小知識10點（2019.6.25）

摘要：前言這里記錄我工作學習中值得注意的小知識點，希望對你有所幫助。循環的語法在單次循環開始前執行是單次循環的條件這里即存在是單次循環結束后執行說明在單次循環開始前執行是單次循環的條件這里即存在是單次循環結束后執行。 showImg(https://segmentfault.com/img/remote/1460000019583410); 前言：這里記錄我工作、學習中值得注意的小知識點，希...

wangzy2019 2019-08-23 18:18 評論0 收藏0