자바스크립트 객체 파괴-JS 튜토리얼-php.cn

자바스크립트 객체 파괴

Mary-Kate Olsen

풀어 주다： 2024-12-16 06:52:11

원래의

633명이 탐색했습니다.

JavaScript Object Destructuring

객체 파괴

배열 구조 분해와 마찬가지로 객체 구조 분해도 도움이 되고 코드를 더 깔끔하고 좋게 만듭니다. 하지만 배열 분해와는 다르므로 수행 방법은 다음과 같습니다.

먼저 전체 설명을 위해 이 개체가 필요합니다. 개체에 대해 스폰지 밥 비유를 사용했습니다. 그러니 살펴보고 조금 분석해 보세요.

let heightInCm = 4;
const obj = {
  personName: 'spongeBob',
  personAge: 37,
  personAddress: '124 Conch Street, Bikini Bottom, Pacific Ocean',
  heightInCm: 10,
  personHobbies: [
    'Jellyfishing',
    'Cooking Krabby Patties',
    'Blowing Bubbles',
    'Karate',
  ],
  home: {
    type: 'pineapple',
    location: 'bikini bottom',
    details: {
      rooms: 3,
      uniqueFeature: "it's underwater and shaped like a pineapple!",
    },
  },
};

로그인 후 복사

이제 객체에서 두 가지 속성을 삭제해 보겠습니다.

const { personName, personAge } = obj;
console.log(personName, personAge); // spongeBob 37

로그인 후 복사

아시다시피 개체를 소멸하려면 {중괄호}를 사용해야 하며 그 안에 개체에서 검색하려는 속성 이름과 정확히 동일한 변수 이름을 작성해야 합니다.

*속성 이름과 다른 변수 이름을 만들 수도 있습니다. 콜론 바로 뒤에 새 변수 이름을 입력하면 됩니다.

const { personName: name, personAge: age } = obj;
console.log(name, age); // spongeBob 37

로그인 후 복사

보시다시피 personName을 이름으로, personAge를 나이로 변경했습니다.

*기본값:

객체에 존재하지 않는 속성에 액세스하려고 하는 경우 기본값을 설정할 수도 있습니다. 예:

const { DriversLicense = ['no'] } = obj;
console.log(DriversLicense);  // ['no']
// DriversLicense does not exist in obj, so the default value will be used.

로그인 후 복사

* 객체 구조 분해 중 변수 변경:

({ heightInCm } = obj);
console.log(heightInCm); // 10

로그인 후 복사

이 예에서 다시 살펴보면 객체 외부에서 heightInCm = 4라는 것을 알 수 있으며 객체 내부의 값을 외부의 heightInCm에 할당하려고 했기 때문에 일반적인 구조 분해처럼 수행했지만 JavaScript에서는 함수 외부에서 { }로 시작할 때 코드 블록이 있으므로 해당 명령문을 괄호로 묶어 유효하게 만듭니다.

*중첩 객체 분해:

// firstway:  Extracting the Entire Nested Object 

const { details } = obj.home;
console.log(details); // { rooms: 3, uniqueFeature: "it's underwater and shaped like a pineapple"


// second way: Extracting Specific Properties
const {
  home: { details }} = obj;

console.log(details); // {rooms: 3, uniqueFeature: "it's underwater and shaped like a pineapple"


// third way
const {details: { rooms, uniqueFeature }} = obj.home;

console.log(rooms, uniqueFeature); // 3 "it's underwater and shaped like a pineapple!"

로그인 후 복사

명확성에 가장 적합: 큰 개체로 작업하고 전체 개체를 먼저 추출하여 내용을 명확하게 유지하는 것을 선호하는 경우 첫 번째 방법이 더 나을 수 있습니다.
효율성에 가장 적합: 깊게 중첩된 개체의 특정 속성에만 관심이 있는 경우 세 번째 방법이 가장 좋은 경우가 많습니다. 간결하고 불필요한 변수 생성을 방지합니다.

*읽어주셔서 감사합니다. 모든 내용을 이해하시기 바랍니다. 질문이 있으시면 언제든지 문의해 주세요.

위 내용은 자바스크립트 객체 파괴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!