Рубрики
Без рубрики

Оператор распространения JS (…)

Определение JavaScript ES6 представила оператор SPRECT, и он работал только для массивов …. Помечено JavaScript, распространить оператор.

Определение

JavaScript ES6 представил оператор SPRECT, и он работал только для массивов. ES2018 расширяет оператор по распространению (…), чтобы он работает с собственными перечисленными свойствами объекта.

SPRECT Syntax (…) позволяет, такое, как выражение или строку массива или строку, которые должны быть расширены в местах, где ожидаются нулевые или новые аргументы (для вызовов функций) или элементов (для литералов на массиве) или выражение объекта, которое будет расширено в Ожидается, где ожидаются места, где нулевые или более пар клавиш (для объектных литералов) ожидаются.

Ссылка: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Я чувствую, что это определение трудно понять. Так что позвольте мне поставить другие слова, Оператор SPRECT принимает такое как массив и расширяет его в элементы.

Примеры

Множество

1. Слияние массивов

Без оператора распространения, используя Array.prototype .Concat (),

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

let newArray=array1.concat(array2);
newArray; //-> [1, 2, 3, 4, 5, 6]

С распространением оператора,

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

let mergeArray = [...array1, ...array2];
mergedArray; //-> [1, 2, 3, 4, 5, 6]

2. Массив клона

В JavaScript массивы являются ссылочными типами («Pass by Review», он просто копирует адрес этого массива), поэтому вы не можете просто создать новую копию массива, используя =. Когда вы изменяете новый массив или оригинальный массив, он также изменит другой другой, например, пример ниже:

let original = [1, 2, 3];
let newArray = original;

newArray[0]=5;
newArray; //-> [5, 2, 3]
original; //-> [5, 2, 3]

О нет, оба из них изменились. Давайте попробуем еще раз с разбросом оператора.

let original = [1, 2, 3];
let newArray = [...original];

newArray[0]=5;
newArray; //-> [5, 2, 3]
original; //-> [1, 2, 3]

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

3. Строка до массива

Использование оператора SPRECT в строку, он вернет массив отдельных подстрок (разделение на символы).

let st = 'hello';
let array = [...st];
array; //-> ['h', 'e', 'l', 'l', 'o']

4. Математика

Математический объект в JavaScript, массив не будет работать, но с оператором распространения это будет работать

let array = [1,2,3,10];
console.log(Math.max(array)); //->NaN
console.log(Math.max(...array)); //->10

Ссылка: https://www.samanthaming.com/tidbits/92-6-use-cases-of-spread-with-aray/ https://www.geeksforgeeks.org/javascript-spread-operator/

Объект

Оператор по распространению (…) с объектами используется для создания копий существующих объектов с новыми или обновленными значениями или для создания копии объекта с большим количеством свойств.

скажем, у нас есть 3 объекта,

let user1 = {
    name: 'jean',
    age: 30
};
let user2 = {
    name: 'John',
    age: 20
};
let jean = {
    location: 'NY',
    hobby: 'coding'
};

1. Объект клона

Использование Object.Assign ()

let clonedUser = Object.assign({}, user1);
clonedUser; //-> {name: 'jean', age: 30 }

Используя распределительный оператор

let clonedUser = { ...user1 };
clonedUser; //-> {name: 'jean', age: 30 }

Оба они работают так же.

2. Объекты объединения (с разными свойствами)

Использование Object.Assign ()

  1. Это также изменит пользователь1.
let MergedUser = Object.assign(user1, jean);
MergedUser; //-> {name: "jean", age: 30, location: "NY", hobby: "coding"}
user1; //-> {name: "jean", age: 30, location: "NY", hobby: "coding"}
  1. Создание нового объединения OBJ, не изменит пользователя1
let MergedUser = Object.assign({}, user1, jean);
MergedUser; //-> {name: "jean", age: 30, location: "NY", hobby: "coding"}
user1; //-> {name: 'jean', age: 30 }

Без использования пустого объекта {} он изменит пользователя1. Просто говорите, что сначала возьмите пользователь1, а затем добавьте JEAN к USER1. Если вы не хотите Mutate User1, вы должны использовать пустой OBJ. «let.assign ({}, user1, джинс);” Это говорит, что создает пустую Newobj и копировать User1 к нему, а затем добавить Jean на этот Newobj.

Используя распределительный оператор

let MergedUser = { ...user1, ...jean};
MergedUser; //-> {name: "jean", age: 30, location: "NY", hobby: "coding"}

3. Объекты объединения (с такими же свойствами)

Используя объект.assign

let MergedUser = Object.assign({}, user1, user2);
MergedUser; //-> {name: "John", age: 30}

Используя распределительный оператор

let MergedUser = { ...user1, ...user2};
MergedUser; //-> {name: "John", age: 30}

Свойства перезаписываются другими объектами, которые имеют те же свойства позже в порядке параметров. Этот перезапись пригодится при прохождении объектов к другим функциям, которые обновляют состояние.

Бонусное обновление недвижимости

const obj = { hi: "x", hello: "y" };
const updatedObj = { ...obj, hi: "z" };
updatedObj; //-> {hi: z, hello: "b"}

Это то, что я говорил ранее при объяснении с использованием Object.Assign () с пустой OBJ или нет. Так что в этом случае мы обновляем OBJ с новым значением.

Бонус Создать новый OBJ с обновленной собственностью других OBJ

//using Object.assign()
let user = {id: 1, name: 'jean', age: 30};
let YoungerUser = Object.assign({}, user, {age: user.age - 1})
//using spread operator
let user = {id: 1, name: 'jean', age: 30};
let YoungerUser = {...user, age: user.age - 1}

Это создает новый OBJ, «youngeruser». Начните с нового пустого объекта, скопируйте все из исходного пользователя, затем перезапишите возрастное свойство с новым значением. Ссылка: https://www.rockyourcode.com/use-the-spread-operator-to-update-objects/

Оригинал: “https://dev.to/cicada0315/js-spread-operator-3hl1”

Читайте ещё по теме: