자바스크립트의 디스트럭처링
6206 단어 es6tutorialjavascript
객체 파괴
우리는 종종 코드베이스의 여러 위치에서 동일한 변수를 참조하며 동일한 변수를 반복해서 선언하지 않는 것을 선호합니다. 예를 들어 서버에 요청을 하려면 헤더 요청에 인증(토큰)이 필요할 수 있습니다. 예를 들어
session
및 token
키를 보유하는 refresh_token
개체가 있다고 가정합니다.ES5:
const token = session.token;
const refreshToken = session.refresh_token;
ES6:
const {
token, // ↓ alias ↓
refresh_token: refreshToken
} = session;
위의 ES6 스니펫에서 구문이 더 명확해집니다. 단일
let
명령문으로 여러 개의 쉼표로 구분된 변수를 선언할 수 있는 것처럼 구조 분해 식의 중괄호 안에 여러 변수를 선언할 수도 있습니다. 또한 속성 이름을 다른 이름으로 바꾸고 싶은 경우도 있습니다. 이 경우 : amAlias
를 사용합니다. 위에서 우리는 속성 이름을 snake-case에서 camelCase로 변경하기 위해 별칭을 사용했습니다.기능 매개변수
함수 매개변수에서 구조 분해를 사용하여 함수 매개변수로 전달된 객체에서 필드를 압축 해제할 수 있습니다. 매개변수의 특정 속성만 고려하는 함수를 구현하려는 경우 미리 구조를 분해하여 해당 속성을 명시적으로 참조하는 것이 좋습니다. 모든 것을 미리 분해하여 입력이 함수의 계약을 준수하지 않을 때 쉽게 발견할 수 있습니다.
const getFullName = ({ user }) =>
user && `${user.firstName} ${user.lastName}`;
const state = {
user: {
firstName: 'Mahmoud',
lastName: 'Elmahdi'
}
};
getFullName(state); // Mahmoud Elmahdi
함수에서 반환된 값 구문 분석
객체나 배열을 반환하는 함수가 있을 때마다 구조 분해를 통해 반환된 값을 사용하여 보다 간결하게 상호 작용할 수 있습니다. 다음 예는 사용자 데이터가 포함된 개체를 반환하는
getUser
함수를 보여줍니다. 여기서 관심 있는 항목만 가져오고 isAdmin
나머지는 무시합니다.const getUser = () => ({
id: 156,
isAdmin: true,
fullName: 'Mahmoud Elmahdi',
email: '[email protected]',
languages: ['Arabic', 'English', 'Russian']
});
const { isAdmin } = getUser();
isAdmin && retrieveSensitiveData();
배열 구조 분해
Destructuring 배열은 중괄호 대신 대괄호를 사용합니다. 코드에
x = arr[0]
와 같은 구현 세부 정보를 사용하는 대신, 구조 분해를 사용하면 명시적으로 인덱스를 참조하지 않고 대신 값의 이름을 지정하여 의미를 명확하게 전달할 수 있습니다.배열을 분해할 때 참조할 필요가 없는 속성을 건너뛸 수도 있습니다.
유용한 팁
속성에 대한 스프레드 연산자를 사용하여 개체 리터럴 내에 조건부로 속성을 추가합니다.
요소가 true(
null
/undefined
가 아니거나 비어 있는 경우에만 배열 리터럴 내부에 요소 추가)Reference
이 문제에 관하여(자바스크립트의 디스트럭처링), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/_elmahdim/destructuring-in-javascript-87n텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)