Утилита оператора распространения в JavaScript

Оператор распространения - одна из самых крутых функций, представленных в рамках выпуска ES2015, мы рассмотрим некоторые его полезные приложения.

Вы когда-нибудь наблюдали, как намазывают тосты маслом, как они оставляют следы? Точно так же оператор JavaScript Spread представлен тремя точками перед переменной. Это оператор, как и любой другой математический оператор, например +, -,%. Оператор распространения работает только с ссылочными типами данных, такими как объекты, массивы, карты, наборы и т. Д. Посмотрите следующие отрывки, которые помогут вам лучше понять реализацию:

Синтаксис

Для массивов:

const numArray = [1,2,3,4];

Представьте, что распространение массива означает удаление квадратных скобок.

Визуализируйте ... numArray как = ›1,2,3,4

Для объектов:

const profile = { name: ‘techsith’ , age: 30 };

Представьте, что раскладывание объекта означает удаление фигурных скобок.

Визуализировать ... профиль как = ›имя:‘ techsith ’, возраст: 30

Теперь, когда вы знаете, как объявлен оператор, давайте посмотрим на некоторые интересные приложения оператора распространения.

Создать мелкую копию массива

Допустим, вы хотите создать копию (клон) массива, чтобы они имели одинаковое содержимое, но были двумя отдельными массивами.

const numArray = [1,2,3,4];

Распространение numArray приведет к тому, что вы будете подписаны. Помните, что распространение также создает клон.

...numArray     // 1,2,3,4

Добавление квадратных скобок вокруг оператора распространения возвращает вам массив.

const newArray = [...numArray]  // [1,2,3,4]

Здесь newArray - это неглубокая копия numArray. Неглубокая копия означает, что она распространяется только на один уровень в глубину. Если у ваших элементов есть дочерние элементы, эти элементы не будут клонированы. Следовательно, у вас будет ссылка на исходный объект. В приведенном ниже примере обновление свойства name клонированного профиля также обновляет исходный профиль. Это потому, что имя на один уровень.

const profiles = [{
    name: 'techsith',
    age: 30
  },
  {
    name: 'john',
    age: 20
  }];
const clonedProfiles = [...profiles];
clonedProfiles[0].name = 'peter';
console.log(profiles[0].name); //peter.

Объединение массивов

Слияние двух или более массивов теперь очень просто с помощью оператора распространения.

const array1 = [1,2,3,4];
const array2 = [5,6,7];

Визуализируйте распространение обоих массивов

(Visualize)
...array1  //1,2,3,4
...array2  //5,6,7

теперь визуализируйте слияние двух операторов распространения. Это приведет к следующему:

(Visualize)
...array1, ...array2  // 1,2,3,4,5,6,7

наконец, заключите его в квадратную скобку и вуаля, вы объединили массив.

const mergedArray = [...array1, ...array2]  // [1,2,3,4,5,6,7]

Объединение объектов

Объединение объектов немного отличается от объединения массивов. Потому что объекты не допускают дублирования ключей. Давайте поймем разницу на примере: у вас есть два профиля одного и того же человека. Имя человека в обоих профилях одинаковое. Однако возраст другой, и у второго профиля есть дополнительное свойство, называемое веб-сайтом.

const profile1 = {
  name: 'techsith',
  age: 30
};
const profile2 = {
  name: 'techsith',
  age: 40,
  website: 'techsith.com'
};

Разложим их и визуализируем:

(Visualize)
...profile1 // name: 'techsith', age: 30
...profile2 // name: 'techsith', age: 40, website: 'techsith.com'

Объединим спред:

(Visualize)
...profile1, ...profile2 
// name: 'techsith', age: 30 , name: 'techsith', age: 40, site: 'techsith.com'

Как видите, проблема с уникальными ключами. Технически объединенные профили должны иметь уникальные ключи. Однако здесь у нас есть повторяющиеся ключи. Следовательно, ключ, который определяется позже, имеет приоритет над первым. Возраст 40 переопределит возраст 30. Имя имеет повторяющиеся значения, поэтому будет учитываться второе или последнее значение.

(Visualize)
...profile1, ...profile2
// name: 'techsith', age: 40, site: 'techsith.com'

Теперь давайте обведем фигурные скобки, чтобы преобразовать распространение в объект.

const newProfile = { ...profile1, ...profile2 }  
/* 
{
  name: 'techsith',
  age: 40,
  site: 'techsith.com'
}
*/

Остальные параметры

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

let addTwo = (a, b) => a + b;
let addThree = (a, b, c) => a + b + c;

Однако я хочу оставить это открытым, и функция должна принимать n аргументов. Здесь мы можем использовать оператор распространения.

let add = (...n) => n.reduce((total, i) => total + i);
console.log(add(1,2,3)) // 6
console.log(add(1,2,3,4)) // 10

Аргументы распространяются с помощью оператора распространения… n, использование оператора распространения здесь называется остаточными параметрами. Внутри функции вы можете использовать n как массив.

Я уверен, что у оператора спреда больше утилит, чем я упомянул здесь. Дайте мне знать, если вы их знаете.

:)