아시다시피 JavaScript는 세계 최고의 프로그래밍 언어이고, 웹 언어이며, 모바일 하이브리드 앱(예: PhoneGap 또는 Appcelerator)의 언어이고, 서버측 언어(예: NodeJS 또는 Wakanda)입니다. 그리고 다른 많은 구현이 있습니다. 동시에 브라우저에 간단한 경고 메시지를 표시할 수 있을 뿐만 아니라 로봇을 제어하는 데에도 사용할 수 있기 때문에(nodebot 또는 nodruino 사용) 많은 초보자를 위한 계몽 언어이기도 합니다. JavaScript를 마스터하고 체계적이고 표준화되었으며 성능이 뛰어난 효율적인 코드를 작성할 수 있는 개발자는 인재 시장에서 인기를 얻고 있습니다.
이 기사의 코드 조각은 V8 JavaScript 엔진(V8 3.20.17.15)을 사용하는 최신 Google Chrome(버전 30)에서 테스트되었습니다.
1 처음으로 변수에 값을 할당할 때 var 키워드를 사용하는 것을 잊지 마세요.
정의되지 않은 변수에 값을 할당하면 전역 변수가 생성됩니다. 전역 변수를 피하세요.
2 == 대신 ===를 사용하세요.
==(또는 !=) 연산자는 필요할 때 자동으로 유형 변환을 수행합니다. ===(또는 !==) 작업은 변환을 수행하지 않습니다. 값과 유형을 비교하며 ==보다 빠른 것으로 간주됩니다.
다음과 같이 코드 코드를 복사합니다.
[10] === 10 // 거짓입니다
[10] == 10 // 참입니다
'10' == 10 // 참입니다
'10' === 10 // 거짓입니다
[] == 0 // 참입니다
[] === 0 // 거짓
'' == false // 참이지만 참 == "a"는 거짓입니다.
'' === false // 거짓입니다
3 클로저를 사용하여 개인 변수 구현
다음과 같이 코드 코드를 복사합니다.
함수 사람(이름, 나이) {
this.getName = function() { 반환 이름 };
this.setName = function(newName) { 이름 = newName };
this.getAge = function() { 나이 반환 };
this.setAge = function(newAge) { 연령 = newAge };
//생성자에서 속성이 초기화되지 않았습니다.
var 직업;
this.getOccupation = function() { 직업 반환 };
this.setOccupation = function(newOcc) { 직업 =
새로운Occ };
}
4 문장 끝에는 세미콜론을 사용하세요
명령문 끝에 세미콜론을 사용하는 것이 좋습니다. 대부분의 경우 JavaScript 인터프리터가 세미콜론을 추가해 주기 때문에 작성하는 것을 잊어버리더라도 경고가 표시되지 않습니다.
5 객체의 생성자를 생성합니다
코드를 복사하면 다음과 같습니다. function Person(firstName, lastName){
this.firstName = 이름;
this.lastName = 성;
}
var Saad = new Person("Saad", "Mousliki");
6 typeof, instanceof 및 생성자를 신중하게 사용하십시오.
다음과 같이 코드를 복사합니다. var arr = ["a", "b", "c"];
typeof arr; // "객체"를 반환합니다.
arr 인스턴스 오브 배열 // 참
arr.constructor(); //[]
7 자체 호출 함수 생성(Self-calling Function)
이를 종종 자체 호출 익명 함수 또는 IIFE 즉시 호출 함수 표현식이라고 합니다. 생성 직후 자동으로 실행되는 함수로, 일반적으로 다음과 같습니다.
다음과 같이 코드 코드를 복사합니다.
(기능(){
// 자동으로 실행될 일부 비공개 코드
})();
(함수(a,b){
var 결과 = a+b;
결과 반환;
})(10,20)
8- 배열에서 임의의 항목 가져오기
복사 코드는 다음과 같습니다. var items = [12, 548, 'a', 2, 5478, 'foo', 8852, , 'Doe', 2145, 119];
var randomItem = 항목[Math.floor(Math.random() * items.length)];[code]
9 특정 범위 내에서 난수 얻기
이 코드 조각은 최소값과 최대값 사이의 임의 급여 값과 같은 테스트 데이터를 생성하려는 경우에 유용합니다.
[코드]var x = Math.floor(Math.random() * (최대 - 최소 + 1)) + min;
10 0과 설정된 최대값 사이의 숫자 배열을 생성합니다.
다음과 같이 코드를 복사합니다. var numberArray = [], max = 100;
for( var i=1;numberArray.push(i++) < max;); // 숫자 = [0,1,2,3 ... 100]
11 임의의 영숫자 문자열 생성
코드를 복사하면 다음과 같습니다. function generateRandomAlphaNum(len) {
var rdmstring = "";
for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
rdmString.substr(0, len)을 반환합니다.
}
12 숫자 배열을 뒤섞기
복사 코드는 다음과 같습니다: var number = [5, 458, 120, -215, 228, 400, 122205, -85411];
숫자 = 숫자.정렬(function(){ return Math.random() - 0.5});
/* 배열 번호는 예를 들어 [120, 5, 228, -215, 400, 458, -85411, 122205]와 같습니다. */
13 스트링 트림 기능
Java, C#, PHP 및 기타 여러 언어에는 문자열에서 공백을 제거하는 데 사용되는 전통적인 트림 함수가 있지만 JavaScript에는 존재하지 않으므로 이 함수를 String 개체에 추가해야 합니다.
다음과 같이 코드 코드를 복사합니다.
String.prototype.trim = function(){return this.replace(/^/s+|/s+$/g, "");};//문자열의 내부 공백을 제외하고 문자열의 앞뒤 공백을 제거합니다. 끈
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]과 동일합니다 */
//실제로 concat은 두 개의 배열을 직접 연결할 수 있지만 반환값은 새로운 배열입니다. array1에 대한 직접적인 변경 사항은 다음과 같습니다.
15 인수 객체를 배열로 변환
다음과 같이 코드를 복사합니다. var argArray = Array.prototype.slice.call(arguments);
인수 객체는 배열과 유사한 객체이지만 실제 배열은 아닙니다.
16 매개변수가 숫자(number)인지 확인
코드를 복사하면 다음과 같습니다. function isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n);
}
17 매개변수가 배열인지 확인
다음과 같이 코드를 복사합니다. function isArray(obj){
return Object.prototype.toString.call(obj) === '[객체 배열]' ;
}
참고: toString() 메서드를 재정의하면 이 기술을 사용하여 원하는 결과를 얻을 수 없습니다. 또는 다음을 사용할 수 있습니다.
다음과 같이 코드 코드를 복사합니다.
Array.isArray(obj); // 새로운 배열 메소드입니다.
여러 프레임을 사용하지 않는 경우에는 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]
//instanceof가 올바르게 작동하지 않습니다. myArray는 생성자를 잃습니다.
// 생성자는 프레임 간에 공유되지 않습니다.
Array 인스턴스 // 거짓
18 숫자 배열에서 최대값 또는 최소값을 구하세요.
복사 코드는 다음과 같습니다: var number = [5, 458, 120, -215, 228, 400, 122205, -85411];
var maxInNumbers = Math.max.apply(수학, 숫자);
var minInNumbers = Math.min.apply(수학, 숫자);
//번역자 참고사항: 여기서는 function.prototype.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, 정의되지 않음 × 1, "Doe", 2154, 119] */
객체의 속성을 삭제하려면 delete 메소드를 사용해야 합니다.
21 배열을 자르려면 길이를 사용하세요
위의 배열을 지우는 방법과 유사하게 length 속성을 사용하여 배열을 자릅니다.
다음과 같이 코드를 복사합니다. 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 조건부 판단을 위해 논리적 AND/OR를 사용하세요
다음과 같이 코드 코드를 복사합니다.
var foo = 10;
foo == 10 && doSomething(); // if (foo == 10) doSomething();
foo == 5 || doSomething(); // if (foo != 5) doSomething();
논리 AND를 사용하여 함수 매개변수의 기본값을 설정할 수도 있습니다.
다음과 같이 코드 코드를 복사합니다.
함수 doSomething(arg1){
Arg1 = arg1 || 10; // arg1이 설정되지 않은 경우 Arg1은 기본적으로 10으로 설정됩니다.
}
23 map() 메소드를 사용하여 배열의 항목을 반복합니다.
코드를 복사하면 다음과 같습니다: var squares = [1,2,3,4].map(function (val) {
반환 값 * 값;
});
// 정사각형은 [1, 4, 9, 16]과 같습니다.
24 숫자를 소수 N자리로 반올림합니다.
다음과 같이 코드를 복사합니다. var num =2.443242342;
num = num.toFixed(4); // num은 2.4432와 같습니다.
25 부동 소수점 문제
다음과 같이 코드를 복사합니다. 0.1 + 0.2 === 0.3 // false입니다.
9007199254740992 + 1 // 9007199254740992와 같습니다.
9007199254740992 + 2 //는 9007199254740994와 같습니다.
왜 이런 일이 발생합니까? 0.1+0.2는 0.30000000000000004와 같습니다. 모든 JavaScript 숫자는 내부적으로 IEEE 754 표준을 준수하는 64비트 바이너리의 부동 소수점 숫자로 표시된다는 점을 알아야 합니다. 자세한 소개를 보려면 이 블로그 게시물을 읽어보세요. 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) // false
isFinite("foo"); // 거짓
isFinite("10"); // 참
isFinite(10); // 참
isFinite(정의되지 않음); // 거짓
isFinite(); // 거짓
isFinite(null); // 참 !!!
30 배열에서 음수 인덱스를 피하세요
다음과 같이 코드를 복사합니다. var numberArray = [1,2,3,4,5];
var from = numberArray.indexOf("foo") ; // from은 -1과 같습니다.
numberArray.splice(from,2); // [5]를 반환합니다.
indexOf를 호출할 때 매개변수가 음수가 아닌지 확인하세요.
31 JSON 기반 직렬화 및 역직렬화(serialization and deserialization)
다음과 같이 코드를 복사합니다. var person = {name :'Saad', age : 26, Department : {ID : 15, name : "R&D"} };
var stringFromPerson = JSON.stringify(사람);
/* stringFromPerson은 "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}"와 같습니다 */
var personFromString = JSON.parse(stringFromPerson);
/* personFromString은 사람 객체와 같습니다 */
32 eval()과 함수 생성자를 사용하지 마세요
eval 및 Function 생성자를 사용하는 것은 소스 코드를 실행 가능한 코드로 변환하기 위해 스크립트 엔진을 호출할 때마다 비용이 많이 드는 작업입니다.
다음과 같이 코드를 복사합니다. var func1 = new Function(functionCode);
var func2 = eval(functionCode);
33 with() 사용을 피하세요
with()를 사용하면 전역 변수가 삽입됩니다. 따라서 같은 이름의 변수는 해당 값을 덮어쓰게 되어 불필요한 문제를 일으키게 됩니다.
34 배열을 반복할 때 for-in 사용을 피하세요
다음과 같은 방법을 사용하지 마십시오.
다음과 같이 코드를 복사합니다. var sum = 0;
for (arrayNumbers의 var i) {
합계 += arrayNumbers[i];
}
더 좋은 방법은 다음과 같습니다.
다음과 같이 코드를 복사합니다. var sum = 0;
for (var i = 0, len = arrayNumbers.length; i < len; i++) {
합계 += arrayNumbers[i];
}
추가적인 이점은 두 변수 i와 len의 값이 한 번만 실행된다는 점이며 이는 다음 방법보다 효율적입니다.
다음과 같이 코드를 복사합니다. for (var i = 0; i < arrayNumbers.length; i++)
왜? arrayNumbers.length는 반복될 때마다 계산되기 때문입니다.
35 setTimeout() 및 setInterval()을 호출할 때 문자열 대신 함수를 전달합니다.
setTimeout()이나 setInterval()에 문자열을 전달하면 마치 eval을 사용하는 것처럼 문자열이 구문 분석되므로 시간이 많이 걸립니다.
사용하지 마세요:
다음과 같이 코드 코드를 복사합니다.
setInterval('doSomethingPeriodically()', 1000);
setTimeOut('doSomethingAfterFiveSeconds()', 5000)
대신 다음을 사용하십시오.
다음과 같이 코드 코드를 복사합니다.
setInterval(doSomethingPeriodically, 1000);
setTimeOut(doSomethingAfterFiveSeconds, 5000);
36 긴 if/else 문 대신에 switch/case 문을 사용하세요
2개 이상의 상황을 판단할 때는 스위치/케이스를 사용하는 것이 더 효율적이고 우아합니다(코드 구성이 더 쉽습니다). 단, 판단해야 할 상황이 10개 이상인 경우에는 스위치/케이스를 사용하지 마십시오.
37 수치범위 판단 시 스위치/케이스를 활용하라
다음 상황에서는 스위치/케이스를 사용하여 값 범위를 결정하는 것이 합리적입니다.
다음과 같이 코드 코드를 복사합니다.
함수 getCategory(나이) {
var 카테고리 = "";
스위치 (참) {
경우 isNaN(나이):
카테고리 = "연령 아님";
부서지다;
사례(연령 >= 50):
카테고리 = "오래된";
부서지다;
사례(연령 <= 20):
카테고리 = "아기";
부서지다;
기본:
카테고리 = "젊은이";
부서지다;
};
반품 카테고리;
}
getCategory(5); // "아기"를 반환합니다.
//일반적으로 수치 범위를 판단할 때는 if/else를 사용하는 것이 더 적합합니다. 스위치/케이스는 특정 값을 판단하는 데 더 적합합니다.
38 생성된 객체에 대한 프로토타입 객체 지정
프로토타입으로 지정된 매개변수를 사용하여 객체를 생성하는 함수를 작성하는 것이 가능합니다.
다음과 같이 코드를 복사합니다. function clone(object) {
함수 OneShotConstructor(){};
OneShotConstructor.prototype=객체;
새로운 OneShotConstructor()를 반환합니다.
}
clone(Array).prototype; // []
39 HTML 이스케이프 기능
다음과 같이 코드를 복사합니다. function escapeHTML(text) {
var replacements= {"<": "<", ">": ">","&": "&", "/"": """};
return text.replace(/[<>&"]/g, function(character) {
대체물 반환[문자];
});
}
40 루프 내에서 try-catch-finally 사용을 피하세요
런타임 시 catch 절이 실행될 때마다 catch된 예외 개체가 변수에 할당되고 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에 대한 시간 제한을 설정합니다.
XHR 요청에 오랜 시간이 걸리면(예: 네트워크 문제로 인해) 요청을 중단해야 할 수도 있습니다. 그런 다음 XHR 호출과 함께 setTimeout()을 사용할 수 있습니다.
다음과 같이 코드를 복사합니다. var xhr = new XMLHttpRequest();
xhr.onreadystatechange = 함수() {
if (this.readyState == 4) {
ClearTimeout(타임아웃);
// 응답 데이터로 작업 수행
}
}
var timeout = setTimeout( function () {
xhr.abort(); // 오류 콜백 호출
}, 60*1000 /* 1분 후 시간 초과 */ );
xhr.open('GET', url, true);
xhr.send();
또한 일반적으로 동기식 Ajax 요청을 완전히 피해야 합니다.
42 WebSocket 시간 초과 처리
일반적으로 WebSocket 연결이 생성된 후 사용자가 활동하지 않으면 서버는 30초 후에 연결 시간을 초과합니다. 방화벽은 일정 기간 동안 활동이 없으면 연결이 끊어집니다.
시간 초과 문제를 방지하려면 간헐적으로 빈 메시지를 서버에 보내야 할 수도 있습니다. 이렇게 하려면 다음 두 가지 기능을 코드에 추가하면 됩니다. 하나는 연결을 유지하는 기능이고 다른 하나는 연결 보류를 취소하는 기능입니다. 이 기술을 사용하면 시간 초과 문제를 제어할 수 있습니다.
타이머ID를 사용하세요:
다음과 같이 코드를 복사합니다. var 타이머ID = 0;
함수 keepAlive() {
var 시간 초과 = 15000;
if (webSocket.readyState == webSocket.OPEN) {
webSocket.send('');
}
timeId = setTimeout(keepAlive, timeout);
}
함수 cancelKeepAlive() {
if (timerId) {
cancelTimeout(timerId);
}
}
keepAlive() 메소드는 webSOcket 연결의 onOpen() 메소드 끝에 추가되어야 하며, cancelKeepAlive()는 onClose() 메소드 끝에 추가됩니다.
43 원시 연산자는 항상 함수 호출보다 더 효율적이라는 점을 명심하십시오. 바닐라JS를 사용하세요.
예를 들어 다음은 사용하지 마세요.
코드를 복사하면 다음과 같습니다. var min = Math.min(a,b);
A.푸시(v);
대신 다음을 사용하십시오.
다음과 같이 코드를 복사합니다. var min = a < b ?
A[A.길이] = v;
44 코딩할 때 코드 정리 도구를 사용하는 것을 잊지 마세요 . 온라인에 접속하기 전에 JSLint 및 코드 압축 도구(축소)(JSMin 등)를 사용하세요. "시간 절약 도구: 코드 미화 및 서식 지정 도구"
45 자바스크립트는 정말 놀랍습니다.
요약
이외에도 많은 팁, 요령, 모범 사례가 있다는 것을 알고 있습니다. 제가 공유한 내용에 추가하고 싶거나 피드백 또는 수정하고 싶은 내용이 있으면 댓글로 알려주시기 바랍니다.