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

  • 30 сентября, 11:12
  • 5388
  • 0

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

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!' }

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


Теги: javascript
0 комментариев
Сортировка:
Добавить комментарий

IT Новости

Смотреть все