마스터가 JavaScript에서 객체 구조 분해를 사용하는 방법을 요약합니다.

javaScript 열은 객체 파괴와 관련된 무료 학습 권장 사항을 사용하는 방법을 소개합니다. 객체 속성을 추출하여 변수에 바인딩합니다.

더 좋은 점은 객체 구조 분해를 통해 단일 명령문에서 여러 속성을 추출할 수 있고, 중첩된 객체에서 속성에 액세스할 수 있으며, 속성이 존재하지 않는 경우 기본값을 설정할 수 있다는 것입니다.

이 글에서는 자바스크립트에서 객체 분해를 활용하는 방법을 설명하겠습니다.

디렉토리1. 객체 분해 필요 3. 여러 속성 추출 5. 별칭 6. 동적 이름 속성 추출 8. destroy9. 일반적인 사용 사례10. 요약

1. 객체 분해가 필요합니다

객체의 일부 속성을 추출한다고 가정해 보겠습니다. ES2015 이전 환경에서는 다음 코드를 작성해야 합니다.

var hero = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};

var name     = hero.name;var realName = hero.realName;
name;     // => 'Batman',
realName; // => 'Bruce Wayne'

hero.name 속성 값이 name 변수에 할당됩니다. 동일한 hero.realName 값을 realName에 할당합니다.

속성에 액세스하고 이를 변수에 할당하는 이 방법에는 상용구 코드가 필요합니다. var name = Hero.name을 작성하면 동일한 realName에 대해 바인딩에서 name을 두 번 언급해야 합니다.

여기서 객체 구조 분해 구문이 유용합니다. 속성 이름을 반복하지 않고도 속성을 읽고 해당 값을 변수에 할당할 수 있습니다. 뿐만 아니라, 하나의 명령문에서 동일한 객체의 여러 속성을 읽을 수 있습니다!

위 스크립트를 리팩터링하고 객체 분해를 적용하여 name 및 realName 속성에 액세스해 보겠습니다.

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};

const { name, realName } = hero;
name;     // => 'Batman',
realName; // => 'Bruce Wayne'

const { name, realName } = Hero는 객체 파괴 및 할당입니다. 이 문은 변수 <code>name 및 realName을 정의한 다음 해당 속성 값 ​​hero.name 및 hero.realName에 할당합니다. 코드>에 해당합니다. <br><br>객체 속성에 액세스하는 두 가지 방법 비교: <br><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const name     = hero.name; const realName = hero.realName; // is equivalent to: const { name, realName } = hero;</pre><div class="contentsignin">로그인 후 복사</div></div> <br>보시다시피 속성 이름이나 객체 변수가 반복되지 않으므로 객체 분해가 더 편리합니다. <br><br>2. 속성 추출 <h2 id="객체-구조-분해의-기본-구문은-매우-간단합니다">객체 구조 분해의 기본 구문은 매우 간단합니다. </h2> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const { identifier } = expression;</pre><div class="contentsignin">로그인 후 복사</div></div> <p>여기서 <code>식별자는 액세스할 속성의 이름이고 표현식은 평가해야 합니다. 개체에. 소멸 후 변수 identifier에는 속성 값이 포함됩니다.

다음은 속성 접근자를 사용하는 동일한 코드입니다. hero.name值已分配给变量name。将相同的hero.realName值分配给realName。

这种访问属性并将其分配给变量的方法需要样板代码。通过编写var name = hero.name，您必须提及name两次绑定，对于相同realName。

这就是对象解构语法有用的地方：您可以读取属性并将其值分配给变量，而无需重复属性名称。不仅如此，您还可以在一个语句中读取同一对象的多个属性！

让我们重构上面的脚本，并应用对象分解来访问属性name和realName：

const identifier = expression.identifier;

const { name, realName } = hero是对象销毁分配。这个语句定义变量name和realName，然后分配给他们的属性值hero.name和hero.realNamecorrespondigly。

比较两种访问对象属性的方法：

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};

const { name } = hero;
name; // => 'Batman'

可以看到，由于属性名称和对象变量都没有重复，因此对象的分解更加方便。

2.提取属性

对象解构的基本语法非常简单：

const { identifier1, identifier2, ..., identifierN } = expression;

哪里identifier是要访问的属性名称，expression应评估为一个对象。销毁后，变量identifier包含属性值。

这是使用属性访问器的等效代码：

const identifier1 = expression.identifier1;
const identifier2 = expression.identifier2;
// ...
const identifierN = expression.identifierN;

让我们在实践中尝试对象分解：

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};

const { name, realName } = hero;
name;     // => 'Batman',
realName; // => 'Bruce Wayne'

该语句const { name } = hero定义变量name，并使用hero.nameproperty的值对其进行初始化。

3.提取多个属性

要将对象分解为多个属性，请枚举任意数量的属性，并,在之间添加逗号：

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};

const { enemies } = hero;
enemies;     // => undefined

其中identifier1，…identifierN是要访问的属性的名称，expression应评估为对象。销毁后，变量identifier1…identifierN包含相应的属性值。

这是等效的代码：

const { identifier = defaultValue } = expression;

让我们再次看一下第一部分中的示例，其中提取了2个属性：

const identifier = expression.identifier === undefined ? 
        defaultValue : expression.identifier;

const { name, realName } = hero创建2个变量name并realName分配相应属性hero.name和的值hero.realName。

4.默认值

如果已解构的对象不具有在解构分配中指定的属性，则将变量分配给undefined。让我们看看它是如何发生的：

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};

const { enemies = ['Joker'] } = hero;
enemies;     // => ['Joker']

解构后的变量enemies是undefined因为该属性enemies在对象中不存在hero。

幸运的是，如果该属性在解构对象中不存在，则可以设置默认值。基本语法如下：

const { identifier: aliasIdentifier } = expression;

哪里identifier是要访问的属性名称，expression应评估为一个对象。销毁后，变量identifier包含属性值，或者defaultValue如果identifier属性不存在则分配给变量。

这是等效的代码：

const aliasIdentifier = expression.identifier;

让我们更改先前的代码示例，并使用默认值功能：

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};

const { realName: secretName } = hero;
secretName; // => 'Bruce Wayne'

现在，undefined该变量enemies默认为，而不是['Joker']。

5.别名

如果要创建名称与属性不同的变量，则可以使用对象分解的别名功能。

const { nestedObjectProp: { identifier } } = expression;

identifier是要访问的属性的名称，aliasIdentifier是变量的名称，expression应评估为对象。销毁后，变量aliasIdentifier

const identifier = expression.nestedObjectProp.identifier;

실제로 객체 분해를 시도해 보겠습니다.

const { propA: { propB: { propC: { .... } } } } = object;

const { name } = Hero 문은 name 변수를 정의합니다. , <code>hero.name 속성 값으로 초기화합니다.

3. 여러 속성 추출 🎜🎜객체를 여러 속성으로 나누려면 원하는 만큼의 속성을 열거하고 , 사이에 쉼표를 추가하세요. 🎜

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne',
  address: {
    city: 'Gotham'
  }
};

// Object destructuring:
const { address: { city } } = hero;
city; // => 'Gotham'

🎜where identifier1 , .. . identifierN은 액세스할 속성의 이름이며 expression은 개체로 평가되어야 합니다. 소멸 후 변수 identifier1…identifierN에는 해당 속성 값이 포함됩니다. 🎜🎜동일한 코드는 다음과 같습니다. 🎜

const { [propName]: identifier } = expression;

🎜첫 번째 부분의 예를 다시 살펴보겠습니다. 여기서 2개의 속성이 추출됩니다. 🎜

const identifier = expression[propName];

🎜const { name, realName } = Hero 2개의 변수 만들기 name 및 realName에는 해당 속성인 hero.name과 hero.realName의 값이 할당됩니다. 🎜🎜4.Default 🎜🎜구조해제된 객체에 구조해제 할당에 지정된 속성이 없는 경우 변수는 정의되지 않음으로 할당됩니다. 어떻게되는지 봅시다: 🎜

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};

const prop = 'name';
const { [prop]: name } = hero;
name; // => 'Batman'

🎜구조해체된 변수 enemies는 enemies 속성이 hero 객체에 존재하지 않기 때문에 <code>정의되지 않았습니다입니다. . 🎜🎜 다행히 구조해제된 객체에 해당 속성이 존재하지 않는 경우에도 기본값을 설정할 수 있습니다. 기본 구문은 다음과 같습니다. 🎜

const { identifier, ...rest } = expression;

🎜여기서 identifier는 액세스할 속성의 이름이고 expression은 개체로 평가되어야 합니다. 소멸 후 변수 identifier에는 속성 값이 포함되며, identifier 속성이 없으면 defaultValue가 변수에 할당됩니다. 🎜🎜이것은 동등한 코드입니다: 🎜

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};

const { name, ...realHero } = hero;
realHero; // => { realName: 'Bruce Wayne' }

🎜 이전 코드 예제를 변경하고 기본값 함수를 사용하겠습니다: 🎜

// let
const hero = {
  name: 'Batman',
};

let { name } = hero;
name; // => 'Batman'

🎜 이제, enemiesdefault for 변수를 정의하지 않음합니다. ['조커'] 대신. 🎜🎜5. 별칭 🎜🎜 속성과 다른 이름을 가진 변수를 생성하려면 객체 분해의 별칭 기능을 사용할 수 있습니다. 🎜

// var
const hero = {
  name: 'Batman',
};

var { name } = hero;
name; // => 'Batman'

🎜identifier는 액세스할 속성의 이름이고, aliasIdentifier는 변수의 이름이며, expression은 객체로 평가되어야 합니다. . 소멸 후 변수 aliasIdentifier에는 속성 값이 포함됩니다. 🎜🎜동등한 코드: 🎜

// existing variable
let name;

const hero = {
  name: 'Batman',
};

({ name } = hero);
name; // => 'Batman'

🎜다음은 객체 분해 별칭 기능의 예입니다. 🎜

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};

const { realName: secretName } = hero;
secretName; // => 'Bruce Wayne'

看一下const { realName: secretName } = hero，解构定义了一个新变量secretName（别名变量），并为其分配了值hero.realName。

6.从嵌套对象中提取属性

在前面的示例中，对象很简单：属性具有原始数据类型（例如字符串）。

通常，对象可以嵌套在其他对象中。换句话说，某些属性可以包含对象。

在这种情况下，您仍然可以从深处使用对象分解和访问属性。基本语法如下：

const { nestedObjectProp: { identifier } } = expression;

nestedObjectProp是保存嵌套对象的属性的名称。identifier是要从嵌套对象访问的属性名称。expression应该评估变形后的对象。

销毁后，变量identifier包含嵌套对象的属性值。

上面的语法等效于：

const identifier = expression.nestedObjectProp.identifier;

您可以从中提取属性的嵌套级别不受限制。如果要从深处提取属性，只需添加更多嵌套的花括号：

const { propA: { propB: { propC: { .... } } } } = object;

例如，对象hero包含一个嵌套对象{ city: 'Gotham'}。

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne',
  address: {
    city: 'Gotham'
  }
};

// Object destructuring:
const { address: { city } } = hero;
city; // => 'Gotham'

通过对象解构，const { address: { city } } = hero您可以city从嵌套对象访问属性。

7.提取动态名称属性

您可以将具有动态名称的属性提取到变量中（属性名称在运行时是已知的）：

const { [propName]: identifier } = expression;

propNameexpression应该计算为属性名称（通常是字符串），并且identifier应该指示在解构之后创建的变量名称。第二个expression应该评估要分解的对象。

没有对象分解的等效代码：

const identifier = expression[propName];

让我们看一个prop包含属性名称的示例：

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};

const prop = 'name';
const { [prop]: name } = hero;
name; // => 'Batman'

const { [prop]: name } = hero是一个对象分解，将变量赋给namevalue hero[prop]，其中prop是一个保存属性名称的变量。

8.销毁后的物体

rest语法对于在解构之后收集其余属性很有用：

const { identifier, ...rest } = expression;

哪里identifier是要访问的属性名称，expression应评估为一个对象。

销毁后，变量identifier包含属性值。rest变量是具有其余属性的普通对象。

例如，让我们提取属性name，但保留其余属性：

const hero = {
  name: 'Batman',
  realName: 'Bruce Wayne'
};

const { name, ...realHero } = hero;
realHero; // => { realName: 'Bruce Wayne' }

破坏const { name, ...realHero } = hero提取财产name。

同时，剩余的属性（realName在这种情况下）被收集到变量realHero：中{ realName: 'Bruce Wayne' }。

9.常见用例

9.1将属性绑定到变量

如之前的许多示例所示，对象解构将属性值绑定到变量。

对象解构可以给变量赋值使用声明const，let和var。甚至分配给一个已经存在的变量。

例如，以下是使用let语句解构的方法：

// let
const hero = {
  name: 'Batman',
};

let { name } = hero;
name; // => 'Batman'

如何使用var语句来破坏结构：

// var
const hero = {
  name: 'Batman',
};

var { name } = hero;
name; // => 'Batman'

以及如何解构为已声明的变量：

// existing variable
let name;

const hero = {
  name: 'Batman',
};

({ name } = hero);
name; // => 'Batman'

我发现将for..of循环与对象解构相结合以立即提取属性是令人满意的：

const heroes = [
  { name: 'Batman' },
  { name: 'Joker' }
];

for (const { name } of heroes) {  console.log(name); // logs 'Batman', 'Joker'
}

9.2功能参数解构

通常，对象分解可以放置在发生分配的任何位置。

例如，您可以在函数的参数列表内破坏对象：

const heroes = [
  { name: 'Batman' },
  { name: 'Joker' }
];

const names = heroes.map(
  function({ name }) {    return name;
  }
);

names; // => ['Batman', 'Joker']

function({ name })解构函数参数，创建一个name保存name属性值的变量。

10.总结

对象解构是一项强大的功能，可让您从对象中提取属性并将这些值绑定到变量。

我特别喜欢对象分解的简洁语法和在一条语句中提取多个变量的能力。

希望我的帖子对您了解对象分解的有用！

위 내용은 마스터가 JavaScript에서 객체 구조 분해를 사용하는 방법을 요약합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!