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 相关文章推荐
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
javascript break指定标签打破多层循环示例
Jan 20 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 Javascript
javascript产生随机数方法汇总
Jan 25 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 Javascript
node.js中npm包管理工具用法分析
Feb 14 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获得url参数中具有&amp;的值的方法
2014/03/05 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
javascript操作css属性
2013/12/30 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
讲解python参数和作用域的使用
2013/11/01 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
基于Python List的赋值方法
2018/06/23 Python
python 把列表转化为字符串的方法
2018/10/23 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
Python学习之os模块及用法
2020/06/03 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
教师自荐书
2013/10/08 职场文书
协议书模板
2014/04/23 职场文书
先进单位申报材料
2014/12/25 职场文书
党员年终个人总结
2015/02/14 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书