JavaScript Convertir objetos de tipo matriz a matrices


Ejemplo

¿Qué son los objetos similares a matrices?

JavaScript tiene "Objetos similares a matrices", que son representaciones de Objetos de Arrays con una propiedad de longitud. Por ejemplo:

var realArray = ['a', 'b', 'c'];
var arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

Los ejemplos comunes de objetos similares a una matriz son los objetos de arguments en funciones y los objetos HTMLCollection o NodeList que se devuelven desde métodos como document.getElementsByTagName o document.querySelectorAll .

Sin embargo, una diferencia clave entre Arrays y Objetos similares a Array es que los objetos similares a Array heredan de Object.prototype lugar de Array.prototype . Esto significa que los Objetos de tipo Array no pueden acceder a los métodos comunes de prototipos de Array como forEach() , push() , map() , filter() y slice() :

var parent = document.getElementById('myDropdown');
var desiredOption = parent.querySelector('option[value="desired"]');
var domList = parent.children;

domList.indexOf(desiredOption); // Error! indexOf is not defined.
domList.forEach(function() { 
  arguments.map(/* Stuff here */) // Error! map is not defined.
}); // Error! forEach is not defined.

function func() {
  console.log(arguments);
}
func(1, 2, 3);   // → [1, 2, 3]

Convertir objetos similares a matrices en matrices en ES6

  1. Array.from :
6
const arrayLike = {
  0: 'Value 0',
  1: 'Value 1',
  length: 2
};
arrayLike.forEach(value => {/* Do something */}); // Errors
const realArray = Array.from(arrayLike);
realArray.forEach(value => {/* Do something */}); // Works
  1. for...of :
6
var realArray = [];
for(const element of arrayLike) {
  realArray.append(element);
}
  1. Operador de propagación:
6
[...arrayLike]
  1. Object.values :
7
var realArray = Object.values(arrayLike);
  1. Object.keys :
6
var realArray = Object
   .keys(arrayLike)
   .map((key) => arrayLike[key]);

Convertir objetos similares a matrices en matrices en ≤ ES5

Utilice Array.prototype.slice manera:

var arrayLike = {
  0: 'Value 0',
  1: 'Value 1',
  length: 2
};
var realArray = Array.prototype.slice.call(arrayLike);
realArray = [].slice.call(arrayLike); // Shorter version

realArray.indexOf('Value 1'); // Wow! this works

También puede usar Function.prototype.call para llamar a los métodos Array.prototype en objetos similares a Array directamente, sin convertirlos:

5.1
var domList = document.querySelectorAll('#myDropdown option');

domList.forEach(function() { 
  // Do stuff
}); // Error! forEach is not defined.

Array.prototype.forEach.call(domList, function() { 
  // Do stuff
}); // Wow! this works

También puede usar [].method.bind( arrayLikeObject ) para tomar prestados métodos de matriz y hacerlos aparecer en su objeto:

5.1
var arrayLike = {
  0: 'Value 0',
  1: 'Value 1',
  length: 2
};

arrayLike.forEach(function() {
  // Do stuff
}); // Error! forEach is not defined.

[].forEach.bind(arrayLike)(function(val){
  // Do stuff with val
}); // Wow! this works

Modificar artículos durante la conversión

En ES6, mientras usamos Array.from , podemos especificar una función de mapa que devuelve un valor mapeado para la nueva matriz que se está creando.

6
Array.from(domList, element => element.tagName); // Creates an array of tagName's

Ver Arrays son objetos para un análisis detallado.