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

站长资源 2024/11/26 佚名

7 1538 7

DDR爱好者之家 Design By 杰米

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

1、类数组对象：

拥有length属性，可以通过下标访问；

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

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

数组对象Array有很多方法：shift、unshift、splice、slice、concat、reverse、sort，ES6又新增了一些方法：forEach、isArray、indexOf、lastIndexOf、every、some、map、filter、reduce等。由于类数组不具有数组所具有的操作数组的方法，将类数组转换为数组之后就能调用这些强大的方法，方便快捷。更多JavaScript数组的方法请见：https://www.jb51.net/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

说明：使用instanceof和constructor判断数组类型的问题在于，它假定只有一个运行环境，如果网页中包含多个框架，那么实际上存在两个以上不同的全局执行环境，进而存在两个不同版本的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数组操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript数据结构与算法技巧总结》、《JavaScript操作DOM技巧总结》及《JavaScript字符与字符串操作技巧总结》

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

JavaScript,类,数组对象,转换

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

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

暂无评论...

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

vue 下列表侧滑操作实例代码详解

微信小程序实现滴滴导航tab切换效果

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

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接