成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

javascript 類數(shù)組

int64 / 2093人閱讀

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

在線的《javascript權(quán)威指南》有對該概念的解釋。

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

定義：

擁有length屬性，length-0可隱式轉(zhuǎn)換為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方法的返回結(jié)果。
比如 document.getElementsByTagName()。

類數(shù)組判斷

《javascript權(quán)威指南》上給出了代碼用來判斷一個(gè)對象是否屬于“類數(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
}

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

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

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

我們可以對照一下：MDN Array.from 的polyfill , 這個(gè)方法中對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應(yīng)當(dāng)為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ù)組”，就是因?yàn)楹汀皵?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ù)組對象轉(zhuǎn)化為數(shù)組

有時(shí)候處理類數(shù)組對象的最好方法是將其轉(zhuǎn)化為數(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: 兩個(gè)處理方法存在細(xì)節(jié)差異，比如處理{length: 1}這個(gè)對象時(shí)，結(jié)果就不一樣，Array.from處理結(jié)果是長度為1并且填充值為undefined，而Array.prototype.slice處理結(jié)果則相同于new Array(1)。

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

// 偽數(shù)組轉(zhuǎn)化成數(shù)組
var makeArray = function(obj) {
    if (!obj || obj.length === 0) {
        return [];
    }
    // 非偽類對象，直接返回最好
    if (!obj.length) {
        return obj;
    }
    // 針對IE8以前 DOM的COM實(shí)現(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ù)組對象”

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78017.html

相關(guān)文章

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

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

    Towers 評(píng)論0 收藏0

  • 理解javascript類數(shù)組

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

    yzzz 評(píng)論0 收藏0

  • JavaScript深入之類數(shù)組對象與arguments

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

    AlienZHOU 評(píng)論0 收藏0

  • JavaScript 類數(shù)組對象

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

    haobowd 評(píng)論0 收藏0

  • 譯文： JavaScript中類數(shù)組對象

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

    lbool 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<