> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트 코드를 단순화하는 일반적인 기술에 대한 설명

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

巴扎黑
풀어 주다: 2017-08-12 16:22:56
원래의
1361명이 탐색했습니다.

이 글에서는 주로 자바스크립트 약어에 사용되는 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];//返回&#39;m&#39;
로그인 후 복사

단순화 후:


function x() {console.log(&#39;x&#39;)};function y() {console.log(&#39;y&#39;)};
let z = 3;
if (z == 3)
{
x();
} else
{
y();
}
로그인 후 복사

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

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


function x() {console.log(&#39;x&#39;)};function y() {console.log(&#39;y&#39;)};let z = 3;
(z==3?x:y)();
로그인 후 복사

단순화 후:


for (let i = 0; i < 10000; i++) {
로그인 후 복사

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿