이 글에서는 주로 자바스크립트 약어에 사용되는 12가지 기술을 공유합니다. 이러한 12가지 기술을 통해 JS 코드의 양을 크게 줄일 수 있습니다. 알다? 필요하신 친구들은 에디터를 따라가서 함께 배워보세요.
머리말
이 기사는 주로 JavaScript 약어에 일반적으로 사용되는 12가지 기술을 공유합니다. 초보자이든 숙련자이든 읽어볼 가치가 있습니다! 아래에서 할 말은 많지 않으나 자세한 소개를 살펴보겠습니다.
1. 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++) {
요약
위 내용은 JavaScript 코드 양을 줄이는 12가지 일반적인 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!