Como converter um pseudo array em um array real?

Esta é uma pergunta de uma entrevista recente. Quando o vi pela primeira vez, fiquei muito envergonhado, porque não vi seu conceito, muito menos o usei. Voltei ao Baidu imediatamente e fiz um resumo aqui. Por favor, corrija-me se houver algo errado e aprenda um com o outro

1. O que é um verdadeiro array (array)

A assim chamada matriz verdadeira pode, na verdade, ser chamada diretamente de matriz.
Quando um objeto tem as seguintes características, ele pode ser chamado de array:

1. Você pode armazenar vários arrays de acordo com o índice ;
2. Possui o atributo length , que indica o comprimento (número) dos dados na matriz;
3. A propriedade de protótipo do objeto __proto__ aponta para a classe Array , e você pode usar as propriedades e métodos do protótipo do objeto de protótipo do Array , como push, pop, etc. Tentei escrever em f12 conforme mostrado na figura:
   

2. O que é um pseudo-array?

O chamado pseudo-array, quando um objeto possui as seguintes características:

1. Você pode usar índices para manipular dados;
2. Possui atributo de comprimento (comprimento);
3. Mas você não pode usar métodos de array , como push, pop, etc. Em f12, tentei escrevê-lo conforme mostrado na figura:
   
   Nota:
   1. O pseudo-array geralmente não é criado diretamente, mas é obtido por meio de algumas operações js, como: document.getElementsByName (), etc .;
   2. Como o pseudo-array tem comprimento e índice, você pode usar instruções de loop para percorrer ;

Diferenças entre arrays verdadeiros e falsos:
4. Os objetos não têm valores de atributo de Array.prototype de arrays, o tipo é Object e o tipo de array é Array
5. Arrays são índices e objetos são pares de valores-chave
6. Uso objetos para criar pseudo-arrays, pseudo-arrays podem ser usados ​​Método parcial

Terceiro, como converter um pseudo array em um array verdadeiro

Método 1: Traverse: crie uma matriz vazia, faça um loop na pseudo-matriz e coloque os dados percorridos na matriz vazia, um por um

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"]

Método 2 (comumente usado): arr.push.apply (arr, pseudo array)

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);

Método 3: use o método de fatia: use o método de fatia do objeto de protótipo Array, com aplicar, para apontar isso na fatia para a pseudomatriz

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"]

Método 4: Use o método from de Array fornecido por ES6

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"]

Link de referência:
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

Uso de call (), apply (), bind () em JavaScript