JavaScript 객체 구조분해 사용 분석(상세 예시)

이 기사는 JavaScript의 객체 구조화 사용 분석에 대한 관련 지식을 제공합니다.

ES6(ES2015) 릴리스에서는 JavaScript에 객체 속성을 처리하는 더 편리하고 빠른 방법이 제공됩니다. 이 메커니즘을 구조 분해(구조 분해 할당이라고도 함)라고 합니다. 그런데 정말 사용하게 될까요? 다양한 시나리오에서 구조 분해 할당의 사용법을 정말로 이해하고 있나요?

구조 분해를 사용하여 객체에서 값 가져오기

객체 분해의 가장 기본적인 사용은 객체에서 속성 키 값을 검색하는 것입니다.

예를 들어, 이름과 나이라는 두 가지 속성으로 객체를 정의합니다

const User = {
  name: '搞前端的半夏',
  age: 18
}

전통적으로 점(.) 표기법이나 아래 첨자([]) 표기법을 사용하여 객체에서 값을 검색했습니다. 다음 코드 조각은 객체의 값 ID와 이름을 검색하기 위해 점 표기법을 사용하여 객체에서 값을 검색하는 예를 보여줍니다. Employee

객체의 특정 속성 값을 가져오기 전에는 일반적으로 또는 []를 사용했습니다.

const name = User['name'];
const age = User.age;

물론 이 두 가지 방법은 현재 상황에서는 문제가 없지만, 사용자 속성이 너무 많으면 계속 복사해서 붙여넣어야 하므로 반복되는 코드가 많아집니다.

구조 할당을 통해 값을 빠르게 얻을 수 있습니다. 예를 들어 객체의 키 이름을 사용하여 변수를 만들고 객체의 값을 동일한 키에 할당합니다. 이렇게 하면 속성이 아무리 많아도 속성 이름만 지정하면 되므로 반복되는 코드도 많이 줄어듭니다.

const { name, age } = User;

구조화를 사용하여 중첩된 개체에서 값 가져오기

위의 예에서 User는 단순한 단일 레이어 개체일 뿐이며 일상적인 개발에서도 중첩된 개체를 접하게 되므로 구조 할당을 사용하여 어떻게 검색할 수 있습니까? 중첩된 개체의 값입니다. 다음으로 사용자 개체를 재정의하고 사용자의 전화번호가 포함된 이 개체에 연락처 속성을 추가합니다. .

const User = {
  name: '搞前端的半夏',
  age: '18',
  contact:{
    phone:'110',
  }
}

.을 사용하여 전화 값으로 앞뒤로 이동하면 2배가 걸립니다.

const phone = User.contact.phone;

구조 분해 할당을 사용하면 다음과 같습니다.

const  {contact:{phone}}=User
consosle.log(phone)  // 输出10.

몇 단계의 중첩이라도 이 글을 따라가는 한, 확실히 구체적인 가치를 얻게 될 것입니다.

객체 구조 분해를 사용하여 새 변수 및 기본값 정의

기본값

물론 일상적인 개발 과정에서 우리는 많은 극단적인 상황에 직면할 수 있습니다.

예를 들어 백엔드에서 전달된 객체가 누락될 수 있습니다. 일부 필드

const User = {
  name: '搞前端的半夏',
}

또는 속성에는 특정 값이 없습니다.

const User = {
  name: '搞前端的半夏',
  age: ''
}

구조 분해 할당을 사용하는 경우: age 속성이 존재하는지 여부에 관계없이 age 변수가 생성됩니다.

const { name, age } = employee;

User.age에 특정 값이 없으면

const { name, age=18 } = employee;

를 사용하여 age에 기본값을 지정할 수 있습니다.

새 변수

잠깐만요. 해체 섹션에는 더 많은 마법이 전시되어 있습니다! 완전히 새로운 변수를 생성하고 객체의 속성값을 사용하여 계산된 값을 할당하는 방법은 무엇입니까? 복잡하게 들리나요?

User 속성의 합산된 값을 출력하고 싶다면 어떻게 해야 할까요?

const { name,age,detail = `${name} 今年 ${age} `} = User ;
console.log(detail); // 输出：搞前端的半夏 今年 18

JavaScript 객체 구조 분해 별칭 사용

JavaScript 객체 구조 분해에서는 구조 분해 변수 별칭의 이름을 지정할 수 있습니다. 변수 이름 충돌 가능성을 줄이는 데 매우 편리합니다.

const User = {
  name: '搞前端的半夏',
  age: ''
}

age 속성의 값을 얻기 위해 구조 분해 할당을 사용하고 싶지만 age 변수가 이미 코드에 있다고 가정해 보겠습니다. 이때 구조에 별칭을 정의해야 합니다.

const { age: userAge } = User;
console.log(userAge); //搞前端的半夏

그리고 age를 사용하면 오류가 보고됩니다.

console.log(age);

객체 구조 분해를 사용하여 동적 이름 속성 처리

API 응답 데이터를 JavaScript 객체로 처리하는 경우가 많습니다. 이러한 객체에는 동적 데이터가 포함될 수 있으므로 클라이언트는 속성 키 이름을 미리 알지 못할 수도 있습니다.

const User = {
  name: '搞前端的半夏',
  age: ''
}

키를 매개변수로 전달하면 User 개체의 속성 값을 반환하는 함수를 작성할 수 있습니다. 여기서는 매개변수를 허용하기 위해 []를 사용하고, js는 이 키 쌍을 기반으로 객체에서 매개변수를 검색합니다!

function getPropertyValue(key) {
    const { [key]: returnValue } = User;   
    return returnValue;
}

const contact = getPropertyValue('contact');
const name = getPropertyValue('name');
console.log(contact, name); // 空  搞前端的半夏

함수 매개변수 및 반환 값의 객체 구조 분해 ​​

할당 분해 및 매개변수 전달

객체 분해를 사용하여 속성 값을 함수에 매개변수로 전달합니다.

const User = {
  name: '搞前端的半夏',
  age: 18
}

name 이제 브라우저 콘솔에 로그인하기 위해 및 속성 값을 사용하여 메시지 부서를 생성하는 간단한 함수를 만들어 보겠습니다.

function consoleLogUser({name, age}) {
  console.log(`${name} 今年 ${age}`); 
}

값을 함수 인수로 직접 전달하고 내부적으로 사용합니다.

consoleLogUser(User); // 搞前端的半夏 今年 18

소멸자 객체 반환 값

객체 소멸자의 또 다른 용도가 있습니다. 함수가 객체를 반환하는 경우 값을 변수로 직접 분해할 수 있습니다. 객체를 반환하는 함수를 만들어 보겠습니다.

function getUser() {
  return {
    'name': '搞前端的半夏',
    'age': 18
  }
}

const { age } = getUser();
console.log(age); // 18

루프에서 객체 구조 분해 사용

우리가 논의할 마지막(그러나 중요한) 사용법은 루프 구조 분해입니다. 직원 개체 집합을 고려해 보겠습니다. 우리는 배열을 반복하고 각 직원 개체의 속성 값을 사용하려고 합니다.

const User= [
  { 
       'name': '爱分享的半夏',
    'age': 16
  },
  { 
      'name': '搞前端的半夏',
    'age': 18
  },
  { 
        'name': '敲代码的半夏',
    'age': 20
  }
];

for-of 루프를 사용하여 User 개체를 반복한 다음 개체 구조 분해 할당 구문을 사용하여 세부 정보를 검색할 수 있습니다.

for(let {name, age} of employees) {
  console.log(`${name} 今年${age}岁!!!`);
}

관련 추천: javascript 학습 튜토리얼

위 내용은 JavaScript 객체 구조분해 사용 분석(상세 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!