Синтаксис спреда и метод среза

Question

Я пытался понять, в чем разница между методом синтаксиса распространения и методом слайса в следующем подходе.

предположим, что я хочу сделать реальную копию массива, я, вероятно, могу легко сделать это, используя распространенный синтаксис

var fruits = ["Banana", "Chips" , "Orange", "Lemon", "Apple", "Mango"]
var newCitrus = [...fruits]

Если я console.log это

["Banana", "Chips", "Orange", "Lemon", "Apple", "Mango"] 

но я также могу создать копию массива, используя метод slice. Учитывая тот же массив выше, если я сделаю что-то вроде этого ...

var citrus = fruits.slice(0);

и затем консоль зарегистрирует его, он даст мне тот же массив, который я получил бы с помощью синтаксиса распространения

["Banana", "Chips", "Orange", "Lemon", "Apple", "Mango"] 

Поскольку на кодирование / запись им обоим требуется примерно одинаковое время, в чем здесь разница? какой подход я обычно выбираю?

Answer 1

Хотя эти два метода на самом деле не эквивалентны. Slice является функцией Array.prototype и знает о реализации массива. Это создаст очень эффективную глубокую копию. Что еще более важно, .slice() сохранит информацию о редкости вашего массива.

Напротив, [...Array] просто создаст новый массив из итеративного представления вашего существующего массива. Не обязательно так эффективно.

Попробуйте это:

var a = [];
a.length = 3;
console.log("slice:", a.slice());
console.log("spread:", [...a]);

С помощью консоли разработчика Chrome Browser я получаю следующие результаты:

slice: (3) [empty × 3]
spread: (3) [undefined, undefined, undefined]

Если ваш массив особенно большой + разреженный, array.slice() будет исключительно быстрым. [...array] возможно повесит ваш браузер.

Answer 2

Новые версии Chrome (72+), по-видимому, устранили разрыв в производительности. https://measurethat.net/Benchmarks/ListResults/2667

Answer 3

Производительность в стороне slice - это просто функция на Array.prototype, поэтому она будет работать только для массивов. С другой стороны, распространяемый синтаксис будет работать для любого итерируемого (объекта, который удовлетворяет итерируемый протокол ), поэтому он будет работать "из коробки" на любых String, Array, TypedArray, Map и Set. Вы также можете легко создавать собственные итерации .

Синтаксис распространения может также использоваться для создания мелких клонов объектов:

const obj = { foo: 'bar', baz: 42 };
const clone = { ...obj1 };
obj.foo === clone.foo // true
obj.baz === clone.baz // true
obj === clone         // false (references are different)

Answer 4

Измерение в Chrome показывает, что срез гораздо более производительный, чем оператор спреда, с 67M операций в секунду против 4M операций в секунду. Если вы создаете приложение для Chrome или приложения Electron (в котором используется Chromium), я бы предпочел использовать слайс, особенно для приложений с большими данными и в реальном времени.

Answer 5

Производительность будет зависеть от двигателя, на котором он работает. И, как и в большинстве Javscript-кода, он, вероятно, будет работать в различных движках. Итак, используйте то, что кажется вам эстетически лучше. Для меня это распространено.

... - это чистая красота.

Если вы решили использовать слайс, пропустите 0, просто скажите .slice().