用法：Array.prototype.slice.call(array-like object)

// 创建一个类数组对象

var alo = {0:"a", 1:"b",2:"c", length:3};

// 转化

var arr = Array.prototype.slice.call(alo);

console.log(

    Array.isArray(alo) // false

)

console.log(

    Array.isArray(arr) // true

)

console.log(alo); // { '0': 'a', '1': 'b', '2': 'c', length: 3 }

console.log(arr); // [ 'a', 'b', 'c' ]

下面分析它是如何工作的.

类数组对象拥有类似数组的结构，所以它可以使用大多数数组的方法。

数组里有一个方法slice()，遍历调用对象，然后返回一个数组。

这里有一个问题，slice()是数组对象的方法，那该如何使用？

数组方法是数组对象的属性，所以可以通过Array.prototype.slice获取它。

然而在一个对象里调用其它对象的方法，我们需要用到"Function.prototype"里的方法call()，像这样function name.call(obj,args)。

所以有，Array.prototype.slice.call(alo)

slice()是一个函数(function),所以从Function.prototype继承了方法call,这也就是为什么我们可以这样用Array.prototype.slice.call(...)

Function.prototype.call(obj)的第一个参数是一个对象，即将传给f.call(obj)函数里的f，这一步，f的上下文(关键词this)的值会是obj.

一般情况下Array.slice()，方法slice将Array作为this的值，使用索引遍历所有的数组元素。在我们的例子中，我们将alo设置为this的值，alo是类数组，本身又具有索引，因此而工作。

NodeList，HTMLCollection都是类数组对象

<body>

<ul id="ho" class="ho">

  <li></li>

</ul>

<script>

// 创建一个htmlCollection对象

var htmlCollection = document.getElementsByTagName("li");

// 创建一个NodeList对象

var nodeList = document.getElementById("ho").childNodes;

// 转化

var h2arr = Array.prototype.slice.call(htmlCollection);

var n2arr = Array.prototype.slice.call(nodeList);

console.log(htmlCollection); // HTMLCollection [ <li> ]

console.log(nodeList); // NodeList [ #text "", <li>, #text "" ]

console.log(h2arr); // Array [ <li> ]

console.log(n2arr); // Array[ #text "", <li>, #text "" ]

</script>

</body>

将类数组对象(array-like object)转化为数组对象(Array object)的更多相关文章

  1. PHP查询数据库，对象结果集转化为数组

    $row = $this->db->get();//得出对象结果集 $result = array(); if($row) { //转化为数组 while($value = $row-&g ...

  2. Javascript中判断变量是 array还是object（是数组还是对象）

    段文字是从github上截取由本人翻译过来的. 原文地址:https://github.com/nathansmith/javascript-quiz/blob/master/ANSWERS.md 怎 ...

  3. Array.from()类数组转化为数组的用法

    类数组对象转化为数组 let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; let arr = Array.from(arrayLi ...

  4. Js将类数组转化为数组

    说起伪数组,大家可能会想到arguments, 这个我们函数参数的一个类数组,是类数组的代表. 1.拥有length属性,可以使用下标来访问元素,这两点和数组相同. 2.不能使用数组的方法,他们不能使 ...

  5. js中怎么把类数组转化为数组

    说起伪数组,首先想到arguments, 这个我们函数参数的一个类数组,是类数组的代表. 1.拥有length属性,可以使用下标来访问元素,这两点和数组相同. 2.不能使用数组的方法,他们不能使用Ar ...

  6. php如何遍历多维的stdClass Object 对象，php的转换成数组的函数只能转换外面一丛数组

    php如何遍历多维的stdClass Object 对象,php的转换成数组的函数只能转换外面一丛数组 (2012-09-10 19:58:49) 标签: 杂谈 分类: 网页基础知识 php如何遍历多 ...

  7. PHP“Cannot use object of type stdClass as array” (php在调用json_decode从字符串对象生成json对象时的报错)

    php再调用json_decode从字符串对象生成json对象时,如果使用[]操作符取数据,会得到下面的错误 错误:Cannot use object of type stdClass as arra ...

  8. php---将数组转化为数组对象

    例子:array(1){ [0]=>array( 'id'=>111, 'name'=>'aaaa' ) } 由上面的例子转化成下面对象,怎么转化?急急 急 谢谢array(1) { ...

  9. Yii框架AR对象数据转化为数组

    demo函数作用:将AR对象数据转化为数组 局限:仅用于findAll的多维数组,find一维数组可以先转化为多维数组的一个元素在使用 function actionIndex() { $data = ...

随机推荐

  1. MarkDown基础使用教程-by sixleaves

    以下是个人浏览文档,结合自己平时使用所总结, 和引用国外关于如何使用markdown的教程.如有不足,还请海涵,期待于您的交流.我觉得使用markdown书写挺好的! 工具下载,可以去下载gitboo ...

  2. 关于VMware导入Linux VM找不到网卡的问题

    今天遇到一个问题:由于虚拟机升级,导致以前的Linux VM(CentoS 6.7)在新的VMware里面打开,系统提示找不到网卡的问题,在网上找了好多解决办法,基本上都是一样的答案. 与网卡有关的几 ...

  3. 使用ashx一般处理程序，读取不到Session的问题

    一般的处理程序文件里面是用不了Session的,必须得实现Session接口才可以用. public class RandomCode : IHttpHandler, System.Web.Sessi ...

  4. Dima and Salad(完全背包)

    Dima and Salad time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  5. MS SQL 当记录不存在时插入insert INTO not exists

    INSERT INTO dbo.[T_DabaoTemp]  ([PType]           ,[pID]           ,[NewVersion]           ,[ParentC ...

  6. 关于constructor与 Prototype的理解

    constructor:每一个函数的Prototype属性指向的对象都包含唯一一个不可枚举属性constructor,该属性的值是这么一个对象:constructor指向了它所在的构造函数Protot ...

  7. iOS开发之性能优化

    1.避免过于庞大的XIB 当加载XIB的时候把所有的东西都放在了内存里,包括任何的图片:如果有一个不会即刻用到的view,就会浪费宝贵的内存资源了. 当加载一个引用了图片或者声音资源的nib时,nib ...

  8. VB.NET 初涉线程的定义和调用

    什么是线程 说话一:进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动,进程是系统进行资源分配和调度的一个独立单位. 线程是进程的一个实体,是CPU调度和分派的基本单位,它是比进程更小的能独 ...

  9. codeforces 几道题目

    BZOJ挂了....明天就要出发去GDKOI了....不能弃疗. 于是在cf水了几道题, 写写详(jian)细(dan)题解, 攒攒RP, 希望GDKOI能好好发挥.......  620E. New ...

  10. codevs 1913 数字梯形问题 费用流

    题目链接 给你一个数字梯形, 最上面一层m个数字, 然后m+1,......m+n-1个. n是层数. 在每个位置, 可以向左下或右下走.然后让你从最顶端的m个数字开始, 走出m条路径, 使得路过的数 ...