오늘의 javascript 칼럼에서는 ES6의 Javascript 해체를 소개합니다.

ES6의 구조 분해 기능을 사용하면 객체(Object)나 배열(Array)에서 값을 얻는 것이 더 편리해지고, 작성된 코드도 더 읽기 쉬워집니다. 이전에 Python 언어를 접해본 친구들은 이 기능이 이미 Python에 구현되어 있다는 사실에 익숙할 것입니다. Python에서는 다음 코드를 사용하여 값을 얻을 수 있습니다

lst = [3, 5]
first, second = lst 
print(first, second)复制代码

두 변수 first와 second는 각각 배열의 3과 5에 할당됩니다. 매우 간단하고 명확하지 않습니까?

이 기능을 사용할 수 있기 전에는 일반적으로 객체나 배열에서 값을 어떻게 얻었습니까? 다음 코드를 살펴보겠습니다.

let list = [3, 5]let first = list[0]let second = list[1]复制代码

이 방법에서는 지정한 변수에 해당 값을 할당하기 위해 배열 인덱스를 수동으로 지정해야 합니다. ES6의 구조 분해 기능을 사용하면 코드가 더 간단해지고 읽기 쉬워집니다.

let [first, second] = list;复制代码

Destructuring of object

기본 객체 구조 분해

먼저 ES6에서 기본 객체 구조 분해를 작성하는 방법을 살펴보겠습니다.

const family = {	father: ''
	mother: ''}const { father, mother } = family;复制代码

우리는 가족 개체에서 아버지와 어머니라는 두 가지 속성을 분해하여 별도로 정의된 아버지와 어머니 개체에 할당했습니다. 이후에는 father, mother 변수를 통해 Family 내 해당 키의 값을 직접 얻을 수 있습니다. 이 예는 객체 구조 분해의 가장 간단한 적용입니다. 더 흥미로운 것들을 살펴보겠습니다.

선언되지 않은 객체 파괴

위의 예에서는 먼저 패밀리 객체를 선언한 다음 구조 분해 구문을 통해 값을 얻습니다. 따라서 선언하지 않아도 괜찮습니다.

const { father, mother } =  {father: '',mother: ''}复制代码

사실 어떤 경우에는 객체를 선언하거나 객체를 변수에 할당한 다음 해체할 필요가 없습니다. 선언되지 않은 객체를 직접 분해할 수 있는 경우가 많습니다.

객체를 해체하고 변수 이름을 바꿉니다

다음과 같이 객체의 속성을 해체하고 이름을 바꿀 수도 있습니다.

const { father: f, mother:m } =  {father: '1',mother: '2'}console.log(f); // '1'复制代码

위 코드에서 객체의 아버지가 해체된 후 변수에 다시 할당됩니다. f는 이전 예와 비교할 때 아버지 변수의 이름을 f로 바꾸는 것과 동일합니다. 그런 다음 f를 사용하여 작업을 계속할 수 있습니다.

기본값 해체

가족 개체가 백그라운드에서 반환되는 시나리오를 상상해 보세요. 원래 가족 개체는 아버지, 어머니, 자식이라는 세 가지 속성을 갖는 데 동의했습니다. 반환된 데이터를 얻고 다음 세 가지 속성을 분해합니다.

const { father, mother, child } =  {father: '1',mother: '2', child: '3'}复制代码

이는 문제가 없는 것처럼 보이지만 현실은 항상 만족스럽지 않습니다. 배후에 있는 코드의 버그로 인해 반환된 가족 개체에는 어머니와 자식만 포함되어 있고 아버지는 없습니다. 이때 위 코드를 분해한 후 father는 정의되지 않게 됩니다.

const { father, mother, child } =  {father: '1',mother: '2'}console.log(child) //undefined复制代码

백그라운드에서 특정 속성이 누락된 경우 기본값을 분해하고 싶을 때가 많습니다. 실제로 다음과 같이 작성할 수 있습니다.

const { father = '1', mother = '2', child = '3'} =  {father: '1',mother: '2'}console.log(child) //'3'复制代码

이전 예와 결합하여 변수 이름을 변경하고 기본값을 할당할 수 있습니다.

const { father: f = '1', mother: m = '2', child: c = '3'} =  {father: '1',mother: '2'}复制代码

함수 매개변수의 구조화

const family = {	father: ''
	mother: ''}function log({father}){	console.log(father)
}
log(family)复制代码

함수 매개변수에서 다음을 사용합니다. 구조 분해 방법을 사용하면 들어오고 나가는 객체의 속성 값을 직접 가져오려면 이전처럼 family.father를 사용하여 전달할 필요가 없습니다.

중첩된 개체 해체

위의 예에서 family의 속성은 하나의 수준만 가집니다. family의 일부 속성 값도 개체 또는 배열인 경우 이러한 중첩된 개체의 속성 값을 해체하는 방법은 무엇입니까? 다음 코드를 살펴보겠습니다.

const family = {	father: 'mike'
	mother: [{		name: 'mary'
	}]
}const { father, mother: [{	name:motherName
}]} = family;console.log(father); //'mike'console.log(motherName) //'mary'复制代码

배열의 구조 분해

배열의 구조 분해 방법은 사실 객체의 구조 분해 방법과 매우 유사합니다. 글 초반에도 간략하게 언급했지만 몇 가지를 살펴보겠습니다. 배열 구조 분해의 일반적인 시나리오.

기본 객체 분해

const car = ['AUDI', 'BMW'];const [audi, bmw] = car;console.log(audi); // "AUDI"console.log(bmw); // "BMW"复制代码

배열의 위치에 대응하는 한 해당 값은 올바르게 분해될 수 있습니다.

기본값 구조 해제

객체 구조 해제의 기본값 시나리오와 동일합니다. 비즈니스 요구 사항을 충족하기 위해 배열을 구조 해제할 때 기본값을 추가해야 하는 경우도 많습니다.

const car = ['AUDI', 'BMW'];const [audi, bmw, benz = 'BENZ'] = car;console.log(benz); // "BENZ"复制代码

해체에서 변수 교환

다음 두 변수가 있다고 가정합니다.

let car1 = 'bmw';let car2 = 'audi'复制代码

이 두 변수를 교환하려는 경우 이전 접근 방식은 다음과 같습니다.

let temp = car1;
car1 = car2;
car2 = temp;复制代码

이를 달성하려면 중간 변수를 사용해야 합니다. 그러면 배열 구조 분해를 사용하는 것이 훨씬 간단합니다.

let car1 = 'bmw';let car2 = 'audi'[car2, car1] = [car1, car2]console.log(car1); // 'audi'console.log(car2); // 'bmw'复制代码

배열 내 요소 위치 교환을 완료하려면(예: [1,2,3]을 [1,3,2]로 교환), 그러면 다음과 같이 얻을 수 있습니다:

const arr = [1,2,3];
[arr[2], arr[1]] = [arr[1], arr[2]];console.log(arr); // [1,3,2]复制代码

함수의 반환에서 배열을 분해

많은 함수가 배열 유형 결과를 반환하며 배열 분해를 통해 직접 값을 얻을 수 있습니다.

functin fun(){	return [1,2,3]
}let a, b, c; 
[a, b, c] = fun();复制代码

물론, 함수가 배열의 일부 값을 반환하도록 하는 것도 가능합니다. 무시하세요

functin fun(){	return [1,2,3]
}let a, c; 
[a, , c] = fun();复制代码

ES6의 구조 분해 기능이 많은 시나리오에서 매우 유용하다는 것을 알 수 있습니다. 모든 사람이 프로젝트에 더 많은 해체를 적용하여 코드를 더 간단하고 명확하며 이해하기 쉽게 만들 수 있기를 바랍니다.

관련 무료 학습 권장 사항: javascript(동영상)

위 내용은 ES6의 자바스크립트 구조분해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!