如何把一个伪数组转化成真正的数组?

这是最近的一个面试题,一开始看到他的时候觉得很懵,因为我还没见过他的概念,更谈不上用过了,回来立马百度了下,在这做一个总结。有不对的地方欢迎大家指正,互相学习

一. 什么是真数组(数组)

所谓真数组,其实可以直接称为:数组。
当一个对象具有以下特点时,可以称为数组:

  1. 可以按照索引的方式,存储多个数组;
  2. 具有length属性,表示数组内数据的长度(个数);
  3. 对象的原型属性__proto__,指向Array类,且可以使用Array的原型对象prototype身上的属性和方法,如:push,pop等。自己在f12里试着写了一下如图:
    真数组

二、什么是伪数组?

所谓伪数组,当一个对象具有以下特点:

  1. 可以使用索引对数据进行操作;
  2. 具有length(长度)属性;
  3. 但是不能使用数组的方法,如push,pop等。在f12里试着写了一下如图:
    伪数组
    注意:
    1.伪数组一般不会直接创建,而是通过一些js操作得到,如:document.getElementsByName()等;
    2.因为伪数组具有长度和索引,所以可以使用循环语句遍历

真伪数组差别:
4. 对象没有数组的Array.prototype 的属性值,类型是 Object ,而数组类型是 Array
5. 数组是索引,对象是键值对
6. 使用对象创建伪数组,伪数组可以使用部分方法

三、如何将伪数组转成真数组

方法1:遍历:创建一个空数组,循环遍历伪数组,将遍历出的数据逐一放在空数组中

var ali = document.getElementsByTagName('li');
console.log(ali);       // [li, li, li, li]
ali.push("hello");      // TypeError: ali.push is not a function

var arr = [];           // 先创建空数组
for(var i=0;i<ali.length;i++){
    
      // 循环遍历伪数组
    arr.push(ali[i]);;    // 取出伪数组的数据,逐个放在真数组中
}

arr.push("hello");
console.log(arr);       // [li, li, li, li, "hello"]

方法2(常用):arr.push.apply(arr,伪数组)

var ali = document.getElementsByTagName('li');
console.log(ali);       // [li, li, li, li]
ali.push("hello");      // TypeError: ali.push is not a function

var arr=[];
arr.push.apply(arr,ali);
//不需要修改push的this,只是利用apply的传参特点
console.log(arr);

方法3:使用slice方法:利用Array原型对象的slice方法,配合apply,将slice中的this指向伪数组

var ali = document.getElementsByTagName('li');
console.log(ali);       // [li, li, li, li]
ali.push("hello");      // TypeError: ali.push is not a function

var arr = Array.prototype.slice.apply(ali);

arr.push("hello");
console.log(arr);       // [li, li, li, li, "hello"]

方法4:利用ES6提供的Array的from方法

var ali = document.getElementsByTagName('li');
console.log(ali);       // [li, li, li, li]
ali.push("hello");      // TypeError: ali.push is not a function

var arr = Array.from(ali);

arr.push("hello");
console.log(arr);       // [li, li, li, li, "hello"]

参考链接:
https://www.jianshu.com/p/82b293043b2a?utm_campaign=maleskine&utm_content=note&utm_medium=writer_share&utm_source=weibo

https://blog.csdn.net/weixin_49207759/article/details/107393699

JavaScript 中 call()、apply()、bind() 的用法

猜你喜欢

转载自blog.csdn.net/weixin_45811256/article/details/110856303