26.类数组转换为数组

Posted 2020-11-01 Z-DL

类数组对象有三种：

　　1.arguments

　　2.元素集合

　　3.节点集合

var oLis = document.getElementByTagName("div");

console.dir(oLis); // ->htmlCollection元素集合类的一个实例 ->它也是一个类数组集合

var oLis = document.getElementByName("div");

console.dir(oLis); // ->NodeList 节点集合类的一个实例 ->它也是一个类数组集合

 

类数组转换成数组:

　　-》标准浏览器方法：

　　var ary = [].slice.call(oLis)

　　问题：在IE6-8浏览器中忙不支持借用数组的slice实现将元素集合的类数组转换为数组，报错（元素集合跟节点集合都不支持，但是arguments是支持的不存在任何兼容性问题）

　　-》非标准方法;IE6-8

　　for (var i = 0;i<oLis.length;i++) {

　　　　ary[ary.length] = oLis[i]

　　}

补充知识点：

1.浏览器的异常信息捕获：

　　我们在JS中使用try，catch进行浏览器的异常信息捕获

　　console.log(num) //  直接报错，在js中本行报错，下面的代码都不在执行了

　　console.log("ok")

　　1)如果用try，catch捕获了异常信息，不影响下面的代码继续执行。如果try里面的代码执行出错了，会默认的去执行catch中的代码

　try {

　　　　console.log(num)

　　} catch(e) {// 形参必须要写，一般起名为e

　　　　console.log("报错了")
　　　　console.log(e.message,111111) // 可以收集当前代码报错的原因
　　}　　

　　console.log("ok")

　　2）

　　　　需求：有时候既想捕获到错误信息，又不想让下面的代码继续执行

　　try {

　　　　// js代码
　　} catch (e) {

　　　　// 如果代码报错执行catch中的代码
　　　　// 手动抛出一条错误信息，终止代码执行
　　　　throw new Error("当前网络繁忙，请稍后再试")
　　　　new ReferenceError // ->引用错误信息
　　　　new TypeError // ->类型错误
　　　　new RangeError // ->范围错误

　　} finally {

　　　　// 一般不用：不管try中的代码是否报错，都要执行finally中的代码
　　}

 完整的类数组，转化为数组的方法

var utils = {
    // 实现将类数组转化为数组，利用try，catch检测兼容
    listToArray: function (likeAry) {
        var ary = [];
        try {
            ary = Array.prototype.slice.call(likeAry);
        } catch (e) {
            for (var i = 0;i<likeAry.length;i++) {
                ary[ary.length] = likeAry[i]
            }
        }
        return ary;
    }
}