JS/ES6: 정의되지 않은 파괴

JS/ES6: 정의되지 않은 파괴

나는 다음과 같은 파괴를 사용하고 있습니다.

const { item } = content
console.log(item)

하지만 어떻게 대처해야 할까요?content === undefined어떤 것이 오류를 던질 것입니까?

'오래된' 방법은 다음과 같습니다.

const item = content && content.item

그래서 만약에content정의되지 않음 ->item또한 정의되지 않습니다.

파괴를 이용해서 비슷한 것을 할 수 있습니까?

단락 평가를 사용하여 다음과 같은 경우 기본값을 제공할 수 있습니다.content일반적으로 잘못된 값입니다.undefined또는null이 경우에는

const content = undefined
const { item } = content || {}
console.log(item)                       // undefined

덜 관용적인 방법(이 설명 참조)은 개체를 파괴하기 전에 개체에 내용을 퍼뜨리는 것입니다. 값이 무시되기 때문입니다.

const content = undefined
const { item } = { ...content }
console.log(item) // undefined

함수 파라미터를 파괴하는 경우 기본값(= {}이 예에서는)

참고: 기본값은 구조화되지 않은 매개 변수가 다음과 같은 경우에만 적용됩니다.undefined그 말은 파괴가null값이 오류를 발생시킵니다.

const getItem = ({ item } = {}) => item
console.log(getItem({ item: "thing" })) // "thing"
console.log(getItem())                  // undefined

try {
  getItem(null)
} catch(e) {
  console.log(e.message)                // Error - Cannot destructure property `item` of 'undefined' or 'null'.
}

또는 의 기본값을 설정합니다.item속성(입력 개체에 속성이 포함되지 않은 경우)

const getItem = ({ item = "default" } = {}) => item
console.log(getItem({ item: "thing" })) // "thing"
console.log(getItem({ foo: "bar" }))    // "default"

const { item } = Object(content)

중첩된 개체를 파괴하는 것은 깨끗하고 짧지만 소스 속성이 다음과 같을 때 빠집니다.null또는undefined오른쪽 측면 목적어로

있다고 치더라도

const {
  loading,
  data: { getPosts },
} = useQuery(FETCH_POSTS_QUERY);

솔루션 1 데이터 개체가 있지만 없는 경우getPosts그러면 다음을 사용할 수 있습니다.
(각 레벨에서 기본값 설정)

const {
  loading,
  data: { getPosts = [] } = { getPosts: [] },
} = useQuery(FETCH_POSTS_QUERY);

솔루션 2: 이벤트 발생 시data이라undefined그러면:

const {
  loading,
  data: { getPosts } = { getPosts: [] },
} = useQuery(FETCH_POSTS_QUERY);

정의되지 않은 값은 풀 수 있지만 정의되지 않은 값은 풀 수 없습니다.
기본 파라미터 값을 설정하는 것만큼 쉽게 수정할 수 있습니다.

예:

(() => {
    // prepare payload
    const PAYLOAD = {
        holdingJustThis: 1
    };
    // lets unpack the payload and more
    const {
        holdingJustThis,
        itIsGoingToBeUndefined,
        itCouldThrowButWont: {
            deep
        } = {}                  // this will secure unpacking "deep"
    } = PAYLOAD;

    console.log({
        holdingJustThis
    });
    console.log({
        itIsGoingToBeUndefined  // logs {itIsGoingToBeUndefined:undefined}
    });
    console.log({
        deep                    // logs {deep:undefined}
    });
})()

최근에 추가된 항목:병합 연산자(??)가 null입니다.
왼쪽 값이 null이거나 정의되지 않은 경우(객체 대신 정의되지 않은 경우) 기본적으로 오른쪽 값을 반환합니다.

const { item } = undefined or null
// Uncaught TypeError: Cannot destructure property 'item' of 'null' as it is  null.

const { item } = content ?? {}
console.log(item)   // undefined

연산자를 사용하는 것을 고려해 보십시오.또한 앞서 답변에서 언급했듯이 || (또는) 연산자가 있습니다.우리에게 있어서, 이 특정한 경우에는 큰 차이가 없습니다.

그건 취향의 문제일 뿐입니다. 우리 팀은 합의를 했습니다. 우리는?대상 개체가 null이거나 정의되지 않은 경우 기본 개체를 정의하는 데 사용되며, 다른 경우에는 || 연산자를 사용합니다.

OP의 사용 사례를 위해 옵션 체인 연산자를 사용하는 것도 가능하다는 것을 덧붙일 뿐입니다.

const item = content?.item
console.log(item)

한다면contentnull이거나 정의되지 않은 경우content.item액세스할 수 없습니다.item정의되지 않습니다.

const content = undefined
const { item } = content ?? {}
console.log(item)   // undefined           

승인된 응답은 에 의해 설정되지 않은 실제 정의되지 않은 값에 대해 작동하지 않습니다.const content = undefined이러한 경우에는 다음과 같이 작동합니다.

const { item } = (typeof content !== 'undefined' && content) || {}
console.log(item)

언급URL : https://stackoverflow.com/questions/48433008/js-es6-destructuring-of-undefined