개체 반복.

개체를 반복하고 모든 값을 변경하고 싶었던 적이 있습니까? 상태를 사용하여 반응 앱을 빌드하고 여러 입력이 있는 경우와 같습니다. 이제 지우기 버튼으로 모든 상태를 지우고 싶습니까? 제가 놀라운Wes Bos에서 온 한 가지 방법을 보여드리겠습니다 .

나는 이것을 바닐라 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: '' 
}

이것을 시각화하는 데 여전히 문제가 있는 경우 다음을 참조하십시오replit I made.

TLDR: Object.entries() 및 Object.fromEntries()를 사용하여 개체를 배열로 전환한 다음 다시 개체로 전환하여 개체를 반복할 수 있습니다.

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