더 좋은 점은 객체 구조 분해를 통해 단일 명령문에서 여러 속성을 추출할 수 있고, 중첩된 객체에서 속성에 액세스할 수 있으며, 속성이 존재하지 않는 경우 기본값을 설정할 수 있다는 것입니다.
1. 객체 분해가 필요합니다 객체의 일부 속성을 추출한다고 가정해 보겠습니다. ES2015 이전 환경에서는 다음 코드를 작성해야 합니다.디렉토리1. 객체 분해 필요3. 여러 속성 추출5. 별칭6. 동적 이름 속성 추출8. destroy9. 일반적인 사용 사례10. 요약
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는 객체 파괴 및 할당입니다. 이 문은 변수 name
및
realName
을 정의한 다음 해당 속성 값
hero.name
및
hero.realName에 할당합니다. 코드>에 해당합니다.
객체 속성에 액세스하는 두 가지 방법 비교:
const name = hero.name; const realName = hero.realName; // is equivalent to: const { name, realName } = hero;
로그인 후 복사
보시다시피 속성 이름이나 객체 변수가 반복되지 않으므로 객체 분해가 더 편리합니다.
2. 속성 추출 객체 구조 분해의 기본 구문은 매우 간단합니다.
const { identifier } = expression;
로그인 후 복사 여기서 식별자
는 액세스할 속성의 이름이고
표현식
은 평가해야 합니다. 개체에. 소멸 후 변수
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.realName
correspondigly。
比较两种访问对象属性的方法:
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.name
property的值对其进行初始化。
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 변수를 정의합니다. , 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 객체에 존재하지 않기 때문에 정의되지 않았습니다
입니다.. 다행히 구조해제된 객체에 해당 속성이 존재하지 않는 경우에도 기본값을 설정할 수 있습니다. 기본 구문은 다음과 같습니다.
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'
로그인 후 복사
로그인 후 복사
이제,
enemies
default 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;
로그인 후 복사
로그인 후 복사
propName
expression应该计算为属性名称(通常是字符串),并且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
是一个对象分解,将变量赋给name
valuehero[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 중국어 웹사이트의 기타 관련 기사를 참조하세요!