JavaScript 연산자 사용 방법 공유

ECMAScript의 발전 과정에서 많은 기능의 업데이트가 있을 것이다. 예를 들어 삭제, 화살표 기능, 모듈, 그들은 자바스크립트 작성 방식을 크게 변화시켰다. 어떤 사람들은 좋아하지 않을 수도 있고, 어떤 사람들은 좋아하지 않을 수도 있지만, 모든 새로운 기능처럼 우리는 최종적으로 그것들에 익숙해질 것이다.새 버전의 ECMAScript는 세 가지 새로운 논리적 값 부여 연산자를 도입했다. 공수 연산자, AND와 OR 연산자, 이런 연산자의 등장은 우리의 코드를 더욱 깨끗하고 간결하게 하기 위해서이다. 다음은 몇 가지 우아한 자바스크립트 연산자의 사용 기교를 공유하고자 한다

1. 선택적 링크 연산자 [?.]

옵션 링크 연산자(Optional Chaining Operator)는 ES2020 제안의 4단계이므로 사양에 추가해야 합니다.그것은 객체 내부 속성, 특히 심층 중첩된 속성에 접근하는 방식을 바꾸었다.TypeScript 3.7+의 기능으로도 사용할 수 있습니다.
대부분의 개발 전단의 젊은이들이null과 정의되지 않은 속성을 만날 것이라고 믿는다.JS 언어의 동적 특성은 그것들을 건드리지 않을 수 없다.특히 중첩된 객체를 처리할 때 다음 코드는 매우 흔합니다.

if (data && data.children && data.children[0] && data.children[0].title) {
    // I have a title!
}

위의 코드는 API 응답에 사용되며, 이름을 확인하기 위해 JSON을 확인해야 합니다.그러나 객체에 선택적 속성이 있거나 일부 구성 객체에 특정 값이 있는 동적 매핑이 있을 때 유사한 상황이 발생할 수 있으므로 많은 경계 조건을 확인해야 합니다.
이때 우리가 선택할 수 있는 링크 연산자를 사용하면 모든 것이 더욱 수월해진다.이것은 우리가 사다리꼴 그림을 현저하게 검색하지 않고 끼워 넣는 속성을 검사할 수 있도록 한다.우리가 해야 할 일은 "?"를 사용하는 것이다빈 값의 속성 뒤에 있는 연산자를 검사합니다.우리는 표현식에서 이 연산자를 여러 번 사용할 수 있으며, 만약 어떤 항목도 정의하지 않는다면, 가능한 한 빨리 되돌아올 것이다.
정적 속성 사용법:

object?.property

동적 속성의 경우 다음과 같이 변경합니다.

object?.[expression] 

위의 코드는 다음과 같이 단순화할 수 있습니다.

let title = data?.children?.[0]?.title;

그리고 만약에 우리가

let data;
console.log(data?.children?.[0]?.title) // undefined

data  = {children: [{title:'codercao'}]}
console.log(data?.children?.[0]?.title) // codercao

이렇게 쓰면 더 쉬워지지 않을까요?조작부호가 비어 있으면 종료되기 때문에, 조건부 호출 방법이나 응용 조건 논리를 사용할 수도 있다

const conditionalProperty = null;
let index = 0;

console.log(conditionalProperty?.[index++]); // undefined
console.log(index);  // 0

방법의 호출에 대해 너는 이렇게 쓸 수 있다

object.runsOnlyIfMethodExists?.()

예를 들어 아래의parent 대상을 우리가 직접parent를 호출한다면.getTitle(), Uncaught TypeError: parent가 표시됩니다.getTitle is not a function 오류, parent.getTitle?.() 는 실행 여부를 종료합니다.

let parent = {
    name: "parent",
    friends: ["p1", "p2", "p3"],
    getName: function() {
      console.log(this.name)
    }
  };
  
  parent.getName?.()   // parent
  parent.getTitle?.()  // 
  

잘못된 병합과 함께 사용
정의되지 않거나 빈 값과 표현에 기본값을 제공하는 방법을 제공합니다.우리가 사용할 수 있다??연산자, 표현식에 기본값 제공

console.log(undefined ?? 'codercao'); // codercao

따라서 속성이 존재하지 않으면 잘못된 결합 연산자를 선택적 링크 연산자와 결합하여 기본값을 제공할 수 있습니다.

let title = data?.children?.[0]?.title ?? 'codercao';
console.log(title); // codercao

2. 논리적 빈 할당 (?) =

expr1 ??= expr2

논리적 비어 있는 값 연산자는 비어 있는 값 (비어 있거나 정의되지 않음) 에만 expr1에 값을 할당합니다. 표현법:

x ??= y

다음과 같이 보일 수 있습니다.

x = x ?? y;

하지만 사실은 그렇지 않다!미세한 차이가 있다.
빈 병합 연산자(??)왼쪽에서 오른쪽으로 조작합니다. x가 비어 있지 않으면 단락입니다.따라서 x가null이거나 정의되지 않으면 표현식 y에 대해 값을 구하지 않습니다.따라서 만약 y가 함수라면, 그것은 전혀 호출되지 않을 것이다.따라서 이 논리적 값 부여 연산자는

x ?? (x = y);

3. 논리적 또는 할당(|=)

이 논리적 값 부여 연산자는 왼쪽 표현식이falsy 값일 때만 값을 부여합니다.Falsy와null은 다르다. falsy는 어떤 값이든지:false,0,"",null,undefined와NaN 등
문법

x ||= y

... 과 같다

x || (x = y)

이것은 기존 값을 보존하고 싶을 때 유용합니다. 그렇지 않으면 기본값을 할당하고 싶습니다.예를 들어, 검색 요청에 데이터가 없으면 요소의 내부 HTML을 기본값으로 설정하려고 합니다.그렇지 않으면 기존 목록을 표시해야 합니다.이렇게 하면 우리는 불필요한 업데이트와 그 어떠한 부작용, 예를 들어 해석, 다시 렌더링, 초점을 잃는 것을 피할 수 있다.간단하게 이 연산자를 사용하여 JavaScript를 사용하여 HTML을 업데이트할 수 있습니다.

document.getElementById('search').innerHTML ||= '<i>No posts found matching this search.</i>'

4. 논리와 분배(&=)

이 논리적 값 부여 연산자는 왼쪽이 진짜일 때만 값을 부여한다는 것을 이미 알아차렸을 것이다.따라서

x &&= y

... 과 같다

x && (x = y)

마지막

이번에는 몇 가지 우아한 JavaScript 연산자 사용 기교를 공유하고 선택할 수 있는 링크 연산자의 사용을 중점적으로 공유함으로써 우리가 더 이상 대량의 예에서 코드를 작성하지 않아도 끼워 넣는 속성에 쉽게 접근할 수 있도록 한다.그러나 IE는 지원하지 않습니다. 따라서 이 버전이나 이전 버전을 지원하는 브라우저가 필요하면 Babel 플러그인을 추가해야 할 수도 있습니다.Node의 경우js, 이 버전을 Node 14 LTS 버전으로 업그레이드해야 합니다.x는 이 버전을 지원하지 않습니다.
만약 당신도 우아하고 우아한 자바스크립트 연산자 사용 기교를 가지고 있다면, 아끼지 말고 평론 구역에서 함께 교류하세요~
이상은 몇 개의 자바스크립트 연산자의 사용 기교에 대한 상세한 내용을 공유하는 것입니다. 자바스크립트 연산자의 사용에 관한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!