将伪数组转化为真数组的几种方法

什么是伪数组?

1.具有length属性，可以获取长度。
2.具有索引，可以通过遍历获取所有元素。
3.不可以使用数组的内置方法和属性。

 

为什么伪数组不能使用数组的内置方法和属性呢？我们不妨打印看一下伪数组在控制台的输出：

 

 

 

 

 

我们可以看到伪数组的__proto__指向的是一个Object对象，当然不能使用数组的内置方法和属性了。

 

我们再来看看真数组在控制台的输出：

 

 

 

 

可以看到，真数组的__proto__指向的是一个Array数组。

常见的伪数组

1.函数的内置对象arguments，它是所有实参组成的伪数组。
2.DOM对象组成的伪数组，通过document.querySelectorAll等获得的dom对象列表。
3.jQuery对象组成的伪数组，通过$('选择器')获取到的包含dom对象列表和jQuery方法的jQuery对象。

将伪数组转化为真数组的几种方法

方法一：最简单的，先准备一个新的空数组，然后遍历伪数组，将伪数组中的值通过索引逐个添加到新数组当中。

let newArr = [];
for(let i = 0; i < arguments.length; i++){
  newArr[i] = arguments[i];
}

　　

方法二：利用扩展运算符(...)将伪数组转化为真数组 - ES6语法

let divs = document.querySelectorAll('div');
let arr = [...divs];

 

方法三：利用Array的原型对象的slice方法，配合call()方法修改slice中this指向

let arr = [].slice.call(divs);

 

方法四：利用Array.from方法 - ES6

let arr = Array.from(divs);

 

注意：Array.from方法是从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。(MDN)
这里简单的说一下浅拷贝和深拷贝：
浅拷贝只会复制对象的第一层数据，如果是其他层，复制的是地址。
深拷贝会将整个对象的数据复制给新对象。

也就是说，用Array.from方法返回的新数组是一个浅拷贝数组，如果改变了新数组当中深层次对象的数据，那么原来的对象当中的数据也会跟着被修改。
举个例子：

let arrayLike = {
  '0': '1',
  '1': '2',
  '2': {
    name: 'pink',
    sex: {
      nan: '男',
      nv: '女'
    }
  },
  'length': 3
}
let ary = Array.from(arrayLike);
console.log(ary);
//修改第一层的数据
ary[0] = '10';
//我们修改一下新数组深层的数据
ary[2].name = 'green';
ary[2].sex.nan = 'nan';
//再打印一下arrayLike，看里面深层数据是否发生了改变
console.log(arrayLike);

 

 

 

打印结果如图：

 

 

 

 

可见当我们修改了ary数组的第一层数据时，arrayLike没有改变，但是当我们修改ary数组深层数据的时候，arrayLike里深层的数据也相应的改变了，这是因为浅拷贝时深层数据是拷贝的地址，所以新数组和原来的伪数组深层的数据，在内存当中的地址是一样的，修改新数组的深层数据，当然也会修改原伪数组的深层数据。

作者：火星的天秤座
链接：https://www.jianshu.com/p/8e1660a2162c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。