javascript - operator - Array.from() vs sintaxis de propagación

spread operator javascript

Question

¿Hay alguna diferencia entre usar Array.from(document.querySelectorAll(''div'')) o [...document.querySelectorAll(''div'')] ?

Aquí hay un ejemplo:

let spreadDivArray = [...document.querySelectorAll(''div'')];
console.log(spreadDivArray);
let divArrayFrom = Array.from(document.querySelectorAll(''div''));
console.log(divArrayFrom);

La console.log() registrará el mismo resultado.

¿Hay alguna diferencia de rendimiento?

Answer 1

Bueno, Array.from es un método estático, es decir, una función, mientras que la sintaxis de spread es parte de la sintaxis literal de la matriz. Puede pasar funciones como datos, puede invocarlos una vez, varias veces o no. Esto no es posible con la sintaxis de spread , que es estática en este sentido.

Otra diferencia, que @nils ya ha señalado, es que Array.from también funciona con objetos similares a matrices, que no implementan el protocolo iterable. spread por otro lado requiere iterables.

Answer 2

Con respecto al rendimiento, cuando se utiliza un objeto NodeList o jQuery, la sintaxis de difusión tiene un mejor rendimiento en la mayoría de los navegadores que en Array.from .

• Difunde la sintaxis vs Array.from con NodeList
• Difunde la sintaxis vs Array.from con el objeto jQuery

Y, en general, la sintaxis de propagación parece tener un mejor rendimiento .

Answer 3

El elemento de propagación ( no es un operador ) funciona solo con objetos que son iterable (es decir, implementa el método @@iterator ). Array.from() también funciona en objetos similares a matrices (es decir, objetos que tienen propiedades de length y elementos indexados) que no son iterables. Vea este ejemplo:

const arrayLikeObject = { 0: ''a'', 1: ''b'', length: 2 };
// This logs [''a'', ''b'']
console.log(Array.from(arrayLikeObject));
// This throws TypeError: arrayLikeObject[Symbol.iterator] is not a function
console.log([...arrayLikeObject]);

Además, si solo quieres convertir algo a array, creo que es mejor usar Array.from() porque es más legible. Los elementos extendidos son útiles, por ejemplo, cuando desea concatenar múltiples arreglos ( [''a'', ''b'', ...someArray, ...someOtherArray] ).

Answer 4

La diferencia es que la propagación permite expandir una matriz. Mientras que from() crea una nueva matriz. .from() no amplía nada, crea una nueva matriz basada en los datos proporcionados; Por otro lado, el operador de propagación puede expandir una matriz con nuevas propiedades.

Answer 5

Usar Babel es una buena manera de ver qué está sucediendo internamente.

Sin embargo, las cabezas hacia arriba. Asegúrese de que se haya seleccionado la última en Babel, ya que la configuración predeterminada es incorrecta.

Usando su ejemplo anterior, esta es la salida.

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
var spreadDivArray = [].concat(_toConsumableArray(document.querySelectorAll(''div'')));
console.log(spreadDivArray);
var divArrayFrom = Array.from(document.querySelectorAll(''div''));
console.log(divArrayFrom);