JavaScript의 객체 구조 분해를 살펴보겠습니다.

Destructuring은 데이터 유형 중 하나를 분해하고 해당 개별 속성을 변수에 할당하는 개념입니다. "JavaScript Destructuring Assignment 5 Common Scenarios and 예제" 기사에서 소개되었습니다. 오늘 복습해 보겠습니다.

기본 Destructuring

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
};
const { firstName, lastName } = fullName; // 解构语法
console.log(firstName); // Quintion
console.log(lastName); // Tang

위 코드 조각에서 볼 수 있듯이 Destructuring 구문에서 firstName 개체 속성이 해체되어 표현식 왼쪽에 정의된 변수에 할당됩니다. 위 시나리오에서 객체의 속성 이름은 왼쪽 표현식에 정의된 변수와 일치해야 합니다. 다른 변수 이름을 정의하면 다음과 같이 원하는 값을 얻을 수 없습니다. firstName 对象属性并将其分配给表达式左侧定义的变量。在上述场景中，对象的属性名称应与左侧表达式中定义的变量匹配。 如果定义其他变量名称，则获取不到想要的值，如：

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
};
const { firstName, trueName } = fullName; // 解构语法
console.log(firstName); // Quintion
console.log(trueName); // undefined

由于在 fullName 中没有属性 trueName ，所以它被初始化为 undefined。

别名解构

如果需要把对象属性赋值给属性名不一致的变量名，可以如下代码来实现：

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
};
const { firstName: trueName, lastName } = fullName; // 解构语法
console.log(trueName); // Quintion
console.log(lastName); // Tang

默认值解构

在上面代码中有看到，对象中不存在特定属性的解构，一般会赋值为 undefined ，如果不希望是 undefined ，可以为其设置一个默认值，如下：

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
};
const { firstName: trueName, lastName, age = 18 } = fullName; // 解构语法
console.log(trueName); // Quintion
console.log(lastName); // Tang
console.log(age); // 18

下面来看下存在 age 属性下的结果：

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
    age: 30,
};
const { firstName: trueName, lastName, age = 18 } = fullName; // 解构语法
console.log(trueName); // Quintion
console.log(lastName); // Tang
console.log(age); // 30

REST解构

如果想从一个对象中解构一个属性，剩下的属性结构为另一个变量，如下：

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
    age: 30,
};
const { age, ...username } = fullName; // 解构语法
console.log(username); // { firstName: 'Quintion', lastName: 'Tang' }
console.log(age); // 30

在上面的代码片段中，将 username 属性分配给了一个变量，并使用了 rest 运算符 (...rrreee

fullName에 trueName 속성이 없으므로 정의되지 않음.

별칭 해체일관되지 않은 속성 이름을 가진 변수 이름에 객체 속성을 할당해야 하는 경우 다음 코드로 구현할 수 있습니다:
rrreee

기본값 구조화🎜위 코드에서 볼 수 있듯이 객체의 특정 속성은 구조화되지 않습니다. 일반적으로 값은 undefine으로 지정됩니다. 정의되지 않음이 되는 것을 원하지 않으면 다음과 같이 기본값을 설정할 수 있습니다. 🎜rrreee🎜 age 속성 아래의 결과를 살펴보겠습니다. 🎜rrreee

REST 해체🎜🎜객체에서 속성을 해체하고 나머지 속성 구조는 다음과 같이 또 다른 변수인 경우: 🎜rrreee🎜위 코드 조각에서 username 속성은 변수에 할당되고 사용됩니다. rest 연산자(...)는 변수의 나머지 속성을 별도의 개체에 할당합니다. 🎜🎜추천 학습: "🎜JavaScript 비디오 튜토리얼🎜"🎜🎜

위 내용은 JavaScript의 객체 구조 분해를 살펴보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!