javascript 類數(shù)組

int64 發(fā)布于2019-08-19 14:34 / 2083人閱讀

摘要：中常見的類數(shù)組有對象和方法的返回結果。類數(shù)組判斷權威指南上給出了代碼用來判斷一個對象是否屬于類數(shù)組。此處應當為類數(shù)組表現(xiàn)之所以成為類數(shù)組，就是因為和數(shù)組類似。偽數(shù)組轉化成數(shù)組非偽類對象，直接返回最好針對以前的實現(xiàn)參考的怪癖類數(shù)組對象

在線的《javascript權威指南》有對該概念的解釋。

那么，什么是javascript 類數(shù)組呢？

定義：

擁有length屬性，length-0可隱式轉換為number類型，并且不大于Math.pow(2,32)（比如：22.33和"022"都滿足條件）

~~不具有數(shù)組所具有的方法~~

類數(shù)組示例：

var a = {"1":"gg","2":"love","4":"meimei",length:5};
Array.prototype.join.call(a,"+");//"+gg+love++meimei"

非類數(shù)組示例：

var c = {"1":2};

沒有length屬性，所以就不是類數(shù)組。

javascript中常見的類數(shù)組有arguments對象和DOM方法的返回結果。
比如 document.getElementsByTagName()。

類數(shù)組判斷

《javascript權威指南》上給出了代碼用來判斷一個對象是否屬于“類數(shù)組”。如下：

// 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
}

書上給的示例代碼判斷條件過于嚴苛，比如以下情形的類數(shù)組就無法通過這段代碼的校驗：

var arrLike1 = { length: 1.2 };
var arrLike2 = { length: -10 };
var arrLike3 = { length: "10" };

當然，除卻人為“造作”因素，正常的length應當是正整數(shù)。

我們可以對照一下：MDN Array.from 的polyfill , 這個方法中對length的判斷可以看一下。

var toInteger = function (value) {
  var number = Number(value);
  if (isNaN(number)) { return 0; }
  if (number === 0 || !isFinite(number)) { return number; }
  return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
};
var maxSafeInteger = Math.pow(2, 53) - 1; //此處length應當為Math.pow(2, 32) - 1
var toLength = function (value) {
  var len = toInteger(value);
  return Math.min(Math.max(len, 0), maxSafeInteger);
};

類數(shù)組表現(xiàn)

之所以成為“類數(shù)組”，就是因為和“數(shù)組”類似。不能直接使用數(shù)組方法，但你可以像使用數(shù)組那樣，使用類數(shù)組。

var a = {"0":"a", "1":"b", "2":"c", length:3};  // An array-like object
Array.prototype.join.call(a, "+");  // => "a+b+c"
Array.prototype.slice.call(a, 0);   // => ["a","b","c"]: true array copy
Array.prototype.map.call(a, function(x) { 
    return x.toUpperCase();
});                                 // => ["A","B","C"]:

類數(shù)組對象轉化為數(shù)組

有時候處理類數(shù)組對象的最好方法是將其轉化為數(shù)組。
有兩種實現(xiàn)方法：

1.數(shù)組slice方法借用

Array.prototype.slice.call(arrLike)

2.Array.from

Array.from(arrLike)

然后就可以直接使用數(shù)組方法啦。

var a = { "0": 1, "1": 2, "2": 3, length: 3 };
var arr = Array.prototype.slice.call(a); //arr = [ 1, 2, 3  ]

ps: 兩個處理方法存在細節(jié)差異，比如處理{length: 1}這個對象時，結果就不一樣，Array.from處理結果是長度為1并且填充值為undefined，而Array.prototype.slice處理結果則相同于new Array(1)。

~~對于IE9以前的版本(DOM實現(xiàn)基于COM)，我們可以使用makeArray來實現(xiàn)。~~

// 偽數(shù)組轉化成數(shù)組
var makeArray = function(obj) {
    if (!obj || obj.length === 0) {
        return [];
    }
    // 非偽類對象，直接返回最好
    if (!obj.length) {
        return obj;
    }
    // 針對IE8以前 DOM的COM實現(xiàn)
    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.https://www.inkling.com/read/...
2.JavaScript 的怪癖 8：“類數(shù)組對象”

云服務器 GPU云服務器數(shù)組排序類動態(tài)數(shù)組類 javascript類 java動態(tài)數(shù)組類

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

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

深入理解JavaScript類數(shù)組

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

Towers 2019-08-19 18:16 評論0 收藏0
理解javascript類數(shù)組

摘要：也就是說，為一些常規(guī)對象增加一些屬性可以使其變成類數(shù)組對象。實際上，類數(shù)組的定義只有一條，具有屬性。在中，所有的數(shù)組方法都是通用的。什么是類數(shù)組 javascript中一些看起來像卻不是數(shù)組的對象，叫做類數(shù)組。也就是說，為一些常規(guī)對象增加一些屬性可以使其變成類數(shù)組對象。類數(shù)組的特征：有索引（數(shù)字）屬性和length屬性的對象不具有數(shù)組的方法。間接調用數(shù)組的一些方法，比如pus...

yzzz 2019-08-22 15:01 評論0 收藏0
JavaScript深入之類數(shù)組對象與arguments

摘要：在客戶端中，一些方法等也返回類數(shù)組對象。對象接下來重點講講對象。在函數(shù)體中，指代該函數(shù)的對象。下一篇文章深入之創(chuàng)建對象的多種方式以及優(yōu)缺點深入系列深入系列目錄地址。 JavaScript深入系列第十三篇，講解類數(shù)組對象與對象的相似與差異以及arguments的注意要點類數(shù)組對象所謂的類數(shù)組對象: 擁有一個 length 屬性和若干索引屬性的對象舉個例子： var array = ...

AlienZHOU 2019-08-20 16:23 評論0 收藏0
JavaScript 類數(shù)組對象

摘要：定義類數(shù)組對象的定義可以通過索引訪問元素，并且擁有屬性沒有數(shù)組的其他方法，例如，，等。所以當后面的作用對象是一個類數(shù)組時，就會把這個類數(shù)組對象轉換為了一個新的數(shù)組。定義 JavaScript 類數(shù)組對象的定義：可以通過索引訪問元素，并且擁有 length 屬性；沒有數(shù)組的其他方法，例如 push ， forEach ， indexOf 等。舉例說明 var foo = {...

haobowd 2019-08-19 18:34 評論0 收藏0
譯文： JavaScript中類數(shù)組對象

摘要：所以我說的這些類數(shù)組對象是什么它們有一些，其中包括是一個很特殊的變量，你再所有函數(shù)體內都可以訪問到。讓類數(shù)組對象成為一個數(shù)組當然這個標題是不太準確的，假如我們需要將這些類數(shù)組對象變成數(shù)組一樣，我們需要建立一個新的數(shù)組。它看起來像是一個數(shù)組，而且它有一個length屬性，然而它并不是一個數(shù)組。JavaScript有時候是一門很怪異的語言，因為你很難定義一個數(shù)組的概念而沒有什么例外的。所...

lbool 2019-08-21 10:55 評論0 收藏0