Что такое три точки (…) или операторы разделения в React

Вы могли часто видеть код в React, где перед переменной используются три точки (...), как показано ниже:

<Component {...props} />

В JavaScript такие операторы называются операторами распространения, и в этой статье мы рассмотрим различные случаи использования операторов распространения в React и JavaScript.

Передача реквизитов с помощью оператора spread

Допустим, у вас есть компонент Person, и вы хотите передать три различных свойства, firstName, lastName и age.
Традиционно мы передаем их, как показано ниже:

import React from "react"

export const Person = () => {
  const { firstName, lastName, age } = person
  return (
    <div>
      <p>
        Name :{firstName} {lastName}
      </p>
      <p>Age :{age}</p>
    </div>
  )
}

const App = () => {
  const person = { firstName: "John", lastName: "Doe", age: 32 }
  return (
    <Person
      firstName={person.firstName}
      lastName={person.lastName}
      age={person.age}
    />
  )
}

export default App

Обратите внимание, что мы будем обращаться к каждому свойству и записывать его отдельно. По мере роста количества свойств код становится громоздким. Мы можем использовать оператор spread, чтобы передать все свойства внутри объекта person, как показано ниже:

import React from "react"

export const Person = () => {
  const { firstName, lastName, age } = person
  return (
    <div>
      <p>
        Name :{firstName} {lastName}
      </p>
      <p>Age :{age}</p>
    </div>
  )
}

const App = () => {
  const person = { firstName: "John", lastName: "Doe", age: 32 }
  return <Person {...person} />
}

export default App

Массивы и оператор spread

Оператор spread также может быть использован для выполнения различных операций с массивами

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

Мы можем скопировать элементы одного массива в другой массив с помощью оператора spread, как показано ниже:

const arr1 = [1, 2, 3]
const arr2 = [...arr1]
arr2[2] = 4
console.log(arr1) // [1, 2, 3]
console.log(arr2) // [1, 2, 4]

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

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

Мы можем объединить 2 массива и создать новый массив, как показано ниже, используя операторы spread:

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr3 = [...arr1, ...arr2]
console.log(arr3) // [1, 2, 3, 4, 5, 6]

Добавление элементов в массив

При копировании массива мы можем добавить элемент в начало или в конец:

const arr1 = [1, 2, 3]
const arr2 = [0, ...arr1]
const arr3 = [...arr1, 4]
console.log(arr2) // [0, 1, 2, 3]
console.log(arr3) // [1, 2, 3, 4]

В своей предыдущей статье я объяснил, как добавить элемент между массивами.

Передача массивов в функцию

Мы можем использовать оператор spread для передачи массива в функцию в качестве отдельных аргументов:

const sum = (a, b, c) => {
  return a + b + c
}

const arr1 = [1, 2, 3]

sum(...arr1)

Оператор Spread для операций с объектами

Теперь рассмотрим различные объектные операции, которые можно выполнить с помощью оператора spread.

Копирование элементов объекта

Подобно массивам, мы можем создать неглубокую копию объекта:

const obj1 = { firstName: "John", lastName: "Doe", age: 32 }
const person = { ...obj1 }
console.log(person) // {firstName: 'John', lastName: 'Doe', age: 32}

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

Подобно массивам, мы можем объединить 2 объекта, как показано ниже:

const obj1 = { firstName: "John" }
const obj2 = { lastName: "Doe", age: 32 }
const person = { ...obj1, ...obj2 }
console.log(person) // {firstName: 'John', lastName: 'Doe', age: 32}

Если в обоих объектах присутствует одно и то же свойство,
то свойство левого объекта будет заменено свойством правого объекта в созданной копии.

Добавление свойства при копировании объекта

Мы можем добавить дополнительные свойства при копировании объекта:

const obj1 = { firstName: "John", lastName: "Doe" }
const person = { ...obj1, age: 32, profession: "Full Stack Developer" }
console.log(person) // {firstName: 'John', lastName: 'Doe', age: 32, profession: 'Full Stack Developer'}

Обновление существующих свойств объекта

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

const obj1 = {
  firstName: "John",
  lastName: "Doe",
  age: 32,
  profession: "Full Stack Developer",
}
const person = { ...obj1, age: 33 }
console.log(person) //{firstName: 'John', lastName: 'Doe', age: 33, profession: 'Full Stack Developer'}