JavaScript类数组对象转换为数组对象的方法实例分析


Posted in Javascript onJuly 24, 2018

本文实例分析了JavaScript类数组对象转换为数组对象的方法。分享给大家供大家参考,具体如下:

1、类数组对象:

拥有length属性,可以通过下标访问;

不具有数组所具有的方法。

2、为什么要将类数组对象转换为数组对象?

数组对象Array有很多方法:shiftunshiftsplicesliceconcatreversesort,ES6又新增了一些方法:forEachisArrayindexOflastIndexOfeverysomemapfilterreduce等。由于类数组不具有数组所具有的操作数组的方法,将类数组转换为数组之后就能调用这些强大的方法,方便快捷。更多JavaScript数组的方法请见:https://3water.com/article/144359.htm

3、类数组对象转换为数组对象的方法:

1) Array.prototype.slice.call(arrayLike)Array.prototype.slice.call(arrayLike, 0)[].slice.call (arrayLike)[].slice.call (arrayLike, 0)

var div1 = Array.prototype.slice.call(document.querySelectorAll('div'), 0);
var div2 = Array.prototype.slice.call(document.querySelectorAll('div'));
var div3 = [].prototype.slice.call(document.querySelectorAll('div'), 0);
var div4 = [].prototype.slice.call(document.querySelectorAll('div'));

2) Array.from(arrayLike)

var divs = Array.from(document.querySelectorAll('div'));

3) 原生JavaScript转换

var length = arrayLike.length;
var arr = [];
for (var i = 0; i < length; i++) {
  arr.push(arrayLike[i]);
  return arr;
}

4、JavaScript如何判断一个对象是否为数组?

使用typeof运算符不能判断一个对象是否为数组,因为typeof arr返回的是object而不是array

1) arr instanceof Array返回true

2) arr.constructor == Array返回true

说明:使用instanceofconstructor判断数组类型的问题在于,它假定只有一个运行环境,如果网页中包含多个框架,那么实际上存在两个以上不同的全局执行环境,进而存在两个不同版本的Array构造函数,如果从一个框架向另一个框架传入一个数组,那么传入的数组与第二个框架中原生创建的数组分别具有各自不同的构造函数,也就是说,object.constructor == Array 会返回false。

原因:Array属于引用型数据,传递过程仅仅是引用地址的传递,每个页面的Array原生对象所引用的地址是不一样的,在子页面声明的Array所对应的构造函数,是子页面的Array对象,父页面进行判断时使用的Array并不等于子页面的Array。

3) Array.isArray(arr)方法返回true

ES5新增了Array.isArray()方法,这个方法的目的是:最终确定一个值是否是数组,不管它是在哪个全局环境创建的。

4) Object.prototype.toString.call(arr) === "[object Array]"返回true

这是最简单的判断一个对象是否为数组的方法。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JQuery优缺点分析说明
Jun 09 Javascript
JqGrid web打印实现代码
May 31 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
Vue 实现双向绑定的四种方法
Mar 16 Javascript
关于AngularJS中几种Providers的区别总结
May 17 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
微信小程序实现滴滴导航tab切换效果
Jul 24 #Javascript
JavaScript引用类型Array实例分析
Jul 24 #Javascript
详解微信小程序调起键盘性能优化
Jul 24 #Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 #Javascript
js+canvas实现验证码功能
Sep 21 #Javascript
微信小程序网络请求封装示例
Jul 24 #Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 #Javascript
You might like
一个php作的文本留言本的例子(五)
2006/10/09 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
Python实现密码薄文件读写操作
2019/12/16 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
儿子婚宴答谢词
2014/01/09 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
自我鉴定总结
2014/03/24 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
2014年护士长工作总结
2014/11/11 职场文书
个人先进材料范文
2014/12/30 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
Python 如何解决稀疏矩阵运算
2021/05/26 Python
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers