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 相关文章推荐
Document对象内容集合(比较全)
Sep 06 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
jQuery命名空间与闭包用法示例
Jan 12 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 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 飞信好友免费短信API接口开源版
2010/07/22 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
php无限级分类实现方法分析
2016/10/19 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
Python求出0~100以内的所有素数
2018/01/23 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
python的常见矩阵运算(小结)
2019/08/07 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
药学专业大学生个人的自我评价
2013/11/04 职场文书
毕业生求职的求职信
2013/12/05 职场文书
军校本科大学生自我评价
2014/01/14 职场文书
试用期员工考核制度
2014/01/22 职场文书
追悼会主持词
2014/03/20 职场文书
60句有关成长的名言
2019/09/04 职场文书