Есть ли разница между использованием Array.from(document.querySelectorAll('div')) или [...document.querySelectorAll('div')]?
Вот пример:
let spreadDivArray = [...document.querySelectorAll('div')];
console.log(spreadDivArray);
let divArrayFrom = Array.from(document.querySelectorAll('div'));
console.log(divArrayFrom);
console.log() будет записывать тот же результат.
Есть ли разница в производительности?
Спред элемент (это не оператор) работает только с объектами iterable (т.е. реализовать метод @@iterator). Array.from() работает также и с массивоподобными объектами (т.е. объектами, у которых есть свойство length и индексированные элементы), которые не являются итерируемыми. См. Этот пример:
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]);Ну, Array.from является статическим методом, то есть функцией, тогда как синтаксис spread является частью синтаксиса литерала массива. Вы можете передавать функции вокруг таких же данных, вы можете вызывать их один раз, несколько раз или вообще нет. Это невозможно с синтаксисом spread, который является статичным в этом отношении.
Еще одно отличие, которое @nils уже указывало, заключается в том, что Array.from также работает с объектами типа массива, которые не реализуют итеративный протокол. spread, с другой стороны, требует итераций.
Что касается производительности, при использовании объекта NodeList или jQuery синтаксис распространения имеет большую производительность в большинстве браузеров, чем Array.from.
И вообще, синтаксис распространения как представляется, имеет лучшую производительность.
Разница заключается в том, что спред позволяет массиву быть расширенным. В то время как from() создает массив new. .from() не распространяется ни на что, он создает новый массив на основе предоставленных данных; оператор спреда, с другой стороны, может расширять массив новыми свойствами.
Использование Babel - хороший способ увидеть, что происходит внутри.
Голова вверх. Убедитесь, что последняя выбрана в Babel, поскольку по умолчанию неверно.
Используя ваш пример выше, это вывод.
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);