将类数组对象(array-like object)转化为数组对象(Array object)
用法：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)的更多相关文章
- PHP查询数据库，对象结果集转化为数组
$row = $this->db->get();//得出对象结果集 $result = array(); if($row) { //转化为数组 while($value = $row-&g ...
- Javascript中判断变量是 array还是object（是数组还是对象）
段文字是从github上截取由本人翻译过来的. 原文地址:https://github.com/nathansmith/javascript-quiz/blob/master/ANSWERS.md 怎 ...
- Array.from()类数组转化为数组的用法
类数组对象转化为数组 let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; let arr = Array.from(arrayLi ...
- Js将类数组转化为数组
说起伪数组,大家可能会想到arguments, 这个我们函数参数的一个类数组,是类数组的代表. 1.拥有length属性,可以使用下标来访问元素,这两点和数组相同. 2.不能使用数组的方法,他们不能使 ...
- js中怎么把类数组转化为数组
说起伪数组,首先想到arguments, 这个我们函数参数的一个类数组,是类数组的代表. 1.拥有length属性,可以使用下标来访问元素,这两点和数组相同. 2.不能使用数组的方法,他们不能使用Ar ...
- php如何遍历多维的stdClass Object 对象，php的转换成数组的函数只能转换外面一丛数组
php如何遍历多维的stdClass Object 对象,php的转换成数组的函数只能转换外面一丛数组 (2012-09-10 19:58:49) 标签: 杂谈 分类: 网页基础知识 php如何遍历多 ...
- 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 ...
- php---将数组转化为数组对象
例子:array(1){ [0]=>array( 'id'=>111, 'name'=>'aaaa' ) } 由上面的例子转化成下面对象,怎么转化?急急 急 谢谢array(1) { ...
- Yii框架AR对象数据转化为数组
demo函数作用:将AR对象数据转化为数组 局限:仅用于findAll的多维数组,find一维数组可以先转化为多维数组的一个元素在使用 function actionIndex() { $data = ...
随机推荐
- [Leetcode][Python]44：Wildcard Matching
# -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 44:Wildcard Matchinghttps://oj.leetcode ...
- javascript第十三课：Json
js中的json就是字典,Dictionary,就是字典的简化创建方式,json的遍历使用for in的方式,进行遍历 遍历复杂json格式 (如果数组里面存储的是键值对的话,字符串最好用双引号) v ...
- Python学习入门基础教程(learning Python)--8.1 字典数据添加与删除
1. 字典数据添加 这个很简单,像赋值那样一项项赋值即可.语法结构如下 dict_obj[key] = value 添加数据项示例如下 >>> d1 = {'cod ...
- Codeforces Round #312 (Div. 2) ABC题解
[比赛链接]click here~~ A. Lala Land and Apple Trees: [题意]: AMR住在拉拉土地. 拉拉土地是一个很漂亮的国家,位于坐标线.拉拉土地是与著名的苹果树越来 ...
- 【机房系统知识小结点系列】之遍历窗体中的控件，判断Text是否为空？
做机房系统时,几乎每个窗体中都会用到判断界面中的控件是否为空的情景.我们曾经是这样走来的: 第一版: 好处:对窗体界面中的Text等控件,逐一做判断,当用户输入某一项为空的时候,会议弹出框的形式,告诉 ...
- C# 整个网页保存成图片
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- 关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究
我是以chrome浏览器做的研究. 先看一段代码: <script> window.addEventListener('DOMContentLoaded',function(){ var ...
- C# DropDownList绑定添加新数据的几种方法
第一种:在前台手动绑定(适用于固定不变的数据项) <asp:DropDownList ID="DropDownList1" runat="server"& ...
- new关键字和newInstance()方法的区别
转载:http://blog.csdn.net/iloveyin/article/details/7965183 1.类的加载方式不同 在执行Class.forName("a.clas ...
- Linux下 静态链接库 和 动态链接库
先来说说C/C++编译过程 编译: 检查语句符号定义,将C/C++代码翻译生成中间语言. 链接: 将中间代码整合,生成可执行的二进制代码. 简单的说,库文件都是一种特殊的中间语言文件,静态库还是一种特 ...