7 корисних прийомів з rest параметрами і spread операторами на JavaScript об'єктах

1. Додавання властивостей

Ви можете клонувати об'єкт, паралельно додаючи додаткові властивості клонованому об'єкту.

У цьому прикладі  user клонований і до нього додано  password в  userWithPass.

const user = { id: 100, name: 'Howard Moon'}
const userWithPass = { ...user, password: 'Password!' }

user //=> { id: 100, name: 'Howard Moon' }
userWithPass //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

2. Злиття об'єктів

Ще ви можете злити два об'єкти в один новий.

part1 і  part2 зливаються в  user1.

const part1 = { id: 100, name: 'Howard Moon' }
const part2 = { id: 100, password: 'Password!' }
const user1 = { ...part1, ...part2 }

//=> { id: 100, name: 'Howard Moon', password: 'Password!' }

Об'єкт можна вільно злити і з таким синтаксисом:

const partial = { id: 100, name: 'Howard Moon' }
const user = { ...partial, id: 100, password: 'Password!' }

user //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

3. Виключити властивості об'єкта

Властивості можна видалити використовуючи деструктуризацію в комбінації з rest оператором. Тут ми деструктуризуємо password і інші властивості об'єкта віддаються як rest.

const noPassword = ({ password, ...rest }) => rest
const user = {
  id: 100,
  name: 'Howard Moon',
  password: 'Password!'
}

noPassword(user) //=> { id: 100, name: 'Howard moon' }

4. Динамічне виключення властивостей

Функція removeProperty использует  props як аргумент. Використовуючи обчислення імен властивостей prop може бути виключений динамічно з об'єкта клону.

const user1 = {
  id: 100,
  name: 'Howard Moon',
  password: 'Password!'
}

const removeProperty = prop => ({ [prop]: _, ...rest }) => rest
//                     ----       ------
//                          \   /
//                dynamic destructuring
const removePassword = removeProperty('password')
const removeId = removeProperty('id')
removePassword(user1) //=> { id: 100, name: 'Howard Moon' }
removeId(user1) //=> { name: 'Howard Moon', password: 'Password!' }

5. Організація властивостей

Іноді властивості знаходяться не в потрібному нам порядку. Використовуючи кілька трюків ми можемо поставити потрібні властивості в самий верх списку або ж навпаки, в самий низ.

Щоб відправити  id на перше місце, додайте  id: undefined нового об'єкту перед оператором розширення.

const user3 = {
  password: 'Password!',
  name: 'Naboo',
  id: 300
}
const organize = object => ({ id: undefined, ...object })
//                            -------------
//                          /
//  move id to the first property
organize(user3)
//=> { id: 300, password: 'Password!', name: 'Naboo' }

Щоб відправити password на останнє місце, то спочатку деструктуризуйте password з object. Далі, виставте password за оператором розширення.

const user3 = {
  password: 'Password!',
  name: 'Naboo',
  id: 300
}
const organize = ({ password, ...object }) =>
  ({ ...object, password })
//              --------
//             /
// move password to last property
organize(user3)
//=> { name: 'Naboo', id: 300, password: 'Password!' }

6. Дефолтні властивості

Дефолтні властивості це значення, які будуть виставлені тільки коли вони не включені в оригінальний об'єкт.

У нашому прикладі  user2 не включає в себе  quotes. Функція setDefaults перевіряє чи є в об'єктах quotes, якщо немає, то він буде виставлений на  [].

Викликаючи  setDefaults(user2),  значення буде включати в себе  quotes: [].

Викликаючи  setDefaults(user4) нічого не зміниться, тому що  user4 вже містить  quotes.

const user2 = {
  id: 200,
  name: 'Vince Noir'
}
const user4 = {
  id: 400,
  name: 'Bollo',
  quotes: ["I've got a bad feeling about this..."]
}
const setDefaults = ({ quotes = [], ...object}) =>
  ({ ...object, quotes })
setDefaults(user2)
//=> { id: 200, name: 'Vince Noir', quotes: [] }
setDefaults(user4)
//=> {
//=>   id: 400,
//=>   name: 'Bollo',
//=>   quotes: ["I've got a bad feeling about this..."]
//=> }

Це також може бути написано таким чином:

const setDefaults = ({ ...object}) => ({ quotes: [], ...object })

7. Перейменування властивостей

Поєднуючи методики описані вище, ми можемо створити функцію яка перейменовує властивості.

Уявіть, що у вас є кілька об'єктів з  ID в верхньому регістрі, які повинні бути в нижньому. Почніть з деструктуризациї  ID з об'єкта. Далі, поверніть його в об'єкт як  id.

const renamed = ({ ID, ...object }) => ({ id: ID, ...object })
const user = {
  ID: 500,
  name: "Bob Fossil"
}
renamed(user) //=> { id: 500, name: 'Bob Fossil' }

8. Додаємо властивості за умовою

У цьому прикладі, password буде додано лише якщо  password визначено.

const user = { id: 100, name: 'Howard Moon' }
const password = 'Password!'
const userWithPassword = {
  ...user,
  id: 100,
  ...(password && { password })
}
userWithPassword //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

Джерело перекладу