자바스크립트 코드를 단순화하는 일반적인 기술에 대한 설명

이 글에서는 주로 자바스크립트 약어에 사용되는 12가지 기술을 공유합니다. 이러한 12가지 기술을 통해 JS 코드의 양을 크게 줄일 수 있습니다. 알다? 필요하신 친구들은 에디터를 따라가서 함께 배워보세요.

머리말

이 기사는 주로 JavaScript 약어에 일반적으로 사용되는 12가지 기술을 공유합니다. 초보자이든 숙련자이든 읽어볼 가치가 있습니다! 아래에서 할 말은 별로 없지만 자세한 소개를 살펴보겠습니다.

1. Null(null, 정의되지 않음) 확인

새 변수를 만들 때 일반적으로 변수 값이 null인지 확인합니다. 또는 정의되지 않았습니다. 이는 JavaScript 프로그래밍에서 종종 고려해야 하는 검증입니다.

직접 작성하면 다음과 같습니다.

if (variable1 !== null || variable1 !== undefined || variable1 !== ''){
 let variable2 = variable1;
}

더 간결한 버전을 사용할 수 있습니다

let variable2 = variable1 || '';

믿을 수 없다면 Chrome 개발자의 콘솔에서 사용해 볼 수 있습니다. 방법!

//值为null的例子
let variable1 = null;
let variable2 = variable1 || '';
console.log(variable2);
//输出: ''
//值为undefined的例子
let variable1 = undefined;
let variable2 = variable1 || '';
console.log(variable2);
//输出: ''
//正常情况
let variable1 = 'hi there';
let variable2 = variable1 || '';
console.log(variable2);
//输出: 'hi there'

여기서 주의해야 할 점은 일련의 코드를 디버깅한 후 페이지를 새로 고치거나 다른 변수를 정의해야 한다는 것입니다. 그렇지 않으면 오류가 보고됩니다:

2. 비교적 간단한 것 같습니다!
최적화되지 않은 코드:

let a = new Array(); a[0] = "myString1"; a[1] = "myString2"; a[2] = "myString3";

최적화된 코드:

let a = ["myString1", "myString2", "myString3"];

3 if true .. else 최적화

let big;
if (x > 10) {
big = true;
}
else {
big = false;
}

간체:

let big = x > 10 ? true : false;

이는 판정 조건과 결과가 하나만 있을 때 사용할 수 있는 삼항 연산입니다.

코드 양을 대폭 단순화합니다!

let big = (x > 10);
let x = 3,
big = (x > 10) ? "greater 10" : (x < 5) ? "less 5" : "between 5 and 10";
console.log(big); //"less 5"
let x = 20,
big = {true: x>10, false : x< =10};
console.log(big); //"Object {true=true, false=false}"

4. 변수 선언

자바스크립트는 자동으로 변수를 호이스트하지만 이 방법을 사용하면 모든 변수를 함수 앞부분에 한 줄로 만들 수 있습니다.
최적화 비용:

let x;
let y;
let z = 3;

최적화 후:

let x, y, z=3;

5 할당문 단순화

단순화 전:

x=x+1;
minusCount = minusCount - 1;
y=y*10;

단순화 후:

x++;
minusCount --;
y*=10;

x=10, y=5라고 가정하면 기본 산술 연산에서 다음 약어를 사용할 수 있습니다.

x += y // x=15
x -= y // x=5
x *= y // x=50
x /= y // x=2
x %= y // x=0

6 RegExp 개체 사용을 피하세요

단순화 전:

응응

후 단순화:

var re = new RegExp("\d+(.)+\d+","igm"),
result = re.exrc("padding 01234 text text 56789 padding");
console.log(result);//"01234 text text 56789"

7. 조건 최적화

단순화 전:

var result = /d+(.)+d+/igm.exec("padding 01234 text text 56789 padding");
console.log(result); //"01234 text text 56789"

단순화 후:

if (likeJavaScript === true)

실제 예:

if (likeJavaScript)

간체:

let c;
if ( c!= true ) {
// do something...
}

9. 함수 매개변수 최적화

저는 개인적으로 함수 매개변수에 접근하기 위해 객체 요소를 얻는 방법을 사용하는 경향이 있습니다.
주로 사용하는 버전 :

let c;
if ( !c ) {
// do something...
}

가장 좋아하는 버전 :

function myFunction( myString, myNumber, myObject, myArray, myBoolean ) {
// do something...
}
myFunction( "String", 1, [], {}, true );

번역자 주 : 원문 아래에 원문 포스터의 방식을 사용하는 것은 권장하지 않는다는 댓글이 있고, 첫 번째 버전을 사용하는 것이 좋습니다 함수 매개변수 순서대로 변경이 가능하지만 두 번째에 주의해야 합니다.

10. charAt()의 대안

단순화 전:

function myFunction() {
/* 注释部分
console.log( arguments.length ); // 返回 5
for ( i = 0; i < arguments.length; i++ ) {
console.log( typeof arguments[i] ); // 返回 string, number, object, object, boolean
}
*/
}
myFunction( "String", 1, [], {}, true );

단순화 후:

"myString".charAt(0);

번역자 주: I 첫 번째 방법을 사용하는 사람들은 이미 그다지 많지 않다고 생각합니다. 왼쪽!

11. 함수 호출이 더 짧아질 수 있습니다.

단순화 전:

"myString"[0];//返回'm'

단순화 후:

function x() {console.log('x')};function y() {console.log('y')};
let z = 3;
if (z == 3)
{
x();
} else
{
y();
}

12. 큰 수를 우아하게 표현하는 방법

JavaScript에는 숫자를 축약하는 방법이 있습니다. 아마도 간과했을 수도 있습니다. 1e7은 10000000을 의미합니다.
단순화 전:

function x() {console.log('x')};function y() {console.log('y')};let z = 3;
(z==3?x:y)();

단순화 후:

for (let i = 0; i < 10000; i++) {

위 내용은 자바스크립트 코드를 단순화하는 일반적인 기술에 대한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!