JavaScript는 웹 개발, 모바일 애플리케이션 개발 (PhoneGap, Appcelerator), 서버 측 개발 (node.js 및 wakanda) 등에 사용할 수있는 세계적 수준의 프로그래밍 언어입니다. JavaScript는 많은 초보자가 프로그래밍 세계에 들어가는 첫 번째 언어이기도합니다. 브라우저에 간단한 프롬프트 상자를 표시하거나 Nodebot 또는 Noderuino를 통해 로봇을 제어하는 데 사용할 수 있습니다. 잘 구조화되고 효율적인 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 //는 true하지만 true == "a"는 거짓입니다.
''=== 거짓 // 거짓입니다
3. underfined, null, 0, false, nan 및 빈 줄의 논리적 결과는 모두 거짓입니다
4. 줄 끝에서 세미콜론을 사용하십시오
실제로 세미콜론을 사용하는 것이 가장 좋습니다. 그것들을 쓰는 것을 잊어 버리는 것은 괜찮습니다. 대부분의 경우 JavaScript 통역사가 자동으로 추가됩니다. 세미콜론을 사용하려는 이유에 대해서는 JavaScript 기사에서 세미콜론에 대한 진실을 참조 할 수 있습니다.
5. 객체 생성자를 사용하십시오
코드 사본은 다음과 같습니다.
기능인 (FirstName, lastName) {
this.firstName = FirstName;
this.lastname = lastName;
}
var saad = 새로운 사람 ( "Saad", "Mousliki");
6. 타입, 인스턴스 및 생성자에주의하십시오
typeof : javaScript unary 연산자, 문자열 형태의 원래 유형의 변수를 반환하는 데 사용됩니다. NULL 유형은 또한 객체를 반환하고 대부분의 객체 유형 (배열, 시간 날짜 등)도 객체를 반환합니다.
생성자 : 내부 프로토 타입 속성, 코드를 통해 다시 작성할 수 있습니다.
인스턴스 : JavaScript 연산자는 프로토 타입 체인의 생성자에서 검색하고, 찾은 경우 true를 반환하고, 그렇지 않으면 false가 false를 반환합니다.
코드 사본은 다음과 같습니다.
var arr = [ "a", "b", "c"];
ARR 유형; // "Object"반환
ARR INSTACEOF ARRAY // true
arr.constructor (); // []
7. 자기 대화 기능을 사용하십시오
함수는 생성 직후에 자동으로 실행되며, 일반적으로 자체 관련된 익명 함수 또는 직접 통화 기능 표현 (즉시 호출 된 기능 표현)이라고합니다. 형식은 다음과 같습니다.
코드 사본은 다음과 같습니다.
(기능(){
// 여기에 배치 된 코드는 자동으로 실행됩니다
}) ();
(기능 (a, b) {
var result = a+b;
반환 결과;
}) (10,20)
8. 배열에서 무작위로 멤버를 얻습니다
코드 사본은 다음과 같습니다.
var 항목 = [12, 548, 'a', 2, 5478, 'foo', 8852, 'doe', 2145, 119];
var randomitem = 항목 [math.floor (math.random () * eirest.length)];
9. 지정된 범위 내에서 난수를 얻습니다
이 기능은 지정된 범위 내의 임금 수와 같은 테스트를 위해 잘못된 데이터를 생성 할 때 특히 숫자입니다.
코드 사본은 다음과 같습니다.
var x = math.floor (math.random () * (max -min + 1)) + min;
10. 0에서 지정된 값으로 숫자 배열을 생성합니다.
코드 사본은 다음과 같습니다.
var numbersArray = [], max = 100;
for (var i = 1; numbersArray.push (i ++) <max;); // 번호 = [1,2,3 ... 100]
11. 임의의 영숫자 문자열을 생성합니다
코드 사본은 다음과 같습니다.
기능 속도 란도 말 프라 늄 (Len) {
var rdmstring = "";
for (; rdmstring.length <len; rdmstring += math.random (). tostring (36) .substr (2));
rdmstring.substr (0, len);
12. 숫자 배열 순서를 방해합니다
코드 사본은 다음과 같습니다.
var 번호 = [5, 458, 120, -215, 228, 400, 122205, -85411];
숫자 = numbers.sort (function () {return math.random () -0.5});
/ * 숫자 배열은 [120, 5, 228, -215, 400, 458, -85411, 122205]와 유사합니다. */
여기서는 JavaScript의 내장 배열 정렬 기능을 사용합니다. 더 좋은 방법은 Special Code (예 : Fisher-Yates 알고리즘)로 구현하는 것입니다. StackoverFlow 에서이 논의를 참조 할 수 있습니다.
13. 문자열에서 공간을 제거하십시오
Java, C# 및 PHP와 같은 언어는 모두 특수 문자열 Despace 함수를 구현하지만 JavaScript와 같은 것은 없습니다. 다음 코드를 사용하여 문자열 객체 함수에 대한 트림 함수를 만들 수 있습니다.
코드 사본은 다음과 같습니다.
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); // 새로운 배열 메소드입니다
브라우저에서 프레임을 사용하지 않으면 인스턴스를 사용할 수도 있지만 컨텍스트가 너무 복잡한 경우 오류가 발생할 수도 있습니다.
코드 사본은 다음과 같습니다.
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의 생성자가 손실되었으며 인스턴스의 결과는 비정상적입니다.
// 생성자는 프레임에서 공유 할 수 없습니다
ARR 인스턴스 배열; // 거짓
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. 배열에서 직접 요소를 삭제하거나 제거하지 마십시오.
배열 요소에서 직접 삭제를 사용하는 경우 실제로 삭제되지는 않지만 요소를 정의되지 않은 것으로 설정하십시오. 스플 라이스는 어레이 요소 삭제에 사용해야합니다.
하지 않다:
코드 사본은 다음과 같습니다.
var 항목 = [12, 548, 'a', 2, 5478, 'foo', 8852, 'doe', 2154, 119];
항목. 길이; // 반환 11
항목 삭제 [3]; // true를 반환합니다
항목. 길이; // 반환 11
/ * 항목 결과는 [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "doe", 2154, 119] */입니다.
용 :
코드 사본은 다음과 같습니다.
var 항목 = [12, 548, 'a', 2, 5478, 'foo', 8852, 'doe', 2154, 119];
항목. 길이; // 반환 11
items.splice (3,1);
항목. 길이; // 반환 10
/* 항목 결과는 [12, 548, "a", 5478, "foo", 8852, 정의되지 않은 × 1, "doe", 2154, 119입니다.
객체의 속성을 삭제할 때 삭제를 사용할 수 있습니다.
21. 길이 속성을 사용하여 배열을 자릅니다
이전 예제에서는 길이 속성을 사용하여 배열을 지우고 배열을 자르기 위해 사용할 수도 있습니다.
코드 사본은 다음과 같습니다.
var myarray = [12, 222, 1000, 124, 98, 10];
myArray.length = 4; // myArray는 [12, 222, 1000, 124]와 같습니다.
동시에, 길이 속성이 증가하면 배열의 길이 값이 증가하고 정의되지 않은 미등록을 채우는 새로운 요소로 사용됩니다. 길이는 쓰기 가능한 속성입니다.
코드 사본은 다음과 같습니다.
myArray.length = 10; // 새 배열 길이는 10입니다
myArray [myArray.length -1]; // 한정되지 않은
22. 논리 및 조건에서 사용하십시오
코드 사본은 다음과 같습니다.
var foo = 10;
foo == 10 && dosomething (); // (foo == 10) dosomething ()과 마찬가지로 동일합니다.
foo == 5 || dosomething (); // (foo! = 5) dosomething ()과 같은 것입니다.
논리적이거나 기능 매개 변수의 기본값과 같은 기본값을 설정하는 데 사용될 수도 있습니다.
코드 사본은 다음과 같습니다.
함수 dosomething (arg1) {
arg1 = arg1 || 10; // Arg1은 아직 설정되지 않은 경우 기본값으로 10을 갖습니다.
}
23. Map () 함수 메소드를 데이터를 루프로 만듭니다
코드 사본은 다음과 같습니다.
var squares = [1,2,3,4] .map (function (val) {
반환 val * val;
});
// 제곱은 [1, 4, 9, 16]와 같습니다.
24. 지정된 소수점 자리를 유지하십시오
코드 사본은 다음과 같습니다.
var num = 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.300000000000000000000004와 같기 때문입니다. JavaScript 번호는 IEEE 754 표준에 따라 구성되며 내부적으로 64 비트 플로팅 포인트 소수로 표시됩니다. 자세한 내용은 JavaScript의 숫자가 인코딩되는 방법을 참조하십시오.
이 문제는 tofixed () 및 toprecision ()을 사용하여 해결할 수 있습니다.
26. For-In Loop을 통해 객체의 속성을 확인하십시오
다음 사용법은 반복 중에 물체의 프로토 타입 특성을 입력하는 것을 방지 할 수 있습니다.
코드 사본은 다음과 같습니다.
for (var name in object) {
if (object.hasownProperty (name)) {
// 이름으로 뭔가를합니다
}
}
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"); // 거짓
Isfinite ( "10"); // 진실
Isfinite (10); // 진실
Isfinite (정의되지 않은); // 거짓
isfinite (); // 거짓
Isfinite (null); // 사실, 이것에 특별한주의를 기울이십시오
30. 어레이에서 음수를 인덱싱하는 것을 피하십시오
코드 사본은 다음과 같습니다.
var numbersarray = [1,2,3,4,5];
var from = numbersArray.indexof ( "foo"); //는 -1과 같습니다
NumbersArray.splice (From, 2); // 반환됩니다 [5]
스플 라이스로 전달 된 인덱스 매개 변수는 음수가 아닙니다. 음수 인 경우 배열 끝에서 요소가 삭제됩니다.
31. JSON을 사용하여 직렬화하고 사제 화하십시오
코드 사본은 다음과 같습니다.
var person = {name : 'saad', 나이 : 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);
/* 개인의 가치는 사람의 값과 동일합니다*/
32. eval () 또는 함수 생성자를 사용하지 마십시오
Eval () 및 기능 생성자의 오버 헤드가 높습니다. 호출 할 때마다 JavaScript 엔진은 소스 코드를 실행 가능한 코드로 변환해야합니다.
코드 사본은 다음과 같습니다.
var func1 = 새로운 함수 (functionCode);
var func2 = 평가 (functionCode);
33. ()와 함께 사용하지 마십시오.
()와 함께 사용하여 전역 범위에 변수를 추가하십시오. 따라서 이름이 같은 다른 변수가있는 경우 혼란스러워지고 값도 덮어 쓸 것입니다.
34. 배열에는 in을 사용하지 마십시오
피하다:
코드 사본은 다음과 같습니다.
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 Loop의 첫 번째 선언에 있으며, 둘 다 다음 작문 방법보다 빠릅니다.
코드 사본은 다음과 같습니다.
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의 큰 스택 대신 스위치/케이스를 사용하십시오.
두 개 이상의 분기가 있다고 판단 할 때는 스위치/케이스를 사용하여 더 빠르고 우아하며 코드 구성에 더 도움이됩니다. 물론 10 개가 넘는 지점이있는 경우 스위치/케이스를 사용하지 마십시오.
37. 스위치/케이스에서 디지털 간격을 사용하십시오
실제로, 스위치/케이스의 사례 조건은 다음과 같이 작성할 수 있습니다.
코드 사본은 다음과 같습니다.
함수 getCategory (Age) {
var category = "";
스위치 (true) {
사례 isnan (나이) :
카테고리 = "나이가 아님";
부서지다;
사례 (연령> = 50) :
카테고리 = "오래된";
부서지다;
사례 (Age <= 20) :
카테고리 = "베이비";
부서지다;
기본:
카테고리 = "젊은";
부서지다;
};
반환 카테고리;
}
getCategory (5); // "baby"를 반환합니다.
38. 객체를 프로토 타입으로 사용하십시오
이런 식으로, 당신은 이것을 기반으로 매개 변수로 새 개체를 만들 수 있습니다.
코드 사본은 다음과 같습니다.
함수 클론 (객체) {
함수 oneshotConstructor () {};
oneshotconstructor.prototype = 객체;
새로운 oneshotConstructor ()를 반환합니다.
}
클론 (배열). 프로로 타입; // []
39. HTML 필드 변환 기능
코드 사본은 다음과 같습니다.
함수 EscapeHtml (텍스트) {
var grepacements = { "<": "<", ">": ">", "&": "&", "/": "" "};
return text.replace (/[<> & "]/g, function (문자) {
반환 교체 [문자];
});
}
40. 루프 내부에서 트리 캐치-페이닝을 사용하지 마십시오
Try-Catch-Finally의 캐치 부분은 실행될 때 변수에 예외를 할당 하며이 변수는 런타임 범위 내에서 새로운 변수로 구성됩니다.
하지 않다:
코드 사본은 다음과 같습니다.
var object = [ 'foo', 'bar'], i;
for (i = 0, len = object.length; i <len; i ++) {
노력하다 {
// 예외를 던지는 일을합니다
}
캐치 (e) {
// 예외를 처리합니다
}
}
대신에:
코드 사본은 다음과 같습니다.
var object = [ 'foo', 'bar'], i;
노력하다 {
for (i = 0, len = object.length; i <len; i ++) {
// 예외를 던지는 일을합니다
}
}
캐치 (e) {
// 예외를 처리합니다
}
41. xmlhttprequests를 사용할 때 시간 초과 설정에주의하십시오
xmlhttprequests가 실행되면 오랫동안 응답이 없으면 (예 : 네트워크 문제 등) 연결을 중단해야합니다. 이 작업은 settimeout ()에서 수행 할 수 있습니다.
코드 사본은 다음과 같습니다.
var xhr = 새로운 xmlhttprequest ();
xhr.onreadystatechange = function () {
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 timerid = 0;
function keepalive () {
var 시간 초과 = 15000;
if (websocket.readystate == websocket.open) {
WebSocket.Send ( '');
}
TIMERID = SETTIMEOUT (KeepAlive, TimeOut);
}
함수 cancelKeepalive () {
if (타이머) {
Canceltimeout (타이머리);
}
}
webSocket 연결의 onopen () 메소드의 끝에 recopalive () 함수를 배치 할 수 있으며 onclose () 메소드의 끝에 valceKeepalive ()를 배치 할 수 있습니다.
43. 시간에주의를 기울이면 원래 연산자가 함수 호출보다 빠릅니다. Vanillajs를 사용하십시오
예를 들어, 일반적으로 이것을 좋아하지 않습니다.
코드 사본은 다음과 같습니다.
var min = math.min (a, b);
a.push (v);
대신 사용할 수 있습니다.
코드 사본은 다음과 같습니다.
var min = a <b? A : B;
a [a.length] = v;
44. 개발 중에 코드 구조에주의를 기울이십시오.
JSLINT 또는 JSMIN과 같은 도구를 사용하여 코드를 확인하고 압축 할 수 있습니다.