JavaScript Conversione di oggetti tipo array in matrici


Esempio

Cosa sono gli oggetti tipo array?

JavaScript ha "Oggetti tipo array", che sono rappresentazioni oggetto di array con una proprietà length. Per esempio:

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

Esempi comuni di oggetti tipo array sono gli arguments oggetto in funzioni e oggetti HTMLCollection o NodeList restituiti da metodi come document.getElementsByTagName o document.querySelectorAll .

Tuttavia, una differenza chiave tra gli array e gli oggetti tipo array è che gli oggetti tipo array ereditano da Object.prototype anziché da Array.prototype . Ciò significa che gli oggetti tipo array non possono accedere ai comuni metodi di prototipo di array come forEach() , push() , map() , filter() e 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]

Converti oggetti tipo array in matrici in 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. Operatore di spread:
6
[...arrayLike]
  1. Object.values :
7
var realArray = Object.values(arrayLike);
  1. Object.keys :
6
var realArray = Object
   .keys(arrayLike)
   .map((key) => arrayLike[key]);

Converti oggetti tipo array in matrici in ≤ ES5

Usa Array.prototype.slice modo:

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

Puoi anche usare Function.prototype.call per chiamare Array.prototype metodi Array.prototype su oggetti tipo Array, senza convertirli:

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

Puoi anche usare [].method.bind( arrayLikeObject ) per prendere in prestito metodi di array e incollarli sul tuo oggetto:

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

Modifica degli articoli durante la conversione

In ES6, mentre si utilizza Array.from , è possibile specificare una funzione mappa che restituisce un valore mappato per la nuova matrice creata.

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

Vedi Array sono oggetti per un'analisi dettagliata.