類數(shù)組對象轉(zhuǎn)換為數(shù)組對象的簡單理解

wayneli 發(fā)布于2019-08-19 18:39 / 1635人閱讀

摘要：將對象轉(zhuǎn)換為數(shù)組對象的限制不知道現(xiàn)在還是否需要考慮這一點(diǎn)之前的版本將實(shí)現(xiàn)為對象而非對象，對象不能直接調(diào)用方法，因此需要采取其他方式轉(zhuǎn)化。

關(guān)于類數(shù)組對象

JavaScript中有一些著名的類數(shù)組對象，它們看起來很像數(shù)組：

擁有l(wèi)ength屬性

元素按序保存在對象中，可以通過索引訪問

但實(shí)際和數(shù)組又不是一回事：

沒有數(shù)組的很多方法

也會有數(shù)組沒有的方法
(e.g. NodeList的item()方法)

有些類數(shù)組對象是動(dòng)態(tài)變化的
(e.g. NodeList的值是基于DOM結(jié)構(gòu)動(dòng)態(tài)執(zhí)行查詢的結(jié)果)

……

將類數(shù)組對象轉(zhuǎn)換為數(shù)組對象

Array.prototype.slice.call(arraylike, 0);

這是一個(gè)遍地開花的方法，這里主要是想簡單理解一下實(shí)現(xiàn)原理。

Array的通用方法

Array對象的很多方法都是通用方法，意思是其它非數(shù)組對象也可以直接借來使用，因?yàn)樗鼈冊谠O(shè)計(jì)時(shí)沒有要求使用方法的對象必須是數(shù)組。

Array.prototype.slice()就是這樣一個(gè)方法，只要對象有l(wèi)ength屬性并可以通過索引訪問，就可以使用該方法。

當(dāng)僅傳入一個(gè)參數(shù)，且傳入?yún)?shù)為空或0時(shí)，從索引為0的元素開始復(fù)制，直到最后一個(gè)元素，結(jié)果被保存在一個(gè)數(shù)組中返回。

Function.call()方法

這個(gè)方法使得你可以在一個(gè)對象上借用另一個(gè)對象的方法。

第一個(gè)參數(shù)即為實(shí)際調(diào)用方法的對象，其后的參數(shù)為依次傳入方法的參數(shù)。

將NodeList對象轉(zhuǎn)換為數(shù)組對象的限制

不知道現(xiàn)在還是否需要考慮這一點(diǎn)？

IE8之前的版本將NodeList實(shí)現(xiàn)為COM對象而非DOM對象，COM對象不能直接調(diào)用js方法，因此需要采取其他方式轉(zhuǎn)化。

/* JavaScript高級程序設(shè)計(jì)-第十章 P250 */
function convertToArray(nodes) {
    var array = null;
    try {
        array = Array.prototype.slice.call(nodes, 0);
    } catch(ex) {
        array = new Array();
        for(var i=0; i

GPU云服務(wù)器云服務(wù)器 php的對象轉(zhuǎn)數(shù)組 js的一維對象數(shù)組 js數(shù)組的值是對象嗎數(shù)組對象

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

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

相關(guān)文章

夯實(shí)基礎(chǔ)-數(shù)據(jù)類型與繼承

摘要：通過上面的圖我想應(yīng)該一目了然了，基本數(shù)據(jù)類型都是存在棧內(nèi)存中的，復(fù)雜對象則是存在堆內(nèi)存中，棧內(nèi)存變量保存的是其內(nèi)存地址。等同于如果使用則規(guī)則相對簡單值為基本數(shù)據(jù)類型數(shù)值轉(zhuǎn)為相應(yīng)的字符串。數(shù)據(jù)類型是基礎(chǔ)中的基礎(chǔ)，大家天天遇到，我們這次來討論深一點(diǎn)，將我們認(rèn)為理所當(dāng)然的事情背后的原理發(fā)掘；繼承也是前端基礎(chǔ)一個(gè)大考點(diǎn)，看看繼承的原理與使用場景。本文討論以下幾個(gè)點(diǎn)： JavaScript...

codecraft 2019-08-22 16:46 評論0 收藏0
JavaScript 工作原理之十五－類和繼承及 Babel 和 TypeScript 代碼轉(zhuǎn)換探秘

摘要：使用新的易用的類定義，歸根結(jié)底也是要?jiǎng)?chuàng)建構(gòu)造函數(shù)和修改原型。首先，它把構(gòu)造函數(shù)當(dāng)成單獨(dú)的函數(shù)且包含類屬性集。該節(jié)點(diǎn)還儲存了指向父類的指針引用，該父類也并儲存了構(gòu)造函數(shù)，屬性集和及父類引用，依次類推。原文請查閱這里，略有刪減，本文采用知識共享署名 4.0 國際許可協(xié)議共享，BY Troland。本系列持續(xù)更新中，Github 地址請查閱這里。這是 JavaScript 工作原理的第...

GeekGhc 2019-08-29 16:05 評論0 收藏0
JavaScript 工作原理之十五－類和繼承及 Babel 和 TypeScript 代碼轉(zhuǎn)換探秘

摘要：使用新的易用的類定義，歸根結(jié)底也是要?jiǎng)?chuàng)建構(gòu)造函數(shù)和修改原型。首先，它把構(gòu)造函數(shù)當(dāng)成單獨(dú)的函數(shù)且包含類屬性集。該節(jié)點(diǎn)還儲存了指向父類的指針引用，該父類也并儲存了構(gòu)造函數(shù)，屬性集和及父類引用，依次類推。原文請查閱這里，略有刪減，本文采用知識共享署名 4.0 國際許可協(xié)議共享，BY Troland。本系列持續(xù)更新中，Github 地址請查閱這里。這是 JavaScript 工作原理的第...

BigNerdCoding 2019-08-02 11:00 評論0 收藏0
通俗的方式理解動(dòng)態(tài)類型，靜態(tài)類型；強(qiáng)類型，弱類型

摘要：不允許隱式轉(zhuǎn)換的是強(qiáng)類型，允許隱式轉(zhuǎn)換的是弱類型。拿一段代碼舉例在使用調(diào)用函數(shù)的時(shí)候會先生成一個(gè)類模板運(yùn)行時(shí)生成，執(zhí)行的時(shí)候會生成類模板，執(zhí)行的時(shí)候會生成類模板。 0 x 01 引言今天和一個(gè)朋友討論 C++ 是強(qiáng)類型還是弱類型的時(shí)候，他告訴我 C++ 是強(qiáng)類型的，他和我說因?yàn)?C++ 在寫的時(shí)候需要 int，float 等等關(guān)鍵字去定義變量，因此 C++ 是強(qiáng)類型的，我告訴他 C+...

周國輝 2019-08-22 13:40 評論0 收藏0
《深入理解ES6》筆記—— 改進(jìn)數(shù)組的功能（10）

摘要：創(chuàng)建數(shù)組中創(chuàng)建數(shù)組的方式數(shù)組字面量一個(gè)數(shù)組。傳入一個(gè)回調(diào)函數(shù)，找到數(shù)組中符合當(dāng)前搜索規(guī)則的第一個(gè)元素，返回它，并且終止搜索。用新元素替換掉數(shù)組內(nèi)的元素，可以指定替換下標(biāo)范圍。 ES5提供的數(shù)組已經(jīng)很強(qiáng)大，但是ES6中繼續(xù)改進(jìn)了一些，主要是增加了新的數(shù)組方法，所以這章的知識非常少。創(chuàng)建數(shù)組 ES5中創(chuàng)建數(shù)組的方式：數(shù)組字面量、new一個(gè)數(shù)組。 const arr1 = [] //數(shù)組字...

inapt 2019-08-20 18:25 評論0 收藏0