어레이 및 기능과의 옵션 체인을 사용하려면 어떻게 해야 합니까?

어레이 및 기능과의 옵션 체인을 사용하려면 어떻게 해야 합니까?

오브젝트 대신 어레이로 옵션 체인을 사용하려고 하는데 그 방법을 잘 모르겠습니다.

이게 내가 하려는 거야myArray.filter(x => x.testKey === myTestKey)?[0]. 기능적으로도 비슷한 것을 시도합니다.

let x = {a: () => {}, b: null}
console.log(x?b());

다만, 같은 에러가 발생하고 있습니다.어레이 또는 기능과의 체인(옵션)을 사용하려면 어떻게 해야 합니까?

이거를 넣어야 돼요.그 후?옵션 체인을 사용하려면:

myArray.filter(x => x.testKey === myTestKey)?.[0]

놀이터 링크

사용방법?컴파일러는 당신이 조건부 연산자를 사용하려고 한다고 생각하게 합니다(그리고 그것은 그것을 인식하지 못하기 때문에 오류를 발생시킵니다).:나중에)

옵션 체인은 단순한 TypeScript가 아닙니다.플레인 JavaScript에서도 완성된 제안입니다.

위와 같이 괄호 표기법과 함께 사용할 수 있지만 도트 표기법 속성 액세스와 함께 사용할 수도 있습니다.

const obj = {
  prop2: {
    nested2: 'val2'
  }
};

console.log(
  obj.prop1?.nested1,
  obj.prop2?.nested2
);

함수 호출의 경우:

const obj = {
  fn2: () => console.log('fn2 running')
};

obj.fn1?.();
obj.fn2?.();

공식 문서의 새로운 페이지에서 잠시 검색한 후 발견했습니다.

어레이를 사용하는 올바른 방법은.끝나고?

그러니까...

myArray.filter(x => x.testKey === myTestKey)?.[0]

위의 질문 사례에서 정확히 무슨 일이 일어났는지 좀 더 자세히 설명하겠습니다.

myArray.filter(x => x.testKey === myTestKey)?[0]

변환 대상

const result = myArray.filter(x => x.testKey === myTestKey) ? [0] : ;

그 때문에, 에러가 발생하고 있습니다.이후에는 뭔가 부족한 것이 있기 때문입니다.또, 코드도 이 에러로 변환하고 싶지 않을 수도 있습니다.

Sure Performance의 답변 덕분에 저는 타이프스크립트, 특히 https://www.typescriptlang.org/play/index.html 툴에 대해 새로운 것을 배웠습니다.

Edge Cromium 84에서 테스트 중인 ECMA 262(2020)는 TypeScript 트랜스필러 없이 옵션 체인 연산자를 실행할 수 있습니다.

// All result are undefined
const a = {};

console.log(a?.b);
console.log(a?.["b-foo-1"]);
console.log(a?.b?.());

// Note that the following statements throw exceptions:
a?.(); // TypeError: a is not a function
a?.b(); // TypeError: a?.b is not a function

기능: Chrome 80+, Firefox 74+

공식 문서의 새 페이지를 잠시 검색한 후 발견되었습니다.

이거를 넣어야 돼요.그 후?옵션 체인을 사용합니다.

그렇게 될 것이다.

myArray.filter(x => x.testKey === myTestKey)?.[0]

사용만?컴파일러가 조건부 연산자를 사용하려고 한다고 생각하게 합니다(그러면 컴파일러는 이 연산자를 인식하지 못하기 때문에 오류를 일으킵니다).:나중에)

함수가 오브젝트 내부에 있을 필요는 없습니다.옵션 체인을 사용하여 다음과 같이 함수를 실행할 수도 있습니다.

someFunction?.();

한다면someFunctionexists는 실행됩니다.그렇지 않으면 실행을 건너뛰고 오류가 발생하지 않습니다.

이 기술은 재사용 가능한 컴포넌트로 작업할 때 특히 유용하며 일부 컴포넌트에 이 기능이 없을 수 있습니다.

음, 우리가 정확한 구문을 알아냈다고 해도, 그 암호는 나에게 별로 의미가 없습니다.

은 in의의코음음음음음음음음음음음음음음음 of of of of of of of of of of of of of of of of of 의 결과를 확인하는입니다.myArray.filter(x => x.testKey === myTestKey)null andundefined(TS 출력을 확인할 수 있습니다).하다. 그이다.filter 「」입니다.array. exceeded슬로우하지 JavaScript는 "Array bounds exceeded"를 .undefined이 요소가 존재하지 않는 경우.

알기 쉽게 하기 위해 다음 예를 제시하겠습니다.

const myArray: string[] = undefined
console.log(myArray.filter(x => x)?.[0]) //throws Cannot read property 'filter' of undefined

//in this example the optional chaining protects us from undefined array
const myArray: string[] = undefined
console.log(myArray?.filter(x => x)[0]) //outputs "undefined"

언급URL : https://stackoverflow.com/questions/59623674/how-can-i-use-optional-chaining-with-arrays-and-functions