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 相关文章推荐
杨氏矩阵查找的JS代码
Mar 21 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 Javascript
微信小程序实现滴滴导航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 mysql数据库操作分页类
2008/06/04 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
2019/04/20 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
Django分组聚合查询实例分享
2020/04/29 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
eBay德国站:eBay.de
2017/09/14 全球购物
文明宿舍获奖感言
2014/02/07 职场文书
法人代表授权委托书
2014/04/08 职场文书
升职演讲稿范文
2014/05/23 职场文书
嘉宾邀请函
2015/01/31 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
MySQL插入数据与查询数据
2022/03/25 MySQL