45 자바스크립트 프로그래밍 주의사항과 기술_자바스크립트 기술

JavaScript는 세계에서 가장 널리 사용되는 프로그래밍 언어이며 웹 개발, 모바일 애플리케이션 개발(PhoneGap, Appcelerator), 서버측 개발(Node.js 및 Wakanda) 등에 사용할 수 있습니다. JavaScript는 많은 초보자가 프로그래밍 세계에 입문하는 첫 번째 언어이기도 합니다. 브라우저에 간단한 프롬프트 상자를 표시하거나 nodebot 또는 nodruino를 통해 로봇을 제어하는 ​​데 사용할 수 있습니다. 명확한 구조와 고성능으로 JavaScript 코드를 작성할 수 있는 개발자는 이제 채용 시장에서 가장 인기 있는 사람들입니다.

이 기사에서는 몇 가지 예외를 제외하고 브라우저의 JavaScript 엔진과 서버측 JavaScript 인터프리터 모두에 적용되는 몇 가지 JavaScript 팁, 비밀 및 모범 사례를 공유하겠습니다.

이 기사의 샘플 코드는 최신 버전의 Google Chrome 30(V8 3.20.17.15)에서 테스트를 통과했습니다.

1. 처음 변수에 값을 할당할 때는 반드시 var 키워드를 사용하세요

변수를 선언하지 않고 직접 할당하면 기본적으로 새로운 글로벌 변수로 사용됩니다. 글로벌 변수 사용을 피하세요.

2. ==

대신 ===를 사용하세요.

== 및 != 연산자는 필요한 경우 자동으로 데이터 유형을 변환합니다. 그러나 === 및 !==는 그렇지 않습니다. 값과 데이터 유형을 동시에 비교하므로 == 및 !=보다 빠릅니다.

코드 복사 코드는 다음과 같습니다.

[10] === 10 // 거짓입니다
[10] == 10 // 참입니다
'10' == 10 // 참입니다
'10' === 10 // 거짓입니다
[] == 0 // 참입니다
[] === 0 // 거짓입니다
'' == false // 참이지만 참 == "a"는 거짓입니다
'' === false // 거짓입니다

3. underfined, null, 0, false, NaN, 빈 문자열의 논리 결과는 모두 false입니다
4. 줄 끝에 세미콜론 을 사용하세요.

실제로는 세미콜론을 사용하는 것이 가장 좋습니다. 작성하는 것을 잊어버리더라도 대부분의 경우 JavaScript 인터프리터가 자동으로 추가합니다. 세미콜론이 사용되는 이유에 대한 자세한 내용은 JavaScript의 세미콜론에 관한 진실 기사를 참조하세요.

5. 객체 생성자 사용

코드 복사 코드는 다음과 같습니다.

함수 사람(firstName, lastName){
This.firstName = firstName;
This.lastName = 성;
}
var Saad = new Person("Saad", "Mousliki");

6. typeof, 인스턴스of 및 생성자를 신중하게 사용하세요
typeof: 문자열 형식으로 변수의 원래 유형을 반환하는 데 사용되는 JavaScript 단항 연산자. 대부분의 객체 유형(배열 배열, 시간 날짜 등)도 객체를 반환합니다. 객체
생성자: 내부 프로토타입 속성, 코드를 통해 재정의 가능
instanceof: JavaScript 연산자는 프로토타입 체인의 생성자를 검색하고, 발견되면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

코드 복사 코드는 다음과 같습니다.

var arr = ["a", "b", "c"];
typeof arr; // "객체"를 반환합니다
Array 인스턴스 // true
arr.constructor(); //[]

7. 자기 호출 기능을 사용하세요
함수는 생성 직후 자동으로 실행되며 일반적으로 자체 호출 익명 함수(Self-Invoked Anonymous Function) 또는 직접 호출되는 함수 표현식(Immediately Invoked Function Expression)이라고 합니다. 형식은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

(함수(){
//여기에 있는 코드는 자동으로 실행됩니다
})();
(함수(a,b){
var 결과 = a b;
결과 반환;
})(10,20)

8. 배열에서 멤버를 무작위로 얻습니다

코드 복사 코드는 다음과 같습니다.

var 항목 = [12, 548, 'a', 2, 5478, 'foo', 8852, , 'Doe', 2145, 119];
var randomItem = 항목[Math.floor(Math.random() * items.length)];

9. 지정된 범위 내에서 난수를 얻습니다
이 기능은 특정 범위 내의 급여 등 테스트용 가짜 데이터를 생성할 때 특히 유용합니다.

코드 복사 코드는 다음과 같습니다.

var x = Math.floor(Math.random() * (최대 - 최소 1)) min;

10. 0부터 지정된 값까지의 디지털 배열을 생성합니다

코드 복사 코드는 다음과 같습니다.

var numberArray = [] , 최대 = 100;
for( var i=1; numberArray.push(i )

11. 임의의 영숫자 문자열 생성

코드 복사 코드는 다음과 같습니다.

함수 generateRandomAlphaNum(len) {
var rdmString = "";
for( ; rdmString.length rdmString.substr(0, len)을 반환합니다.

12. 숫자 배열의 순서를 방해합니다

코드 복사 코드는 다음과 같습니다.

var 숫자 = [5, 458, 120, -215, 228, 400, 122205, -85411];
숫자 = 숫자.정렬(함수(){ return Math.random() - 0.5});
/* 숫자 배열은 [120, 5, 228, -215, 400, 458, -85411, 122205]와 같습니다. */

여기에서는 JavaScript의 내장 배열 정렬 기능이 사용됩니다. 더 나은 방법은 이를 구현하기 위해 특수 코드(예: Fisher-Yates 알고리즘)를 사용하는 것입니다. StackOverFlow에서 이 토론을 볼 수 있습니다.

13. 문자열에서 공백을 제거합니다

Java, C#, PHP 및 기타 언어는 모두 특수 문자열 공백 제거 기능을 구현하지만 JavaScript에는 이러한 기능이 없습니다. 다음 코드를 사용하여 String 개체에 대한 트림 기능을 수행할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

String.prototype.trim = function(){return this.replace(/^s |s $/g, "");};

새로운 JavaScript 엔진에는 이미 Trim()의 기본 구현이 있습니다.

14. 배열 사이에 추가

코드 복사 코드는 다음과 같습니다.

var array1 = [12 , "foo" , {name "Joe"} , -2458];
var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
/* array1의 값은 [12, "foo", {name "Joe"}, -2458, "Doe", 555, 100] */

15. 객체를 배열로 변환

코드 복사 코드는 다음과 같습니다.

var argArray = Array.prototype.slice.call(인수);

16. 숫자인지 확인하세요

코드 복사 코드는 다음과 같습니다.

함수 isNumber(n){
Return !isNaN(parseFloat(n)) && isFinite(n);
}

17. 배열인지 확인하세요

코드 복사 코드는 다음과 같습니다.

함수 isArray(obj){
Return Object.prototype.toString.call(obj) === '[객체 배열]' ;
}

그러나 toString() 메서드를 재정의하면 작동하지 않습니다. 다음 방법을 사용할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

Array.isArray(obj); // 새로운 Array 메서드입니다

브라우저에서 프레임을 사용하지 않는 경우에는 인스턴스오브(instanceof)를 사용할 수도 있지만, 컨텍스트가 너무 복잡하면 오류가 발생할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var myFrame = document.createElement('iframe');
document.body.appendChild(myFrame);
var myArray = window.frames[window.frames.length-1].Array;
var arr = new myArray(a,b,10); // [a,b,10]
// myArray의 생성자가 손실되어 인스턴스of의 결과가 비정상이 됩니다
// 생성자는 프레임 간에 공유될 수 없습니다.
Array 인스턴스; // false

18. 배열의 최대값과 최소값을 가져옵니다

코드 복사 코드는 다음과 같습니다.

var 숫자 = [5, 458, 120, -215, 228, 400, 122205, -85411]
var maxInNumbers = Math.max.apply(수학, 숫자)
var minInNumbers = Math.min.apply(수학, 숫자);

19. 배열 지우기

코드 복사 코드는 다음과 같습니다.

var myArray = [12, 222, 1000]
myArray.length = 0; // myArray는 []과 같습니다.

20. 배열에서 요소를 직접 삭제하거나 제거하지 마세요
배열 요소에 대해 직접 삭제를 사용하면 삭제되지 않지만 해당 요소는 정의되지 않음으로 설정됩니다. 배열 요소 삭제는 splice를 사용해야 합니다.

하지 마세요:

코드 복사 코드는 다음과 같습니다.

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]
items.length; // 11을 반환합니다
항목 삭제[3]; // true를 반환합니다
items.length; // 11을 반환합니다
/* 항목의 결과는 [12, 548, "a", 정의되지 않음 × 1, 5478, "foo", 8852, 정의되지 않음 × 1, "Doe", 2154, 119] */

대신:

코드 복사 코드는 다음과 같습니다.

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]
items.length; // 11을 반환합니다
items.splice(3,1)
items.length; // 10을 반환
/* 항목의 결과는 [12, 548, "a", 5478, "foo", 8852, undefine × 1, "Doe", 2154, 119]

delete는 객체의 속성을 삭제할 때 사용할 수 있습니다.

21. 길이 속성을 사용하여 배열을 자릅니다.

이전 예에서 길이 속성은 배열을 지우는 데 사용되었습니다. 또한 배열을 자르는 데에도 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var myArray = [12, 222, 1000, 124, 98, 10]
myArray.length = 4; // myArray는 [12, 222, 1000, 124]와 같습니다.

동시에, 길이 속성을 크게 하면 배열의 길이 값이 증가하고, 채워야 할 새로운 요소로 undefed 가 사용됩니다. length는 쓰기 가능한 속성입니다.

코드 복사 코드는 다음과 같습니다.

myArray.length = 10; // 새 배열 길이는 10입니다.
myArray[myArray.length - 1] // 정의되지 않음

22. 논리 AND 또는 조건을 사용하세요

코드 복사 코드는 다음과 같습니다.

var foo = 10
foo == 10 && doSomething(); // if (foo == 10) doSomething(); foo == 5 || doSomething(); // if (foo != 5) doSomething();
과 같습니다.

논리적 OR을 사용하여 함수 매개변수의 기본값과 같은 기본값을 설정할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

함수 doSomething(arg1){
arg1 = arg1 || 10; // arg1이 아직 설정되지 않은 경우 기본값은 10입니다.
}

23. 데이터에 대해 map() 함수 메서드를 반복합니다

코드 복사 코드는 다음과 같습니다.

var squares = [1,2,3,4].map(function (val) {
값 * 값 반환
})
// 정사각형은 [1, 4, 9, 16]
과 같습니다.

24. 소수점 이하 자릿수를 유지하세요

코드 복사 코드는 다음과 같습니다.

변수 번호 =2.443242342;
num = num.toFixed(4); // num은 2.4432
와 같습니다.

toFixec()은 숫자가 아닌 문자열을 반환합니다.

25. 부동소수점 계산 문제

코드 복사 코드는 다음과 같습니다.

0.1 0.2 === 0.3 // 거짓
9007199254740992 1 // 9007199254740992와 같습니다
9007199254740992 2 // 9007199254740994와 같습니다

왜? 0.1 0.2는 0.30000000000000004와 같기 때문입니다. JavaScript의 숫자는 IEEE 754 표준에 따라 구성되며 내부적으로 64비트 부동 소수점 소수점으로 표시됩니다. 자세한 내용은 JavaScript의 숫자가 인코딩되는 방식을 참조하세요.

이 문제는 toFixed() 및 toPrecision()을 사용하여 해결할 수 있습니다.

26. for-in 루프를 통해 객체의 속성을 확인합니다
다음 사용법은 반복 중에 객체의 프로토타입 속성을 입력하는 것을 방지할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

for (객체의 var 이름) {
If (object.hasOwnProperty(이름)) {
// 이름으로 작업 수행
}  
}

27.쉼표 연산자

코드 복사 코드는 다음과 같습니다.

var a = 0; var b = (a, 99)
console.log(a); // a는 1과 같습니다.
console.log(b); // b는 99

28.계산 및 쿼리에 사용되는 변수를 임시로 저장합니다
jQuery 선택기에서는 전체 DOM 요소를 임시로 저장할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

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

29. isFinite()에 전달된 매개변수를 미리 확인하세요

코드 복사 코드는 다음과 같습니다.

isFinite(0/0); // 거짓
isFinite("foo"); // false
isFinite("10"); // 참
isFinite(10); // 참
isFinite(정의되지 않음) // false
isFinite(); // 거짓
isFinite(null); // true, 이에 특별한 주의를 기울여야 합니다

30. 배열의 인덱스로 음수를 사용하지 마세요

코드 복사 코드는 다음과 같습니다.

var numberArray = [1,2,3,4,5];
var from = numberArray.indexOf("foo") ; // from은 -1과 같습니다
numberArray.splice(from,2); // [5]를 반환합니다

splice에 전달된 인덱스 매개변수는 음수이면 안 됩니다. 음수인 경우 해당 요소는 배열 끝에서 삭제됩니다.

31. JSON을 사용하여 직렬화 및 역직렬화

코드 복사 코드는 다음과 같습니다.

var person = {이름 :'사드', 나이 : 26, 부서 : {ID : 15, 이름 : "R&D"} };
var stringFromPerson = JSON.stringify(사람);
/* stringFromPerson의 결과는 "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */
var personFromString = JSON.parse(stringFromPerson);
/* personFromString의 값은 person 객체와 동일합니다. */

32. eval() 또는 함수 생성자를 사용하지 마세요
eval() 및 함수 생성자(함수 생성자)는 호출될 때마다 JavaScript 엔진이 소스 코드를 실행 가능한 코드로 변환해야 합니다.

코드 복사 코드는 다음과 같습니다.

var func1 = 새 함수(functionCode);
var func2 = eval(functionCode);

33. with() 사용을 피하세요
with()를 사용하면 전역 범위에 변수를 추가할 수 있으므로 같은 이름의 다른 변수가 있으면 혼동되기 쉽고 값을 덮어쓰게 됩니다.

34. 배열에 for-in을 사용하지 마세요
피해야 할 사항:

코드 복사 코드는 다음과 같습니다.

변수 합계 = 0
for (arrayNumbers의 var i) {
합계 = arrayNumbers[i]
}

대신:

코드 복사 코드는 다음과 같습니다.

변수 합계 = 0
for (var i = 0, len = arrayNumbers.length; i < len; i ) {
합계 = arrayNumbers[i]
}

또 다른 이점은 두 변수 i와 len이 for 루프의 첫 번째 문에 있고 한 번만 초기화된다는 점입니다. 이는 다음 작성 방법보다 빠릅니다.

코드 복사 코드는 다음과 같습니다.

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

35. setInterval() 및 setTimeout()에 전달할 때 문자열 대신 함수를 사용하세요
setTimeout() 및 setInterval()에 문자열을 전달하면 eval과 비슷한 방식으로 변환되므로 확실히 속도가 느려지므로 다음을 사용하지 마세요.

코드 복사 코드는 다음과 같습니다.

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

대신 다음을 사용하세요:

코드 복사 코드는 다음과 같습니다.

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

36. if/else를 많이 쌓는 대신 스위치/대소문자를 사용하세요

분기가 2개 이상이라고 판단할 때는 스위치/케이스를 사용하는 것이 더 빠르고 우아하며 코드 정리에 도움이 됩니다. 물론 브랜치가 10개 이상인 경우에는 스위치/케이스를 사용하지 마세요.

37. 스위치/케이스에 숫자 간격을 사용하세요

실제로 스위치/케이스의 케이스 조건은 다음과 같이 작성할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

함수 getCategory(나이) {
var 카테고리 = ""
스위치(true) {
케이스 isNaN(나이):
            카테고리 = "연령 아님"
휴식
사례(연령 >= 50):
            카테고리 = "이전"
휴식
사례(나이 <= 20):
            카테고리 = "아기"
휴식
기본:             카테고리 = "젊은이"
휴식
}; 반품 카테고리
}
getCategory(5); // "아기"를 반환합니다

38. 객체를 객체의 프로토타입으로 사용
이런 방법으로 객체를 매개변수로 제공하여 이 프로토타입을 기반으로 새 객체를 생성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

함수 클론(객체) {

함수 OneShotConstructor(){}; OneShotConstructor.prototype = 개체
새로운 OneShotConstructor() 반환
}
clone(Array).prototype; // []



39. HTML 필드 변환 기능

코드 복사 코드는 다음과 같습니다. 함수 escapeHTML(텍스트) {

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

          반품 교환[문자]
})
}



40. 루프 내에서 try-catch-final을 사용하지 마세요

try-catch-finally의 catch 부분은 실행 중에 예외를 변수에 할당하고, 이 변수는 런타임 범위에서 새 변수로 구성됩니다. 하지 마세요:

코드 복사

코드는 다음과 같습니다. var 객체 = ['foo', 'bar'], for (i = 0, len = object.length; i {

을 시도해 보세요. // 예외를 발생시키는 작업 수행
}  
 잡기 (e) {  
// 예외 처리
}
}


대신:

코드 복사

코드는 다음과 같습니다. var 객체 = ['foo', 'bar'], {

을 시도해 보세요. for (i = 0, len = object.length; i // 예외를 발생시키는 작업 수행
}
}
잡기 (e) {
// 예외 처리
}




41. XMLHttpRequests 사용 시 시간 제한 설정에 주의하세요

XMLHttpRequests 실행 시 오랜 시간 동안 응답이 없을 경우(예: 네트워크 문제 등) 연결을 종료해야 합니다. 이 작업은 setTimeout()을 통해 완료할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

var xhr = 새로운 XMLHttpRequest()
xhr.onreadystatechange = 함수() {
If (this.readyState == 4) {
                                                                        ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, // 응답 데이터로 작업 수행
}  
}
var timeout = setTimeout( function () {
xhr.abort(); // 오류 콜백 호출
}, 60*1000 /* 1분 후 시간 초과 */ ); xhr.open('GET', url, true)
xhr.send();


동시에 여러 XMLHttpRequests 요청을 동시에 시작하지 마십시오.

42. WebSocket 시간 초과 처리

일반적으로 WebSocket 연결이 생성된 후 30초 이내에 활동이 없으면 서버는 연결 시간을 초과합니다. 단위 기간 동안 활동이 없으면 방화벽은 연결 시간을 초과할 수도 있습니다.

이런 일이 발생하는 것을 방지하기 위해 일정한 간격으로 서버에 빈 메시지를 보낼 수 있습니다. 이 요구 사항은 다음 두 가지 기능을 통해 달성할 수 있습니다. 하나는 연결을 활성 상태로 유지하는 데 사용되고 다른 하나는 특별히 이 상태를 종료하는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다.

var 타이머ID = 0

함수 keepAlive() {
var 시간 초과 = 15000
If (webSocket.readyState == webSocket.OPEN) {
webSocket.send('')
}  
타이머Id = setTimeout(keepAlive, timeout)
}
함수 cancelKeepAlive() {
If (timerId) {
                                              cancelTimeout(timerId); }  
}


keepAlive() 함수는 WebSocket 연결의 onOpen() 메서드 끝에 배치될 수 있으며, cancelKeepAlive()는 onClose() 메서드 끝에 배치됩니다.

43. 기본 연산자는 함수 호출보다 빠르므로 VanillaJS를 사용하세요

예를 들어 일반적으로 다음을 수행하지 마세요.

코드 복사 코드는 다음과 같습니다. var min = Math.min(a,b)

A.push(v);

다음으로 대체할 수 있습니다:

코드 복사 코드는 다음과 같습니다. var min = a

A[A.길이] = v;

44. 개발 시 코드 구조에 주의하고, 온라인에 접속하기 전에 JavaScript 코드를 확인하고 압축하세요

JSLint 또는 JSMin과 같은 도구를 사용하여 코드를 검사하고 축소할 수 있습니다.