JavaScript의 객체 분해 유틸리티 설명서
29935 단어 es6beginnersjavascriptcodenewbie
Object는 여러 값을 복잡한 데이터 구조로 저장하는 데 사용됩니다.괄호({...}와 쉼표(, 기호로 구분된 하나 이상의 속성을 사용하여 객체를 만듭니다.각 속성은 콜론: 기호로 구분된 키 값 쌍입니다.키는 문자열 또는 JavaScript 기호 유형이어야 합니다.이 값은 다른 객체를 포함하여 모든 유형이 될 수 있습니다.다음은 여섯 개의 속성을 가진 대상의 예이다.
name키의 값은 문자열 형식이고 age키와 std키의 숫자입니다.subjects 키 값은 하나의 그룹입니다.parents 및 address의 값이 대상입니다.const student = {
'name': 'John Williamson',
'age': 9,
'std': 3,
'subjects': ['Maths', 'English', 'EVS'],
'parents': {
'father': 'Brown Williamson',
'mother': 'Sophia',
'email': '[email protected]'
},
'address': {
'street': '65/2, brooklyn road',
'city': 'Carterton',
'country': 'New Zealand',
'zip': 5791
}
}
student 대상을 사용할 것입니다.개체 분해
우리는 데이터를 대상에 저장하여 나중에 필요에 따라 데이터를 검색할 수 있도록 한다.예를 들어, name 객체에서 city 및 student 정보를 검색하려면 다음을 수행할 수 있습니다.
const name = student.name;
const city = student.address.city;
console.log(name, city); // John Williamson Carterton
그것은 일을 할 수 있지만, 더 많은 일이 필요하다.우선, 우리는 점 (. 기호를 사용하여 이 값에 접근한다.우리는 상응하는 값을 분배하기 위해 몇 개의 변수를 성명해야 한다.Object Destructuring 구문을 사용하여 JavaScript 객체의 값 검색을 단순화할 수 있습니다.EcmaScript 버전 6(ES6)에 도입된 새로운 구문입니다.이것은 대상 속성에서 값을 검색하고 변수에 분배하는 데 도움이 된다.
객체 분해를 사용하여 name 객체 검색student 속성 값의 표현식은 다음과 같습니다.
const {name} = student;
console.log(name); // John Williamson
표현식의 왼쪽에서, 우리는 대상 속성 키 (이 예에서 name 를 사용하여 {} 에 놓았다.또한 속성 값을 저장하는 변수 이름이 됩니다.우리는 변수 범위를 정의하기 위해 const, let 키워드를 언급했다.별도의 변수 성명은 필요 없다.
표현식의 오른쪽에서 우리는 실제 대상을 사용하여 값을 검색한다.
그렇다면, 우리는 어떻게 대상 분해를 사용하여 여러 개의 속성 값을 검색합니까?우리는 표현식 왼쪽 {} 에 대상 키를 추가해 왔다.아래의 예에서 우리는 대상 분해 문법을 사용하여 name 대상 검색age, std과 student 정보를 검색한다.
const {name, age, std} = student;
console.log(name, age, std); // John Williamson 9 3
너는 우리가 여기에 몇 줄의 코드를 더 쓸 필요가 없다는 것을 알아차렸니?
기본값이 있는 새 변수 추가
우리는 대상 분해가 새로운 문법을 사용하여 속성 값 검색을 간소화하는 것을 이미 보았다.하지만 그뿐만이 아니다.우리는 해체할 때 새로운 변수를 추가할 수 있으며 기본값을 선택할 수 있습니다.다음 예에서 meal 변수는 student 대상에 존재하지 않습니다.그러나 객체 분해 표현식에 추가하고 기본값을 추가할 수 있습니다.
const {name, std, meal='bread'} = student;
console.log(meal); // bread
그렇지 않으면, 당신은 어떻게 같은 목표를 실현합니까?다음은 조건을 확인하고 분배해야 할 예비 코드입니다.
let meal = student.meal ? student.meal : 'bread';
계산값이 있는 새 변수
위의 예에서 우리는 새로운 변수를 만들고 상수 값 (bread 을 지정했다.우리는 또 하나의 값을 지정할 수 있는데, 이 값은 같은 대상의 다른 해체 변수에서 계산된 것이다.
다음은 하나의 예입니다. numberOfSubjects 라는 새로운 변수를 추가했고, 다른 속성을 사용하는 subjects 값으로 계산된 값을 지정했습니다.
const {subjects, numberOfSubjects=subjects.length} = student;
console.log(numberOfSubjects); // 3
분해 구조를 사용하여 별칭 추가
우리는 해체 변수에 별명을 붙일 수 있다.변수 이름이 충돌할 수 있을 때, 그것은 매우 유용하다.
다음 예에서 우리는 속성의 별명std을 standard으로 지정했다.
const {std: standard} = student;
console.log(standard); // 3
여기는 좀 주의해야 한다.만약 우리가 별명을 분배한 후에 접근 std 변수를 시도한다면, 우리는 ReferenceError 문장 std is not defined 을 얻을 것이다.따라서 앨리어스를 만든 후에는 앨리어스를 사용하여 속성 값에 액세스할 수 있습니다.
내포된 객체 분해
내포된 객체는 하나 이상의 특성 값을 객체로 사용합니다.본고에서 사용한student 대상은 끼워 넣는 대상이다.그것은 두 가지 속성이 있는데 address과 parents는 대상 값을 가지고 있다.
const student = {
.....
'parents': {
'father': 'Brown Williamson',
'mother': 'Sophia',
'email': '[email protected]'
},
'address': {
'street': '65/2, brooklyn road',
'city': 'Carterton',
'country': 'New Zealand',
'zip': 5791
}
.....
}
지금까지 우리는 비 대상 키 값을 검색하는 예시를 보았다.우리는 차원 구조에서 깊이 있게 끼워 넣을 수 있으며, 해구를 사용하여 어떠한 깊이에서 대상의 키 값을 검색할 수 있다.다음 예에서 우리는 zip 대상의 address 속성에서 student 값을 검색했다.
우리는 address 키의 값을 검색하는 방법을 알고 있습니다.
const {address} = student;
다음은 콘솔에 기록된 변수의 출력입니다.
그러나 우리는 address값에 관심이 있기 때문에 우리는 한 걸음 한 걸음 도착하기를 바란다.해체를 사용하자.
const {address : {zip}} = student;
console.log(zip); // 5791
너는 어떠한 이런 깊이까지 갈 수 있다.검색할 값에 도달할 때까지 항상 맨 위에서 시작하여 차원 구조에서 아래로 내려가야 합니다.
함수 매개 변수를 분해하다
우리는 대상의 분해와 전달을 함수 매개 변수로 사용하여 정확하고 스마트한 코드를 작성할 수 있다.우리는 하나의 예로 그것을 이해합시다.통상적인 학생 대상은,
const student = {
'name': 'John Williamson',
'age': 9,
'std': 3,
'subjects': ['Maths', 'English', 'EVS'],
'parents': {
'father': 'Brown Williamson',
'mother': 'Sophia',
'email': '[email protected]'
},
'address': {
'street': '65/2, brooklyn road',
'city': 'Carterton',
'country': 'New Zealand',
'zip': 5791
}
}
가령 우리가 학생의 학부모에게 이메일을 보낼 수 있는 함수가 하나 있다면 (주의, zip 속성 아래에 email 속성이 하나 있다.이 함수는 성공적으로 발송된 전자메일의 성명도 기록합니다.
따라서 다음과 같은 함수를 호출할 수 있습니다.
sendEmail(student);
우리는 해구를 사용하여 parents 값을 함수 정의에 전달할 수 있다.전체 email 대상을 전달하고 함수에서 필요한 값을 검색할 필요가 없습니다.
const sendEmail = ({parents: {email}}) => {
console.log(`Sent email to ${email}`);
}
우리는 이미 상기 함수에서 삽입 대상 분해를 실행하여 검색 student 값을 하였음을 주의하십시오.
해구 함수 반환값
JavaScript에서 함수는 객체를 반환합니다.우리가 이 함수를 호출할 때, 우리는 전체 대상에 대해 흥미를 느끼지 않고, 특정한 속성 값에 대해 흥미를 느낄 수 있다.이것은 대상 분해를 사용하는 또 다른 기회다.
다음 예에서는 함수email가 객체를 반환합니다.
const getStudent = () => {
return {
'name': 'John Williamson',
'age': 9,
'std': 3,
'subjects': ['Maths', 'English', 'EVS'],
'parents': {
'father': 'Brown Williamson',
'mother': 'Sophia',
'email': '[email protected]'
},
'address': {
'street': '65/2, brooklyn road',
'city': 'Carterton',
'country': 'New Zealand',
'zip': 5791
}
}
}
우리는 이름과 테마 키 값에만 관심이 있습니다.우리는 해체 표현식으로 그것들을 검색할 수 있다.
const { name, subjects } = getStudent();
console.log(name, subjects);
출력,
루프에서 구조 분해
우리가 순환 중인 대상 키 값을 필요로 할 때, 대상 해체는 매우 편리하다.우리는 간단한 문법으로 getStudent 순환을 해체할 수 있다.우리 한 조의 학생들을 봅시다.간단하게 보기 위해서, 모든 학생은 두 개의 속성,name와grade만 있습니다.
const students = [
{
'name': 'William',
'grade': 'A'
},
{
'name': 'Tom',
'grade': 'A+'
},
{
'name': 'Bob',
'grade': 'B'
}
];
현재, 우리는 for-of 순환을 사용하여 for-of 그룹을 교체하고, 각student 대상에서 값을 검색할 것입니다.이를 위해서는 대상 분해를 사용할 수 있고,
for(let {name, grade} of students){
console.log(`${name} has got the grade ${grade}`);
}
출력,
동적 이름 속성을 사용하여 구성 해제
많은 경우, 대상 속성의 키를 미리 모를 수도 있습니다.코드가 실행될 때만 알 수 있습니다.이러한 경우, 대상 분해 검색 값을 하드코딩 키 이름으로 사용할 수 없습니다.
예를 들어 우리는 함수students를 사용하는데 이 함수는 키를 매개 변수로 하고 대상에서 상응하는 값을 되돌려준다.
getStudentInfo('name'); // Returns, John Williamson
getStudentInfo('age'); // Returns, 9
함수getStudentInfo에 전달되는 매개 변수는 동적이다.따라서 getStudentInfo 동적 키와 함께 사용하려면, 키를 괄호 object destructuring 로 묶어야 한다.
const getStudentInfo = key => {
const {[key]: value} = student;
return value;
}
상기 코드의 네모난 괄호를 생략하면 [...] 값을 얻을 수 있다.
대상 분해에 관한 몇 가지 기교
객체 구문은 JavaScript 프로그래밍 언어의 흥미로운 부분입니다.지금까지 JavaScript를 사용하여 일상적인 프로그래밍을 할 때 JavaScript가 많이 사용될 수 있음을 보았습니다.다음은 당신이 유용하다고 느낄 수 있는 조언들입니다.
const name = student.name;
const city = student.address.city;
console.log(name, city); // John Williamson Carterton
const {name} = student;
console.log(name); // John Williamson
const {name, age, std} = student;
console.log(name, age, std); // John Williamson 9 3
우리는 대상 분해가 새로운 문법을 사용하여 속성 값 검색을 간소화하는 것을 이미 보았다.하지만 그뿐만이 아니다.우리는 해체할 때 새로운 변수를 추가할 수 있으며 기본값을 선택할 수 있습니다.다음 예에서
meal 변수는 student 대상에 존재하지 않습니다.그러나 객체 분해 표현식에 추가하고 기본값을 추가할 수 있습니다.const {name, std, meal='bread'} = student;
console.log(meal); // bread
let meal = student.meal ? student.meal : 'bread';
계산값이 있는 새 변수
위의 예에서 우리는 새로운 변수를 만들고 상수 값 (
bread 을 지정했다.우리는 또 하나의 값을 지정할 수 있는데, 이 값은 같은 대상의 다른 해체 변수에서 계산된 것이다.다음은 하나의 예입니다.
numberOfSubjects 라는 새로운 변수를 추가했고, 다른 속성을 사용하는 subjects 값으로 계산된 값을 지정했습니다.const {subjects, numberOfSubjects=subjects.length} = student;
console.log(numberOfSubjects); // 3
분해 구조를 사용하여 별칭 추가
우리는 해체 변수에 별명을 붙일 수 있다.변수 이름이 충돌할 수 있을 때, 그것은 매우 유용하다.
다음 예에서 우리는 속성의 별명std을 standard으로 지정했다.
const {std: standard} = student;
console.log(standard); // 3
여기는 좀 주의해야 한다.만약 우리가 별명을 분배한 후에 접근 std 변수를 시도한다면, 우리는 ReferenceError 문장 std is not defined 을 얻을 것이다.따라서 앨리어스를 만든 후에는 앨리어스를 사용하여 속성 값에 액세스할 수 있습니다.
내포된 객체 분해
내포된 객체는 하나 이상의 특성 값을 객체로 사용합니다.본고에서 사용한student 대상은 끼워 넣는 대상이다.그것은 두 가지 속성이 있는데 address과 parents는 대상 값을 가지고 있다.
const student = {
.....
'parents': {
'father': 'Brown Williamson',
'mother': 'Sophia',
'email': '[email protected]'
},
'address': {
'street': '65/2, brooklyn road',
'city': 'Carterton',
'country': 'New Zealand',
'zip': 5791
}
.....
}
지금까지 우리는 비 대상 키 값을 검색하는 예시를 보았다.우리는 차원 구조에서 깊이 있게 끼워 넣을 수 있으며, 해구를 사용하여 어떠한 깊이에서 대상의 키 값을 검색할 수 있다.다음 예에서 우리는 zip 대상의 address 속성에서 student 값을 검색했다.
우리는 address 키의 값을 검색하는 방법을 알고 있습니다.
const {address} = student;
다음은 콘솔에 기록된 변수의 출력입니다.
그러나 우리는 address값에 관심이 있기 때문에 우리는 한 걸음 한 걸음 도착하기를 바란다.해체를 사용하자.
const {address : {zip}} = student;
console.log(zip); // 5791
너는 어떠한 이런 깊이까지 갈 수 있다.검색할 값에 도달할 때까지 항상 맨 위에서 시작하여 차원 구조에서 아래로 내려가야 합니다.
함수 매개 변수를 분해하다
우리는 대상의 분해와 전달을 함수 매개 변수로 사용하여 정확하고 스마트한 코드를 작성할 수 있다.우리는 하나의 예로 그것을 이해합시다.통상적인 학생 대상은,
const student = {
'name': 'John Williamson',
'age': 9,
'std': 3,
'subjects': ['Maths', 'English', 'EVS'],
'parents': {
'father': 'Brown Williamson',
'mother': 'Sophia',
'email': '[email protected]'
},
'address': {
'street': '65/2, brooklyn road',
'city': 'Carterton',
'country': 'New Zealand',
'zip': 5791
}
}
가령 우리가 학생의 학부모에게 이메일을 보낼 수 있는 함수가 하나 있다면 (주의, zip 속성 아래에 email 속성이 하나 있다.이 함수는 성공적으로 발송된 전자메일의 성명도 기록합니다.
따라서 다음과 같은 함수를 호출할 수 있습니다.
sendEmail(student);
우리는 해구를 사용하여 parents 값을 함수 정의에 전달할 수 있다.전체 email 대상을 전달하고 함수에서 필요한 값을 검색할 필요가 없습니다.
const sendEmail = ({parents: {email}}) => {
console.log(`Sent email to ${email}`);
}
우리는 이미 상기 함수에서 삽입 대상 분해를 실행하여 검색 student 값을 하였음을 주의하십시오.
해구 함수 반환값
JavaScript에서 함수는 객체를 반환합니다.우리가 이 함수를 호출할 때, 우리는 전체 대상에 대해 흥미를 느끼지 않고, 특정한 속성 값에 대해 흥미를 느낄 수 있다.이것은 대상 분해를 사용하는 또 다른 기회다.
다음 예에서는 함수email가 객체를 반환합니다.
const getStudent = () => {
return {
'name': 'John Williamson',
'age': 9,
'std': 3,
'subjects': ['Maths', 'English', 'EVS'],
'parents': {
'father': 'Brown Williamson',
'mother': 'Sophia',
'email': '[email protected]'
},
'address': {
'street': '65/2, brooklyn road',
'city': 'Carterton',
'country': 'New Zealand',
'zip': 5791
}
}
}
우리는 이름과 테마 키 값에만 관심이 있습니다.우리는 해체 표현식으로 그것들을 검색할 수 있다.
const { name, subjects } = getStudent();
console.log(name, subjects);
출력,
루프에서 구조 분해
우리가 순환 중인 대상 키 값을 필요로 할 때, 대상 해체는 매우 편리하다.우리는 간단한 문법으로 getStudent 순환을 해체할 수 있다.우리 한 조의 학생들을 봅시다.간단하게 보기 위해서, 모든 학생은 두 개의 속성,name와grade만 있습니다.
const students = [
{
'name': 'William',
'grade': 'A'
},
{
'name': 'Tom',
'grade': 'A+'
},
{
'name': 'Bob',
'grade': 'B'
}
];
현재, 우리는 for-of 순환을 사용하여 for-of 그룹을 교체하고, 각student 대상에서 값을 검색할 것입니다.이를 위해서는 대상 분해를 사용할 수 있고,
for(let {name, grade} of students){
console.log(`${name} has got the grade ${grade}`);
}
출력,
동적 이름 속성을 사용하여 구성 해제
많은 경우, 대상 속성의 키를 미리 모를 수도 있습니다.코드가 실행될 때만 알 수 있습니다.이러한 경우, 대상 분해 검색 값을 하드코딩 키 이름으로 사용할 수 없습니다.
예를 들어 우리는 함수students를 사용하는데 이 함수는 키를 매개 변수로 하고 대상에서 상응하는 값을 되돌려준다.
getStudentInfo('name'); // Returns, John Williamson
getStudentInfo('age'); // Returns, 9
함수getStudentInfo에 전달되는 매개 변수는 동적이다.따라서 getStudentInfo 동적 키와 함께 사용하려면, 키를 괄호 object destructuring 로 묶어야 한다.
const getStudentInfo = key => {
const {[key]: value} = student;
return value;
}
상기 코드의 네모난 괄호를 생략하면 [...] 값을 얻을 수 있다.
대상 분해에 관한 몇 가지 기교
객체 구문은 JavaScript 프로그래밍 언어의 흥미로운 부분입니다.지금까지 JavaScript를 사용하여 일상적인 프로그래밍을 할 때 JavaScript가 많이 사용될 수 있음을 보았습니다.다음은 당신이 유용하다고 느낄 수 있는 조언들입니다.
const {std: standard} = student;
console.log(standard); // 3
내포된 객체는 하나 이상의 특성 값을 객체로 사용합니다.본고에서 사용한
student 대상은 끼워 넣는 대상이다.그것은 두 가지 속성이 있는데 address과 parents는 대상 값을 가지고 있다.const student = {
.....
'parents': {
'father': 'Brown Williamson',
'mother': 'Sophia',
'email': '[email protected]'
},
'address': {
'street': '65/2, brooklyn road',
'city': 'Carterton',
'country': 'New Zealand',
'zip': 5791
}
.....
}
zip 대상의 address 속성에서 student 값을 검색했다.우리는
address 키의 값을 검색하는 방법을 알고 있습니다.const {address} = student;
그러나 우리는
address값에 관심이 있기 때문에 우리는 한 걸음 한 걸음 도착하기를 바란다.해체를 사용하자.const {address : {zip}} = student;
console.log(zip); // 5791
함수 매개 변수를 분해하다
우리는 대상의 분해와 전달을 함수 매개 변수로 사용하여 정확하고 스마트한 코드를 작성할 수 있다.우리는 하나의 예로 그것을 이해합시다.통상적인 학생 대상은,
const student = {
'name': 'John Williamson',
'age': 9,
'std': 3,
'subjects': ['Maths', 'English', 'EVS'],
'parents': {
'father': 'Brown Williamson',
'mother': 'Sophia',
'email': '[email protected]'
},
'address': {
'street': '65/2, brooklyn road',
'city': 'Carterton',
'country': 'New Zealand',
'zip': 5791
}
}
가령 우리가 학생의 학부모에게 이메일을 보낼 수 있는 함수가 하나 있다면 (주의, zip 속성 아래에 email 속성이 하나 있다.이 함수는 성공적으로 발송된 전자메일의 성명도 기록합니다.
따라서 다음과 같은 함수를 호출할 수 있습니다.
sendEmail(student);
우리는 해구를 사용하여 parents 값을 함수 정의에 전달할 수 있다.전체 email 대상을 전달하고 함수에서 필요한 값을 검색할 필요가 없습니다.
const sendEmail = ({parents: {email}}) => {
console.log(`Sent email to ${email}`);
}
우리는 이미 상기 함수에서 삽입 대상 분해를 실행하여 검색 student 값을 하였음을 주의하십시오.
해구 함수 반환값
JavaScript에서 함수는 객체를 반환합니다.우리가 이 함수를 호출할 때, 우리는 전체 대상에 대해 흥미를 느끼지 않고, 특정한 속성 값에 대해 흥미를 느낄 수 있다.이것은 대상 분해를 사용하는 또 다른 기회다.
다음 예에서는 함수email가 객체를 반환합니다.
const getStudent = () => {
return {
'name': 'John Williamson',
'age': 9,
'std': 3,
'subjects': ['Maths', 'English', 'EVS'],
'parents': {
'father': 'Brown Williamson',
'mother': 'Sophia',
'email': '[email protected]'
},
'address': {
'street': '65/2, brooklyn road',
'city': 'Carterton',
'country': 'New Zealand',
'zip': 5791
}
}
}
우리는 이름과 테마 키 값에만 관심이 있습니다.우리는 해체 표현식으로 그것들을 검색할 수 있다.
const { name, subjects } = getStudent();
console.log(name, subjects);
출력,
루프에서 구조 분해
우리가 순환 중인 대상 키 값을 필요로 할 때, 대상 해체는 매우 편리하다.우리는 간단한 문법으로 getStudent 순환을 해체할 수 있다.우리 한 조의 학생들을 봅시다.간단하게 보기 위해서, 모든 학생은 두 개의 속성,name와grade만 있습니다.
const students = [
{
'name': 'William',
'grade': 'A'
},
{
'name': 'Tom',
'grade': 'A+'
},
{
'name': 'Bob',
'grade': 'B'
}
];
현재, 우리는 for-of 순환을 사용하여 for-of 그룹을 교체하고, 각student 대상에서 값을 검색할 것입니다.이를 위해서는 대상 분해를 사용할 수 있고,
for(let {name, grade} of students){
console.log(`${name} has got the grade ${grade}`);
}
출력,
동적 이름 속성을 사용하여 구성 해제
많은 경우, 대상 속성의 키를 미리 모를 수도 있습니다.코드가 실행될 때만 알 수 있습니다.이러한 경우, 대상 분해 검색 값을 하드코딩 키 이름으로 사용할 수 없습니다.
예를 들어 우리는 함수students를 사용하는데 이 함수는 키를 매개 변수로 하고 대상에서 상응하는 값을 되돌려준다.
getStudentInfo('name'); // Returns, John Williamson
getStudentInfo('age'); // Returns, 9
함수getStudentInfo에 전달되는 매개 변수는 동적이다.따라서 getStudentInfo 동적 키와 함께 사용하려면, 키를 괄호 object destructuring 로 묶어야 한다.
const getStudentInfo = key => {
const {[key]: value} = student;
return value;
}
상기 코드의 네모난 괄호를 생략하면 [...] 값을 얻을 수 있다.
대상 분해에 관한 몇 가지 기교
객체 구문은 JavaScript 프로그래밍 언어의 흥미로운 부분입니다.지금까지 JavaScript를 사용하여 일상적인 프로그래밍을 할 때 JavaScript가 많이 사용될 수 있음을 보았습니다.다음은 당신이 유용하다고 느낄 수 있는 조언들입니다.
const student = {
'name': 'John Williamson',
'age': 9,
'std': 3,
'subjects': ['Maths', 'English', 'EVS'],
'parents': {
'father': 'Brown Williamson',
'mother': 'Sophia',
'email': '[email protected]'
},
'address': {
'street': '65/2, brooklyn road',
'city': 'Carterton',
'country': 'New Zealand',
'zip': 5791
}
}
sendEmail(student);
const sendEmail = ({parents: {email}}) => {
console.log(`Sent email to ${email}`);
}
JavaScript에서 함수는 객체를 반환합니다.우리가 이 함수를 호출할 때, 우리는 전체 대상에 대해 흥미를 느끼지 않고, 특정한 속성 값에 대해 흥미를 느낄 수 있다.이것은 대상 분해를 사용하는 또 다른 기회다.
다음 예에서는 함수
email가 객체를 반환합니다.const getStudent = () => {
return {
'name': 'John Williamson',
'age': 9,
'std': 3,
'subjects': ['Maths', 'English', 'EVS'],
'parents': {
'father': 'Brown Williamson',
'mother': 'Sophia',
'email': '[email protected]'
},
'address': {
'street': '65/2, brooklyn road',
'city': 'Carterton',
'country': 'New Zealand',
'zip': 5791
}
}
}
const { name, subjects } = getStudent();
console.log(name, subjects);
루프에서 구조 분해
우리가 순환 중인 대상 키 값을 필요로 할 때, 대상 해체는 매우 편리하다.우리는 간단한 문법으로 getStudent 순환을 해체할 수 있다.우리 한 조의 학생들을 봅시다.간단하게 보기 위해서, 모든 학생은 두 개의 속성,name와grade만 있습니다.
const students = [
{
'name': 'William',
'grade': 'A'
},
{
'name': 'Tom',
'grade': 'A+'
},
{
'name': 'Bob',
'grade': 'B'
}
];
현재, 우리는 for-of 순환을 사용하여 for-of 그룹을 교체하고, 각student 대상에서 값을 검색할 것입니다.이를 위해서는 대상 분해를 사용할 수 있고,
for(let {name, grade} of students){
console.log(`${name} has got the grade ${grade}`);
}
출력,
동적 이름 속성을 사용하여 구성 해제
많은 경우, 대상 속성의 키를 미리 모를 수도 있습니다.코드가 실행될 때만 알 수 있습니다.이러한 경우, 대상 분해 검색 값을 하드코딩 키 이름으로 사용할 수 없습니다.
예를 들어 우리는 함수students를 사용하는데 이 함수는 키를 매개 변수로 하고 대상에서 상응하는 값을 되돌려준다.
getStudentInfo('name'); // Returns, John Williamson
getStudentInfo('age'); // Returns, 9
함수getStudentInfo에 전달되는 매개 변수는 동적이다.따라서 getStudentInfo 동적 키와 함께 사용하려면, 키를 괄호 object destructuring 로 묶어야 한다.
const getStudentInfo = key => {
const {[key]: value} = student;
return value;
}
상기 코드의 네모난 괄호를 생략하면 [...] 값을 얻을 수 있다.
대상 분해에 관한 몇 가지 기교
객체 구문은 JavaScript 프로그래밍 언어의 흥미로운 부분입니다.지금까지 JavaScript를 사용하여 일상적인 프로그래밍을 할 때 JavaScript가 많이 사용될 수 있음을 보았습니다.다음은 당신이 유용하다고 느낄 수 있는 조언들입니다.
const students = [
{
'name': 'William',
'grade': 'A'
},
{
'name': 'Tom',
'grade': 'A+'
},
{
'name': 'Bob',
'grade': 'B'
}
];
for(let {name, grade} of students){
console.log(`${name} has got the grade ${grade}`);
}
많은 경우, 대상 속성의 키를 미리 모를 수도 있습니다.코드가 실행될 때만 알 수 있습니다.이러한 경우, 대상 분해 검색 값을 하드코딩 키 이름으로 사용할 수 없습니다.
예를 들어 우리는 함수
students를 사용하는데 이 함수는 키를 매개 변수로 하고 대상에서 상응하는 값을 되돌려준다.getStudentInfo('name'); // Returns, John Williamson
getStudentInfo('age'); // Returns, 9
getStudentInfo에 전달되는 매개 변수는 동적이다.따라서 getStudentInfo 동적 키와 함께 사용하려면, 키를 괄호 object destructuring 로 묶어야 한다.const getStudentInfo = key => {
const {[key]: value} = student;
return value;
}
[...] 값을 얻을 수 있다.대상 분해에 관한 몇 가지 기교
객체 구문은 JavaScript 프로그래밍 언어의 흥미로운 부분입니다.지금까지 JavaScript를 사용하여 일상적인 프로그래밍을 할 때 JavaScript가 많이 사용될 수 있음을 보았습니다.다음은 당신이 유용하다고 느낄 수 있는 조언들입니다.
undefined,let 키워드는 대상 해구 문법에서 중요한 역할을 한다.코드 문법에서 그것들을 생략하면 오류가 발생할 것이다. const // Don't do this
{name} = student; // Uncaught SyntaxError: Unexpected token '='
let name;
{name} = student; // Uncaught SyntaxError: Unexpected token '='
Uncaught SyntaxError: Unexpected token '=', let 키워드를 생략해야 한다면 괄호 안에 해구 표현식을 넣어야 합니다(const. let name;
({ name } = student);
console.log(name); // John Williamson
👋 당신은
(...)에 대해 또 다른 문제가 있습니까?당신은 이 화제에 관한 1-1 회의를 찾고 있습니까?너는 나에게 연락해서 이야기를 나누거나 전화를 할 수 있다.Hire the Author를 통해 가용성을 문의하십시오.자네가 더 좋아할지도 모르지만,
Reference
이 문제에 관하여(JavaScript의 객체 분해 유틸리티 설명서), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/atapas/a-practical-guide-to-object-destructuring-in-javascript-4lc1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
