JavaScript Map 및 Object Spread를 사용하여 객체 배열에 추가 속성을 추가하는 방법은 무엇입니까?

추가 속성으로 객체 배열 강화: 각 요소에 "활성" 추가

실제 프로그래밍 시나리오에서는 기존 객체 배열을 확장해야 할 수도 있습니다. 추가 속성이 있습니다. 예를 들어, 각각 "id"와 "name"을 포함하는 사용자 데이터를 나타내는 개체 배열을 생각해 보세요. 활동 상태를 추적하려면 각 개체에 "활성" 속성을 추가하려고 합니다.

Array.prototype.map()을 사용하여 개체 보강

이 문제에 대한 한 가지 우아한 접근 방식은 다음을 활용하는 것입니다. Array.prototype.map() 메서드. 이 방법은 원본 배열의 각 요소에 변환 함수를 적용하여 새 배열을 만듭니다. 우리의 경우에는 객체를 취하고 추가 "Active" 속성이 "false"로 설정된 새 객체를 반환하는 함수를 정의합니다.

<code class="javascript">const updatedResults = Results.map(obj => ({
  ...obj, // Copy existing properties
  Active: 'false' // Add new "Active" property
}));</code>

map() 메소드를 적용하면 새 배열 "updatedResults". 여기서 각 개체에는 원하는 "Active" 속성이 있습니다. 원래 "결과" 배열은 변경되지 않습니다.

객체 확산 구문 이해

함수에서 "..." 구문을 객체 확산 구문이라고 합니다. 한 개체의 열거 가능한 모든 속성을 다른 개체로 복사합니다. 이 경우 새로운 "Active" 속성을 추가하면서 기존 속성("id" 및 "name")을 유지하기 위해 이를 사용합니다.

출력 확인

위 코드를 실행한 후, "updatedResults" 배열을 확인하여 이제 각 개체의 "Active" 속성이 "false"로 설정되어 있는지 확인할 수 있습니다.

<code class="javascript">console.log(updatedResults);
// Output:
// [
//   { id: 1, name: 'Rick', Active: 'false' },
//   { id: 2, name: 'david', Active: 'false' }
// ]</code>

결론

Array.prototype.map( ) 및 객체 확산 구문을 사용하면 추가 속성을 사용하여 객체 배열을 쉽게 향상시킬 수 있습니다. 이 기술은 데이터 구조를 동적으로 확장하고 조작해야 하는 다양한 프로그래밍 시나리오에 널리 적용 가능합니다.

위 내용은 JavaScript Map 및 Object Spread를 사용하여 객체 배열에 추가 속성을 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!