const obj = {
...condition && { prop: value },
};이것은 완벽하게 수용 가능하고 실행 가능한 JavaScript입니다.
몇 줄만 참아 주시면 ECMAScript 언어 사양 덕분에 무슨 일이 일어나고 있는지 설명하려고 노력할 것입니다. 그렇게 지루하지 않을 것입니다. I new Promise().
Example
상황을 명확히 하기 위해 예제부터 시작하겠습니다. 여기에서 가정 쿼리 개체에서 모방 되지 않는 이상하고 이전에 제출 한 양식의 결과에서 값을 가져 와서 구성하고 있습니다.
필수 필드는 요청 된 컬렉션과 정렬 순서이며, 단순성을 위해 하드 코딩됩니다.
반대로 formValues 객체에는 state와 priority가 없을 수 있으므로 쿼리 객체에 조건부로 삽입해야 합니다.
const state = formValues['state'];
const priority = formValues['priority'];
const query = {
collection: 'Cats',
sort: 'asc',
...state && { state },
...priority && { priority },
};
await doQuery(query);formValues 객체가 하나 이상의 조건부 속성을 소유하지 않는 경우 결과 쿼리 객체도 해당 속성을 갖지 않습니다.
설명
사양에 대한 통찰력
JavaScript 엔진에서 이러한 경우가 발생하면 사양에 의심의 여지가 없습니다. 여기에서 CopyDataProperties 추상 작업이 수행되어야 함을 알 수 있습니다. 무슨 일을 했어? 왜 괄호가 필요하지 않습니까? 추상 연산이란 무엇입니까?
한 번에 하나씩, 독자 여러분.
같은 링크 (위의 네 줄)를 따라 가면 스프레드 연산자 뒤에 오는 것이 무엇이든 AssignmentExpression이어야 함을 알 수 있습니다. 괄호가 필요 없습니다.
AssignmentExpression이란 무엇입니까? 많은 것들이 될 수 있고 화살 함수도 있습니다! 그러나 우리의 경우는 간단한 ConditionalExpression을 기반으로 합니다.
스펙은 표현식이 평가되어야 하고 결과가 CopyDataProperties 추상 연산에 제공되어야 한다고 말합니다. 따라서 평가 결과에서 작업 중인 개체 리터럴로 속성이 복사됩니다.
이제 우리는 자바 스크립트 엔진에 의해 내부적으로 수행되는 작업 목록 인 추상 연산이 무엇인지 정의 할 수 있습니다. 나중에 CopyDataProperties 추상 연산을 구성하는 항목에 더 중점을 둘 것입니다.
지금까지 배운 내용을 요약 해 보겠습니다.
The logical && operator
조건식에 집중하겠습니다.
&& 연산자에 의해 생성 된 값은 항상 두 피연산자 표현식 중 하나의 값입니다. 부울 유형일 필요는 없습니다.
첫 번째 피연산자가 실제 값이 되면 && 식은 두 번째 피연산자의 값이 됩니다.
첫 번째 피연산자의 결과가 잘못된 값이면 && 식은 첫 번째 피연산자의 값이 됩니다.
let expr1 = 'foo';
let expr2 = null;
let expr3 = 42;
// the first operand is a truthy value -> the second operand is the result
expr1 && expr2; // null
expr1 && expr3; // 42
// the first operand is a falsy value -> the first operand is the result
expr2 && expr1; // null
expr2 && expr3; // null그러므로 우리의 상태가 진실한 가치라면 어떨까요? 초기 코드를 변환 할 수 있습니다.
const obj = {
...condition && { prop: value },
};const obj = {
...{ prop: value },
};최종 결과를 이해하기 위해 CopyDataProperties 추상 작업이 수행하는 작업을 알 필요가 없습니다. 내부 개체가 확산되고 해당 속성이 obj에 복제됩니다.
반대로 우리의 상태가 허위 * 값이면 어떻게 됩니까? 우리는 다음과 같은 상황에서 실행됩니다.
const obj = {
...condition,
};그리고 여기가 흥미로운 부분입니다.
CopyDataProperties 추상 연산
여기서 우리는 추상 연산이 따르는 단계를 볼 수 있습니다.
3 번 포인트는 뉴스 가치가 있는 것을 말합니다. null 값이나 undefined 값이 발견되면 아무 작업도 수행되지 않습니다. 따라서 조건이 문제 없이 null 또는 undefined가 되는 상황이 될 수 있습니다.
const obj = {
...null,
};그리고
const obj = {
...undefined,
};다음과 동일합니다.
const obj = {
};5 번과 6 번 지점으로 이동하면 조건이 객체가 될 경우 각 속성이 복제되는 것을 볼 수 있습니다.
우리는 모든 객체가 진실한 값이고 비어있는 값이라는 것을 알고 있으므로 현재 이 경우를 무시할 수 있습니다. 사실, 조건이 진실한 가치라면 어떤 일이 벌어 졌는지 기억하십니까?
마지막으로, 조건이 나머지 잘못된 기본 값 중 하나가 되면 어떻게 될까요? 포인트 번호 4에 초점을 맞춥니 다. toObject 추상 작업의 개입이 보입니까?
CopyDataProperties 추상 연산이 이러한 상황에서 이전에 종료된다는 것을 이미 알고 있기 때문에 처음 두 경우는 무시할 수 있습니다.
마지막 경우는 인수가 이미 대상인 경우 해를 끼치지 않을 것임을 보증합니다. 그러나 이것은 일어날 수 없습니다. 대신 인수가 부울, 문자열 및 숫자 중 하나이면 어떻게 됩니까?
간단합니다 : 해당 래퍼 개체에 자동으로 저장됩니다.
우리의 경우 결과 래퍼 객체에는 자체 속성이 없다는 점에 유의할 가치가 있습니다. Boolean 및 Number 래퍼 개체는 해당 값을 액세스 할 수 없는 내부 속성에 저장합니다.
반대로 문자열 래퍼는 포함 된 문자 (읽기 전용)를 노출하지만 빈 문자열 만 잘못된 값임을 기억하십시오.
고유 한 속성 없음은 복제 할 속성이 없는 CopyDataProperties 추상 작업의 끝을 의미합니다.
따라서 마지막 부분 결과를 변환 할 수 있습니다.
const obj = {
...condition,
};다음으로
const obj = {
...{},
};결론
최선의 방법으로 모든 것을 설명 할 수 있었으면 합니다
등록된 댓글이 없습니다.
