将伪数组转成真实数组的方法（四种）

伪数组转成真实数组的方法（四种）

---

路过的朋友，可以点个赞，关注一下~~~

伪数组也叫类数组，常见的伪数组有arguments、通过document.getElements..获取到的内容等，这些伪数组具有length属性，也是一个一个的元素组成的，但是构造器不是Array，不能使用数组的方法

伪数组如何转换成真正数组，其实我们很少去这么做，但是那帮面试官可能会问，并且不止一种方法让你去实现

方式一

创建一个新数组，遍历这个伪数组，并将其每一项添加到新数组中。（比较low,面试只回答这个，等着被毙吧）

 var ul=document.getElementsByTagName("li");
 var newArr=[];

 for(var i=0;i<ul.length;i++){
     newArr.push(ul[i]);
 }
 console.log(newArr)

方式二

使用[].slice.call(obj)， 数组的slice()方法,它返回的是数组，使用call或者apply指向伪数组

let obj = {
    0: "a",
    1: "b",
    length: 2
}

let arr = [].slice.call(obj);
console.log(arr);  // ['a','b']

注意

Array.prototype.slice.call(obj)与[].slice.call(obj)是一样的，但是Array.prototype.slice.call()的效率相对比较高一点

模拟slice的实现

方式三

使用扩展运算符...，比如使用[...obj]，需要保证obj是可迭代

let obj = {
    0: "a",
    1: "b",
    [Symbol.iterator]() {  // 让Obj是可迭代的
        let index = 0;
        return {
            next: () => {
                return {
                    value: this[index],
                    done: this.length === index++
                }
            }
        }
    },
    length: 2
}


let realArray = [...obj]
console.log(realArray)      //[ 'a', 'b' ]

注意

使用该种方式，必须保证数据源是可迭代的，否则报错

方式四

使用ES6中数组的新方法 Array.from，此种方法，对数据源没有特殊的要求，数据源可以不能迭代

let obj = {
    0: "a",
    1: "b",
    length: 2
}

let arr = Array.from(obj);
console.log(arr);  // ['a','b']