대부분의 튜토리얼에서 놓치는 12가지 JavaScript 트릭

JavaScript를 배우기 시작했을 때 제가 가장 먼저 한 일은 시간을 절약하는 데 도움이 되는 요령 목록을 만드는 것이었습니다. 나는 다른 프로그래머, 다른 사이트, 매뉴얼에서 그것들을 발견했습니다.

이 기사에서는 JavaScript 코드를 개선하고 속도를 높이는 12가지 좋은 방법을 보여 드리겠습니다. 대부분의 경우 보편적입니다.

알림: "Habr"의 모든 독자를 위한 - "Habr" 프로모션 코드를 사용하여 Skillbox 과정에 등록할 때 10 루블 할인.

Skillbox는 다음을 권장합니다. 실기 코스 "모바일 개발자 PRO".

고유 값 필터링

배열

Set 객체 유형은 ..., 스프레드 연산자와 함께 ES6에서 도입되었으며, 이를 사용하여 고유한 값만 포함하는 새 배열을 만들 수 있습니다.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
 
console.log(uniqueArray); // Result: [1, 2, 3, 5]

일반적인 상황에서는 동일한 작업을 수행하려면 훨씬 더 많은 코드가 필요합니다.

이 기술은 정의되지 않음, null, 부울, 문자열 및 숫자와 같은 기본 유형을 포함하는 배열에 작동합니다. 객체, 함수 또는 추가 배열이 포함된 배열로 작업하는 경우 다른 접근 방식이 필요합니다.

주기 단위의 캐시 배열 길이

사이클

for 루프를 배울 때는 표준 절차를 따릅니다.

for (let i = 0; i < array.length; i++){
  console.log(i);
}

그러나 이 구문을 사용하면 for 루프는 반복할 때마다 배열의 길이를 반복적으로 확인합니다.

때로는 이것이 유용할 수 있지만 대부분의 경우 한 번의 액세스가 필요한 배열의 길이를 캐시하는 것이 더 효율적입니다. 다음과 같이 변수 i를 정의하는 곳에 길이 변수를 정의하여 이를 수행할 수 있습니다.

for (let i = 0, length = array.length; i < length; i++){
  console.log(i);
}

원칙적으로 위와 거의 동일하지만 루프 크기를 늘리면 시간이 크게 절약됩니다.

단락 정격(매카시 정격)

조건부 연산자

삼항 연산자는 간단한(때로는 그다지 단순하지 않은) 조건문을 작성하는 빠르고 효율적인 방법입니다.

x> 100? "100 초과": "100 미만";
x> 100? (x>200? "200 초과": "100-200 사이"): "100 미만";

그러나 때때로 삼항 연산자조차 필요한 것보다 더 복잡합니다. 대신 'and' &&와 'or'를 사용할 수 있습니다 || 더욱 간결한 방식으로 특정 표현식을 평가하는 부울 연산자입니다. 종종 "단락" 또는 "단락 정격"이라고 합니다.

이거 어떻게 작동 시켜요

두 개 이상의 조건 ​​중 하나만 반환하고 싶다고 가정해 보겠습니다.

&&를 사용하면 첫 번째 거짓 값이 반환됩니다. 각 피연산자가 true로 평가되면 마지막으로 평가된 표현식이 반환됩니다.

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
 
console.log(0 && null); // Result: 0

||를 사용하여 첫 번째 참값을 반환합니다. 각 피연산자가 false로 평가되면 마지막으로 평가된 값이 반환됩니다.

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
 
console.log(0 || null); // Result: null

예를 들어 1

변수의 길이를 반환하고 싶지만 해당 유형을 모른다고 가정해 보겠습니다.

이 경우 if/else를 사용하여 foo가 올바른 유형인지 확인할 수 있지만 이 방법은 너무 길어질 수 있습니다. 따라서 "단락"을 사용하는 것이 좋습니다.

return (foo || []).length;

변수 foo의 길이가 적절한 경우 해당 길이가 반환됩니다. 그렇지 않으면 0을 얻게 됩니다.

예를 들어 2

중첩된 개체에 액세스하는 데 문제가 있었나요? 개체 또는 개체의 하위 속성 중 하나가 존재하는지 여부를 알 수 없으며 이로 인해 문제가 발생할 수 있습니다.

예를 들어, this.state의 데이터 속성에 액세스하고 싶었지만 프로그램이 가져오기 요청을 반환할 때까지 데이터가 정의되지 않았습니다.

사용 위치에 따라 this.state.data를 호출하면 애플리케이션이 시작되지 않을 수 있습니다. 문제를 해결하기 위해 이를 조건식으로 래핑할 수 있습니다.

if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetching Data';
}

더 나은 옵션은 "or" 연산자를 사용하는 것입니다.

return (this.state.data || 'Fetching Data');

&&를 사용하도록 위의 코드를 변경할 수 없습니다. '데이터 가져오기' && this.state.data 연산자는 정의되지 않았는지 여부에 관계없이 this.state.data를 반환합니다.

옵션 체인

트리 구조 깊은 곳에서 속성을 반환하려고 할 때 선택적 연결을 사용하는 것이 좋습니다. 그럼 물음표 기호는요? null이 아닌 경우에만 속성을 검색하는 데 사용할 수 있습니다.

예를 들어 위의 예제를 리팩터링하여 this.state.data?..()를 얻을 수 있습니다. 즉, 값이 null이 아닌 경우에만 데이터가 반환됩니다.

또는 상태가 정의되었는지 여부가 중요한 경우 this.state?.data를 반환할 수 있습니다.

부울로 변환

유형 변환

일반적인 부울 함수인 true 및 false 외에도 JavaScript는 다른 모든 값도 true 또는 falsy로 처리합니다.

별도로 명시하지 않는 한 JavaScript의 모든 값은 0, "", null, 정의되지 않음, NaN 및 물론 false를 제외하고 진실입니다. 후자는 거짓이다.

유형을 부울로 변환하는 연산자를 사용하여 둘 사이를 쉽게 전환할 수 있습니다.

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
 
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"

문자열로 변환

유형 변환

정수에서 문자열로의 빠른 변환은 다음과 같이 수행할 수 있습니다.

const val = 1 + "";
 
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

정수로 변환

유형 변환

이와 같이 역변환을 수행합니다.

let int = "15";
int = +int;
 
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

이 방법은 아래와 같이 부울 데이터 유형을 일반 숫자 값으로 변환하는 데에도 사용할 수 있습니다.

console.log(+true);  // Return: 1
console.log(+false); // Return: 0

+가 더하기 연산자가 아닌 연결 연산자로 해석되는 상황이 있을 수 있습니다. 이를 방지하려면 물결표를 사용해야 합니다: ~~. 이 연산자는 -n-1과 동일합니다. 예를 들어 ~15는 -16과 같습니다.

두 개의 물결표를 연속해서 사용하면 - (- - n - 1) - 1 = n + 1 - 1 = n이기 때문에 연산이 무효화됩니다. 즉, ~-16은 15와 같습니다.

const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

<Quick Powers

운영

ES7부터 지수 연산자 **를 거듭제곱의 약어로 사용할 수 있습니다. 이는 Math.pow(2, 3)을 사용하는 것보다 훨씬 빠릅니다. 간단해 보이지만 이 점은 어디에서나 언급되지 않기 때문에 기술 목록에 포함되어 있습니다.

console.log(2 ** 3); // Result: 8

지수 계산에 일반적으로 사용되는 ^ 기호와 혼동해서는 안 됩니다. 그러나 JavaScript에서는 이것이 XOR 연산자입니다.

ES7 이전에는 ** 단축키는 비트 왼쪽 이동 연산자 <<를 사용하여 2진수의 거듭제곱에만 사용할 수 있었습니다.

Math.pow(2, n);
2 << (n - 1);
2**n;

예를 들어 2 << 3 = 16은 2 ** 4 = 16과 같습니다.

정수로 부동

작업/유형 변환

부동소수점을 정수로 변환해야 하는 경우 Math.floor(), Math.ceil() 또는 Math.round()를 사용할 수 있습니다. 그러나 더 빠른 방법이 있습니다. 이를 위해 |, 즉 OR 연산자를 사용합니다.

console.log(23.9 | 0);  // Result: 23
console.log(-23.9 | 0); // Result: -23

행동 | 다루는 대상이 양수인지 음수인지에 따라 크게 달라지므로 이 방법은 수행 중인 작업에 자신감이 있는 경우에만 적합합니다.

엔 | 0은 소수 구분 기호 뒤의 모든 내용을 제거하고 부동 소수점을 정수로 자릅니다.

~~를 사용하여 동일한 반올림 효과를 얻을 수 있습니다. 강제로 정수로 변환한 후에도 값은 변경되지 않습니다.

후행 숫자 제거

OR 연산자를 사용하면 숫자에서 임의의 자릿수를 제거할 수 있습니다. 즉, 다음과 같이 유형을 변환할 필요가 없습니다.

let str = "1553";
Number(str.substring(0, str.length - 1));

대신 간단히 다음과 같이 작성합니다.

console.log(1553 / 10   | 0)  // Result: 155
console.log(1553 / 100  | 0)  // Result: 15
console.log(1553 / 1000 | 0)  // Result: 1

자동 연결

클래스

ES6 화살표 표기법은 클래스 메서드에서 사용될 수 있으며 바인딩이 암시됩니다. 이는 this.myMethod = this.myMethod.bind(this)와 같은 반복적인 표현식에 작별 인사를 할 수 있음을 의미합니다!

import React, { Component } from React;
 
export default class App extends Compononent {
  constructor(props) {
  super(props);
  this.state = {};
  }
 
myMethod = () => {
    // This method is bound implicitly!
  }
 
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

배열 트리밍

배열

배열에서 값을 제거해야 하는 경우 splice()보다 빠른 방법이 있습니다.

예를 들어, 원본 배열의 크기를 알고 있는 경우 다음과 같이 길이 속성을 재정의할 수 있습니다.

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
 
console.log(array); // Result: [0, 1, 2, 3]

그러나 또 다른 방법, 더 빠른 방법이 있습니다. 속도가 중요한 경우 다음을 선택해 보세요.

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
 
console.log(array); // Result: [0, 1, 2, 3]

배열의 마지막 값 인쇄

배열
이 기술을 사용하려면 Slice() 메서드를 사용해야 합니다.

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

JSON 코드 형식 지정

JSON

이미 JSON.stringify를 사용했을 수도 있습니다. JSON 형식을 지정하는 데 도움이 된다는 것을 알고 계셨나요?

stringify() 메서드는 두 가지 선택적 매개 변수, 즉 표시되는 JSON을 필터링하는 데 사용할 수 있는 대체 함수와 공백 값을 사용합니다.

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
 
// Result:
// '{
//     "alpha": A,
//     "beta": B
// }'

그게 다입니다. 이 모든 기술이 유용했기를 바랍니다. 어떤 비결을 알고 있나요? 댓글에 적어주세요.

Skillbox는 다음을 권장합니다.

• XNUMX년 실습 코스 "저는 PRO 웹 개발자입니다".
• 온라인 코스 "0의 C# 개발자".
• 실기 코스 "0에서 PRO로의 PHP 개발자".

출처 : habr.com