类数组对象转换为数组对象的简单理解

wayneli 发布于2019-08-19 18:39 / 1630人阅读

摘要：将对象转换为数组对象的限制不知道现在还是否需要考虑这一点之前的版本将实现为对象而非对象，对象不能直接调用方法，因此需要采取其他方式转化。

关于类数组对象

JavaScript中有一些著名的类数组对象，它们看起来很像数组：

拥有length属性

元素按序保存在对象中，可以通过索引访问

但实际和数组又不是一回事：

没有数组的很多方法

也会有数组没有的方法
(e.g. NodeList的item()方法)

有些类数组对象是动态变化的
(e.g. NodeList的值是基于DOM结构动态执行查询的结果)

……

将类数组对象转换为数组对象

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

这是一个遍地开花的方法，这里主要是想简单理解一下实现原理。

Array的通用方法

Array对象的很多方法都是通用方法，意思是其它非数组对象也可以直接借来使用，因为它们在设计时没有要求使用方法的对象必须是数组。

Array.prototype.slice()就是这样一个方法，只要对象有length属性并可以通过索引访问，就可以使用该方法。

当仅传入一个参数，且传入参数为空或0时，从索引为0的元素开始复制，直到最后一个元素，结果被保存在一个数组中返回。

Function.call()方法

这个方法使得你可以在一个对象上借用另一个对象的方法。

第一个参数即为实际调用方法的对象，其后的参数为依次传入方法的参数。

将NodeList对象转换为数组对象的限制

不知道现在还是否需要考虑这一点？

IE8之前的版本将NodeList实现为COM对象而非DOM对象，COM对象不能直接调用js方法，因此需要采取其他方式转化。

/* JavaScript高级程序设计-第十章 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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79825.html

夯实基础-数据类型与继承

摘要：通过上面的图我想应该一目了然了，基本数据类型都是存在栈内存中的，复杂对象则是存在堆内存中，栈内存变量保存的是其内存地址。等同于如果使用则规则相对简单值为基本数据类型数值转为相应的字符串。数据类型是基础中的基础，大家天天遇到，我们这次来讨论深一点，将我们认为理所当然的事情背后的原理发掘；继承也是前端基础一个大考点，看看继承的原理与使用场景。本文讨论以下几个点： JavaScript...

codecraft 2019-08-22 16:46 评论0 收藏0
JavaScript 工作原理之十五－类和继承及 Babel 和 TypeScript 代码转换探秘

摘要：使用新的易用的类定义，归根结底也是要创建构造函数和修改原型。首先，它把构造函数当成单独的函数且包含类属性集。该节点还储存了指向父类的指针引用，该父类也并储存了构造函数，属性集和及父类引用，依次类推。原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。本系列持续更新中，Github 地址请查阅这里。这是 JavaScript 工作原理的第...

GeekGhc 2019-08-29 16:05 评论0 收藏0
JavaScript 工作原理之十五－类和继承及 Babel 和 TypeScript 代码转换探秘

摘要：使用新的易用的类定义，归根结底也是要创建构造函数和修改原型。首先，它把构造函数当成单独的函数且包含类属性集。该节点还储存了指向父类的指针引用，该父类也并储存了构造函数，属性集和及父类引用，依次类推。原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。本系列持续更新中，Github 地址请查阅这里。这是 JavaScript 工作原理的第...

BigNerdCoding 2019-08-02 11:00 评论0 收藏0
通俗的方式理解动态类型，静态类型；强类型，弱类型

摘要：不允许隐式转换的是强类型，允许隐式转换的是弱类型。拿一段代码举例在使用调用函数的时候会先生成一个类模板运行时生成，执行的时候会生成类模板，执行的时候会生成类模板。 0 x 01 引言今天和一个朋友讨论 C++ 是强类型还是弱类型的时候，他告诉我 C++ 是强类型的，他和我说因为 C++ 在写的时候需要 int，float 等等关键字去定义变量，因此 C++ 是强类型的，我告诉他 C+...

周国辉 2019-08-22 13:40 评论0 收藏0
《深入理解ES6》笔记—— 改进数组的功能（10）

摘要：创建数组中创建数组的方式数组字面量一个数组。传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它，并且终止搜索。用新元素替换掉数组内的元素，可以指定替换下标范围。 ES5提供的数组已经很强大，但是ES6中继续改进了一些，主要是增加了新的数组方法，所以这章的知识非常少。创建数组 ES5中创建数组的方式：数组字面量、new一个数组。 const arr1 = [] //数组字...

inapt 2019-08-20 18:25 评论0 收藏0