Перемещение по объектам.

Вы когда-нибудь хотели выполнить цикл над объектом и изменить все его значения? Например, когда вы создаете приложение react с состоянием и у вас есть несколько входов. А может быть, вы хотите очистить все состояние с помощью кнопки clear? Позвольте мне показать вам один способ, о котором я узнал от замечательного Уэса Боса.

Я буду показывать это на ванильном JS.

Во-первых, давайте создадим объект

const product1 = {
   name: 'Giant Sour Gummy Worm',
   price: 35.00,
   description: 'A giant gummy worm coated with sour powder and waiting to be eaten!',
   image: 'https://images.vat19.com/worlds-largest-sour-gummy-worm/worlds-largest-gummy-worm-sour-flavor-1.jpg',
   availability: 'FOR_SALE',
}

Теперь, когда у нас есть объект, нам нужно сделать цикл по нему, изменив его на массив. Используя Object.entries()

Object.entries(product1)

Если мы console.log(), то получим что-то вроде этого.

[
  [ 'name', 'Giant Sour Gummy Worm' ],
  [ 'price', 35 ],
  [
    'description',
    'A giant gummy worm dunked in sour powder and waiting to be eaten!'
  ],
  [
    'image',
    'https://images.vat19.com/worlds-largest-sour-gummy-worm/worlds-largest-gummy-worm-sour-flavor-1.jpg'
  ],
  [ 'availability', 'FOR_SALE' ]
]

Видите, как в каждом массиве есть два элемента? Первый — это ключ, а второй — значение!

Теперь, если мы просто map() над массивом, мы можем изменить все значения внутреннего массива.

const mappedProduct = Object.entries(
    product1
    ).map(([key, value]) => [key, ''])

Теперь при наложении карты мы должны деструктировать ключ и значение с помощью [key, value]. Когда мы хотим изменить все значения, мы вводим новое значение следующим образом [key, ‘new value’]. В данном случае мы просто очищаем значения, поэтому я оставил пустую строку.

Теперь console.log(mappedProduct) выдаст нам следующее

[
  [ 'name', '' ],
  [ 'price', '' ],
  [ 'description', '' ],
  [ 'image', '' ],
  [ 'availability', '' ]
]

Потрясающе, теперь все, что нам нужно сделать, это изменить его обратно на объект! Это очень просто, все, что нам нужно, это Object.fromEntries(). Все должно быть обернуто в него, вот так.

const clearedProduct = Object.fromEntries(
  Object.entries(
    product1
  ).map(([key, value]) => [key, ''])
)

И на этом мы закончим, если мы console.log(clearedProduct), то получим следующее.

{ 
  name: '', 
  price: '', 
  description: '', 
  image: '', 
  availability: '' 
}

Если вам все еще трудно представить себе это, вот копия, которую я сделал

TLDR: Используя Object.entries() и Object.fromEntries(), мы можем перебирать объекты, превращая их в массив, а затем обратно в объект.

Object.fromEntries(
  Object.entries(
    objectYouWantToLoopOver
  ).map(([key, value]) => [key, ''])
)