JS의 효율적인 마법 연산자 요약

JavaScript는 현재 매년 새로운 버전을 발표하고 있으며, 더욱 편리하고 효율적인 연산자도 추가됩니다.오늘 우리는 몇 개의 효율적인 마법 연산자를 조사할 것이다.

1. 체인 연산자 옵션

이전에 우리가 어떤 구조의 비교적 깊은 속성을 사용하고 모든 부급이 반드시 존재한다는 것을 확정할 수 없을 때 우리는 일련의 판단을 해야 한다. 예를 들어 데이터 구조:

const student = {
  score: {
    math: 98,
  },
};

가장 안쪽에 있는 math 속성의 값을 얻으려면:

if (student && student.score) {
  console.log(student.score.math);
}

1.1 심층 속성 얻기
그러나 우리가 선택할 수 있는 체인 연산자를 사용한 후에 판단은 매우 간단해졌다. 선택할 수 있는 체인 연산자는 체인에서null이나undefined를 만났을 때 바로 undefined로 되돌아와 오류 이상을 던지지 않는다.

console.log(student?.score?.math);

1.2 선택 가능한 방법 실행
동시에 존재할 수 있는 함수를 실행할 때도 사용할 수 있다.예를 들어 react 구성 요소에서 전송 방법은 선택적입니다.

// getScore  ，  undefined， 
const Student = ({ getScore }: { getScore?: () => void }) => {
  useEffect(() => {
    //   getScore  ，  getScore() 
    getScore?.();
  }, []);

  return <div></div>;
};

또는dom 요소를 실행할 때도 사용할 수 있습니다.
document.querySelector는 두 가지 종류를 되돌려줍니다.dom 요소가 실제로 존재할 때 이 요소를 되돌려줍니다. 그렇지 않으면null을 되돌려줍니다.typescript를 쓴 사람들은 우리가 어떤 방법을 호출할 때 항상 이dom 요소가 존재하는지 확인해야 한다는 것을 알고 있다.

const dom = document.querySelector('.score');
if (dom) {
  dom.getBoundingClientRect(); //   dom  ， 
}

옵션 체인 조작부호를 사용할 경우 바로 호출하면 됩니다.

document.querySelector('.score')?.getBoundingClientRect();

1.3 배열의 값 가져오기
만약 수조가 존재한다면 아래 표시된 값을 얻을 수 있습니다. 우리는 이제 수조가 존재하는지 아닌지를 판단할 필요가 없습니다. 직접 사용할 수 있습니다.

arr?.[1]; //   arr  ，  arr[1] 

위의 세 가지 상황도 조합해서 사용할 수 있다.만약에 구조가 비교적 복잡할 때 여러 가지 유형이 있다. 여기서 우리는 수조 math 아래 표시 2의 방법을 실행해야 한다.

const student = {
  score: {
    math: [
      98,
      67,
      () => {
        return 99;
      },
    ],
  },
};

다음을 수행합니다.
student?.score?.math?.[2]?.();//99
이런 조작도 있어요?
1.4 할당 작업을 수행할 수 없습니다.
선택적 체인 연산자는 가져오기 작업만 수행할 수 있고 값을 부여할 수 없습니다.
예를 들어 가능한 수조나dom 요소에 값을 부여할 때 문법 이상을 직접 던진다.

arr?.[1] = 2; // x
document.querySelector('.score')?.innerHTML = 98; // x

위의 문구를 실행하면 다음과 같은 메시지가 표시됩니다.
Uncaught SyntaxError: Invalid left-hand side in assignment
왼쪽의 선택적 체인에 값을 부여할 수 없습니다.

2. 물음표 연산자

더블 물음표 연산자??,해결 또는 ||연산자를 위해 설계된 것으로 이해합니다.
왼쪽 데이터가 가짜 값 (숫자 0, 볼 형식의false, 빈 문자열, undefined,null) 일 때 오른쪽 문장을 실행하려면 아래나 연산자의 동작을 되돌아봅시다.

false || 123;
0 || 123;
'' || '123';
undefined || 123;
null || 123;

그러나 어떤 경우에는false와 0은 정상적인 값이지만 연산자나 연산자를 사용할 때 오류가 발생할 수 있습니다.
예를 들어 아래의 이 예는 score가 비어 있을 때 기본값은 1입니다.정상값 0을 입력하면 0을 반환해야 하지만 실제로는 1을 반환합니다.

const getSCore = (score: number) => {
  return score || 1;
};

getScore(0); // 1

이때 우리는 쌍물음표 연산자??를 썼다.더블 물음표 연산자는 왼쪽이undefined나null일 때만 오른쪽 문장을 실행합니다.

const getSCore = (score: number) => {
  return score ?? 1;
};

getScore(0); // 0

이 동시에 쌍물음표 연산자는 = 와 결합하여 값 부여 조작이 될 수 있으며, 왼쪽이 null 또는 undefined일 때 오른쪽 문장의 결과를 왼쪽의 변수에 부여한다.

score ??= 1; // 1

나는 책을 많이 읽어서 너를 속이지 않을 것이다

3. 연산과 연산의 부치 조작

우리는 이전에 또는 연산자를 사용하여 값을 지정하는 작업을 수행했습니다.

score = score || 1;
age = age && 24;

지금 바로 간략하게 쓸 수 있습니다.

score ||= 1; //   score = score || 1
age &&= 24; //   age = age && 24

4. 쌍성호 연산자

쌍성호 연산자 **는 비교적 일찍 js에 도입된 것으로 우리가 비교적 적게 사용했을 뿐이다.사실 그것이 실행하는 것은 멱 연산으로 Math와 같다.pow().

2 ** 10; // 1024, 2 10 ，  Math.pow(2, 10);

5. 요약

이상의 모든 예시는chrome90에서 실행되었습니다.
우리는 이미 babel이 전환을 돕는 상황에서 코드에 이 연산자를 적절하게 운용하여 우리의 코드를 크게 간소화할 수 있다.
이 JS의 고효율 연산자에 대한 총결을 소개합니다. 더 많은 JS 고효율 연산자 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!