자 바스 크 립 트 의 실행 효율 을 높이 는 23 가지 실 용적 인 기교

본 고 는 23 가지 자 바스 크 립 트 가 집행 효율 을 높이 는 작은 기교,최고의 실천 등 매우 실 용적 인 내용 을 공유 하고 자 한다.물론 자 바스 크 립 트 의 실 용적 인 기 교 는 이것 뿐만 아니 라 재 미 있 고 프로그램의 운영 효율 을 향상 시 킬 수 있 는 기술 도 많 습 니 다.앞으로 도 계속 공유 하 겠 습 니 다.
이 브 라 우 저 는 V8 자 바스 크 립 트 엔진(V8 3.20.17.15)을 사용 합 니 다.
1.논리 기호&&또는|를 사용 하여 조건 판단

var foo = 10; 
foo == 10 && doSomething(); //    foo == 10     doSomething(); 
foo == 5 || doSomething(); //    foo != 5    doSomething(); 

"||"도 함수 인자 의 기본 값 을 설정 할 수 있 습 니 다.

Function doSomething(arg1){ 
 Arg1 = arg1 || 10; //    arg1      Arg1=10
}

2.map()방법 으로 배열 을 옮 겨 다 니 기

var squares = [1,2,3,4].map(function (val) { 
 return val * val; 
}); 
//       [1, 4, 9, 16]

3.소수 자릿수 반올림

var num =2.443242342; 
num = num.toFixed(4); //         2.4432

4.부동 소수점 문제

0.1 + 0.2 === 0.3 // is false 
9007199254740992 + 1 // = 9007199254740992 
9007199254740992 + 2 // = 9007199254740994

0.1+0.2 는 0.300000000000004 와 같은 데 왜 이런 상황 이 발생 했 습 니까?IEEE 754 기준 에 따 르 면 모든 자 바스 크 립 트 숫자 가 64 비트 바 이 너 리 에 있 는 것 은 부동 소수점 을 표시 한 다 는 것 을 알 아야 합 니 다.개발 자 는 toFixed()와 toPrecision()방법 으로 이 문 제 를 해결 할 수 있 습 니 다.
5.for-in loop 을 사용 하여 대상 속성 을 검사 합 니 다.
아래 의 이 코드 는 주로 대상 속성 을 옮 겨 다 니 는 것 을 피하 기 위해 서 입 니 다.

for (var name in object) { 
 if (object.hasOwnProperty(name)) { 
  //     
 } 
}

6.쉼표 연산 자

var a = 0; 
var b = ( a++, 99 ); 
console.log(a); // a   1 
console.log(b); // b   99

7.캐 시 변 수 를 계산 하거나 조회
jQuery 선택 기 를 사용 한 경우 개발 자 는 DOM 요 소 를 캐 시 할 수 있 습 니 다.

var navright = document.querySelector('#right'); 
var navleft = document.querySelector('#left'); 
var navup = document.querySelector('#up'); 
var navdown = document.querySelector('#down'); 

8.isFinite()에 인 자 를 전달 하기 전에 검증

isFinite(0/0) ; // false 
isFinite("foo"); // false 
isFinite("10"); // true 
isFinite(10); // true 
isFinite(undifined); // false 
isFinite(); // false 
isFinite(null); // true !!!

9.배열 에서 마이너스 색인 피하 기

var numbersArray = [1,2,3,4,5]; 
var from = numbersArray.indexOf("foo") ; // from is equal to -1 
numbersArray.splice(from,2); // will return [5]

인자 가 index Of()방법 에 전달 되 는 것 이 마이너스 인지 확인 합 니 다.
10.(JSON 사용)직렬 화 와 역 직렬 화

var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} }; 
var stringFromPerson = JSON.stringify(person); 
/* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */ 
var personFromString = JSON.parse(stringFromPerson); 
/* personFromString is equal to person object */

11.eval()또는 Function 구조 함수 사용 피하 기
eval()과 Function 구조 함 수 는 스 크 립 트 엔진 이 라 고 불 리 며,이 를 실행 할 때마다 원본 코드 를 실행 가능 한 코드 로 변환 해 야 합 니 다.이것 은 매우 비 싼 작업 입 니 다.

var func1 = new Function(functionCode); 
var func2 = eval(functionCode);

12.with()방법 사용 피하 기
전역 영역 에 with()를 사용 하여 변 수 를 삽입 하면 이름 과 같은 변수 이름 이 있 으 면 헷 갈 리 고 다시 쓰기 쉽 습 니 다.
13.배열 에서 for-in loop 사용 하지 않 기
이렇게 쓰 는 것 이 아니 라

var sum = 0; 
for (var i in arrayNumbers) { 
 sum += arrayNumbers[i]; 
}

이렇게 하면 더욱 좋다.

var sum = 0; 
for (var i = 0, len = arrayNumbers.length; i < len; i++) { 
 sum += arrayNumbers[i]; 
}

i 와 len 은 순환 중의 첫 번 째 문장 이기 때문에 매번 실례 화 할 때마다 한 번 씩 실행 합 니 다.이렇게 하면 아래 보다 더 빨리 실 행 됩 니 다.

for (var i = 0; i < arrayNumbers.length; i++)

왜?배열 길이 arrayn Numbers 는 loop 이 바 뀔 때마다 다시 계 산 됩 니 다.
14.setTimeout()과 setInterval()방법 에 문자열 을 전달 하지 마 십시오.
이 두 가지 방법 에서 문자열 을 전달 하면 문자열 은 eval 처럼 다시 계산 합 니 다.이렇게 사용 하 는 것 이 아니 라 속도 가 느 려 집 니 다.

setInterval('doSomethingPeriodically()', 1000); 
setTimeOut('doSomethingAfterFiveSeconds()', 5000); 

반대로 이렇게 써 야 한다.

setInterval(doSomethingPeriodically, 1000); 
setTimeOut(doSomethingAfterFiveSeconds, 5000);

15.긴 if/else 문 구 를 switch/case 문 구 를 사용 하여 대체 합 니 다.
2 개 이상 의 케이스 가 있 으 면 switch/case 를 사용 하 는 속도 가 훨씬 빠 르 고 코드 가 더욱 우아 해 보 입 니 다.
16.수치 범 위 를 만 났 을 때 switch/casne 을 선택 할 수 있 습 니 다.

function getCategory(age) { 
 var category = ""; 
 switch (true) { 
  case isNaN(age): 
   category = "not an age"; 
   break; 
  case (age >= 50): 
   category = "Old"; 
   break; 
  case (age <= 20): 
   category = "Baby"; 
   break; 
  default: 
   category = "Young"; 
   break; 
 }; 
 return category; 
} 
getCategory(5); //    "Baby"

17.대상 을 만 듭 니 다.대상 의 속성 은 주어진 대상 입 니 다.
이러한 함 수 를 만 들 수 있 습 니 다.대상 을 만 들 수 있 습 니 다.이 대상 의 속성 은 주어진 대상 입 니 다.예 를 들 어 다음 과 같 습 니 다.

function clone(object) { 
 function OneShotConstructor(){}; 
 OneShotConstructor.prototype= object; 
 return new OneShotConstructor(); 
} 
clone(Array).prototype ; // []

18.HTML escaper 함수

function escapeHTML(text) { 
 var replacements= {"<": "<", ">": ">","&": "&", "\"": """};      
 return text.replace(/[<>&"]/g, function(character) { 
  return replacements[character]; 
 }); 
}

19.하나의 loop 에서 try-catch-finally 사용 을 피한다.
try-catch-finally 는 현재 범위 에서 실 행 될 때 새로운 변 수 를 만 듭 니 다.catch 를 실행 할 때 이상 대상 을 잡 으 면 변 수 를 할당 합 니 다.
이렇게 사용 하지 마 세 요:

var object = ['foo', 'bar'], i; 
for (i = 0, len = object.length; i <len; i++) { 
 try { 
  //     ，        
 } 
 catch (e) {  
  //     ，     
 } 
}

이렇게 사용 해 야 합 니 다:

var object = ['foo', 'bar'], i; 
try { 
 for (i = 0, len = object.length; i <len; i++) { 
  //     ，        
 } 
} 
catch (e) {  
 //     ，     
}

20.XML HttpRequests 에 timeouts 설정
XHR 가 너무 오래 걸 리 면 링크(예 를 들 어 네트워크 문제)를 종료 하고 XHR 에 setTimeout()을 사용 하여 해결 할 수 있 습 니 다.

var xhr = new XMLHttpRequest (); 
xhr.onreadystatechange = function () { 
 if (this.readyState == 4) { 
  clearTimeout(timeout); 
  //     
 } 
} 
var timeout = setTimeout( function () { 
 xhr.abort(); // call error callback 
}, 60*1000 /*   1     */ ); 
xhr.open('GET', url, true); 
 
xhr.send();

또한,일반적으로 당신 은 동기 화 Ajax 호출 을 완전히 피해 야 합 니 다.
21.웹 소켓 처리 시간 초과
일반적으로 웹 소켓 링크 를 만 들 때 서버 가 30 초 동안 방치 한 후에 링크 가 시간 을 초과 할 수 있 고 방치 한 후에 방화벽 도 시간 을 초과 할 수 있 습 니 다.
이러한 시간 초과 문 제 를 해결 하기 위해 서 는 정기 적 으로 서버 에 빈 메 시 지 를 보 낼 수 있 습 니 다.코드 에 두 개의 함 수 를 추가 할 수 있 습 니 다.하 나 는 링크 를 유지 하 는 데 사 용 됩 니 다.다른 하 나 는 링크 를 취소 하 는 데 사 용 됩 니 다.이런 방법 을 사용 하면 시간 초과 문 제 를 제어 할 것 입 니 다.
timeID 추가...

var timerID = 0; 
function keepAlive() { 
 var timeout = 15000; 
 if (webSocket.readyState == webSocket.OPEN) { 
  webSocket.send(''); 
 } 
 timerId = setTimeout(keepAlive, timeout); 
} 
function cancelKeepAlive() { 
 if (timerId) { 
  cancelTimeout(timerId); 
 } 
}

keepAlive()방법 은 웹 소켓 링크 방법 onOpen()의 끝 에 추가 하고 cancelKeepAlive()방법 은 onClose()방법 아래 에 두 어야 합 니 다.
22.가장 원시 적 인 조작 이 함수 호출 보다 빠르다 는 것 을 기억 하 라.
간단 한 임무 에 대해 서 는 함수 호출 이 아 닌 기본 조작 방식 으로 실현 하 는 것 이 좋다.
예컨대

var min = Math.min(a,b); 
A.push(v);

기본 동작 방식:

var min = a < b ? a b; 
A[A.length] = v;

23.인 코딩 시 코드 의 미관,읽 을 수 있 음 에 주의 하 세 요.
자 바스 크 립 트 는 매우 좋 은 언어 입 니 다.특히 전단 엔지니어 에 게 자 바스 크 립 트 의 실행 효율 도 매우 중요 합 니 다.
우 리 는 자바 스 크 립 트 프로그램 을 작성 할 때 작은 세부 사항 에 주의 하고 자주 사용 하 는 실 용적 인 작은 기 교 를 습득 하면 프로그램 을 더욱 간편 하 게 하고 프로그램 실행 효율 을 높 일 수 있 습 니 다.