길에서 보다 -- 자 바스 크 립 트
http://chensd.com/2015-01/45-useful-javascript-tips-tricks-and-best-practices.html JavaScript 는 전 세계 에서 가장 우수한 프로 그래 밍 언어 로 웹 개발, 모 바 일 애플 리 케 이 션 개발 (PhoneGap, Appcelerator), 서버 개발 (Node. js 와 Wakanda) 등에 사용 할 수 있다.자 바스 크 립 트 는 많은 초보 자 들 이 프로 그래 밍 세계 에 발 을 들 여 놓 은 첫 번 째 언어 이다.브 라 우 저의 간단 한 알림 상 자 를 표시 할 수도 있 고, nodebot 이나 nodruino 를 통 해 로봇 을 제어 할 수도 있 습 니 다.구조 가 뚜렷 하고 성능 이 효율 적 인 자 바스 크 립 트 코드 를 작성 할 수 있 는 개발 자 는 현재 채용 시장 에서 가장 인기 있 는 사람 이 되 었 다.
이 글 에서 저 는 자바 스 크 립 트 의 기술, 비결 과 가장 좋 은 실천 을 공유 할 것 입 니 다. 몇 개 를 제외 하고 브 라 우 저의 자바 스 크 립 트 엔진 이 든 서버 의 자바 스 크 립 트 해석 기 든 모두 적 용 됩 니 다.본 논문 의 예제 코드 는 구 글 크롬 30 최신 판 (V8 3.20.17.15) 에서 의 테스트 를 통과 했다.
1. 처음으로 변수 에 값 을 부여 할 때 var 키워드 변 수 를 사용 하여 설명 하지 않 고 직접 값 을 부여 해 야 합 니 다. 기본 값 은 새로운 전역 변수 로 서 전역 변 수 를 사용 하지 않도록 해 야 합 니 다.2. 사용 = = = 대체 = =
= = 화! =조작 부 호 는 필요 한 상황 에서 데이터 형식 을 자동 으로 변환 합 니 다.그러나 = = = 화! = =아 닙 니 다. 값 과 데이터 형식 을 동시에 비교 할 수 있 습 니 다. 이것 은 = 와! =빨리.
[10] === 10 // is false
[10] == 10 // is true
'10' == 10 // is true
'10' === 10 // is false
[] == 0 // is true
[] === 0 // is false
'' == false // is true but true == "a" is false
'' === false // is false
3. underfined, null, 0, false, NaN, 빈 문자열 의 논리 적 결 과 는 모두 false 4 이 고 줄 끝 에 분 호 를 사용 하 는 실천 에서 분 호 를 사용 하 는 것 이 좋 습 니 다. 쓰 는 것 을 잊 어도 괜 찮 습 니 다. 대부분의 경우 자 바스 크 립 트 해석 기 는 자동 으로 추 가 됩 니 다.분 호 를 왜 사용 하 는 지 에 대해 서 는 자바 스 크 립 트 의 분점 에 대한 진실 을 참고 할 수 있 습 니 다.5. 대상 구조 기 사용
function Person(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
}
var Saad = new Person("Saad", "Mousliki");
6. typeof, instanceof, contructor 사용 조심
type: of: JavaScript 1 원 연산 자 는 문자열 형식 으로 변수의 원본 형식 을 되 돌려 줍 니 다. type: of null 도 object 를 되 돌려 줍 니 다. 대부분의 대상 유형 (배열 Array, 시간 날짜 등) 도 object 를 되 돌려 줍 니 다.
contructor: 내부 원형 속성, 코드 를 통 해 다시 쓸 수 있 습 니 다.
instanceof: JavaScript 연산 자 는 프로 토 타 입 체인 의 구조 기 에서 검색 하고 찾 으 면 true 로 돌아 갑 니 다. 그렇지 않 으 면 false 로 돌아 갑 니 다.
var arr = ["a", "b", "c"];
typeof arr; // "object"
arr instanceof Array // true
arr.constructor(); //[]
` 7. 자체 호출 함수 함 수 를 사용 하여 생 성 후 직접 자동 으로 실 행 됩 니 다. 보통 자체 호출 익명 함수 (Self - invoked Anonymous Function) 또는 직접 호출 함수 표현 식 (Immediately Invoked Function Expression) 이 라 고 합 니 다.형식 은 다음 과 같 습 니 다.
(function(){
//
})();
(function(a,b){
var result = a+b;
return result;
})(10,20)
8. 배열 에서 무 작위 로 구성원 가 져 오기
var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];
var randomItem = items[Math.floor(Math.random() * items.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;); // numbers = [1,2,3 ... 100]
11. 무 작위 알파벳 숫자 문자열 생 성
function generateRandomAlphaNum(len) {
var rdmString = "";
for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
return rdmString.substr(0, len);
}
12. 숫자 배열 의 순 서 를 흐 트 러 뜨 린 다.
var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
numbers = numbers.sort(function(){ return Math.random() - 0.5});
/ * numbers 배열 은 [120, 5, 228, - 215, 400, 458, - 85411, 122205] * /
자 바스 크 립 트 에 내 장 된 배열 정렬 함 수 를 사 용 했 습 니 다. 더 좋 은 방법 은 전문 적 인 코드 로 (예 를 들 어 Fisher - Yates 알고리즘) 을 실현 하 는 것 입 니 다. StackOverFlow 의 이 토론 을 참조 할 수 있 습 니 다.13. 문자열 의 빈 칸 제거 자바, C \ #, PHP 등 언어 는 모두 전문 적 인 문자열 의 빈 칸 제거 함 수 를 실현 하지만 자바 스 크 립 트 에는 없습니다. 아래 코드 를 통 해 String 대상 함수 에 trim 함 수 를 제공 할 수 있 습 니 다.
1
String.prototype.trim = function(){return this.replace(/^\s+|\s+$/g, "");};
새로운 자 바스 크 립 트 엔진 은 이미 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(arguments);
16. 숫자 인지 검증
function isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n);
}
17. 배열 인지 검증
function isArray(obj){
return Object.prototype.toString.call(obj) === '[object Array]' ;
}
그러나 toString () 방법 이 재 작성 되면 통 하지 않 는 다.다음 방법 도 사용 할 수 있다.
Array.isArray(obj); // its a new Array method
브 라 우 저 에 frame 을 사용 하지 않 으 면 인 스 턴 스 of 도 사용 할 수 있 지만 문맥 이 너무 복잡 하면 오류 가 발생 할 수 있 습 니 다.
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 ，instanceof
// frame
arr instanceof Array; // false
18. 배열 의 최대 값 과 최소 값 가 져 오기
var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
var maxInNumbers = Math.max.apply(Math, numbers);
var minInNumbers = Math.min.apply(Math, numbers);
19. 배열 비우 기
var myArray = [12 , 222 , 1000 ];
myArray.length = 0; // myArray will be equal to [].
20. 배열 에서 delete 나 remove 요 소 를 직접 사용 하지 마 십시오. 배열 요소 에 delete 를 직접 사용 하면 삭제 되 지 않 고 원 소 를 undefined 로 설정 합 니 다.배열 요소 삭 제 는 splice 를 사용 해 야 합 니 다.절대:
var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];
items.length; // return 11
delete items[3]; // return true
items.length; // return 11
/* items [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */
대답:
var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];
items.length; // return 11
items.splice(3,1) ;
items.length; // return 10
/* items [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119]
대상 의 속성 을 삭제 할 때 delete 를 사용 할 수 있 습 니 다.21. length 속성 을 사용 하여 배열 앞의 예 에서 length 속성 으로 배열 을 비 웁 니 다. 또한 배열 을 차단 할 수 있 습 니 다.
var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];
myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].
이와 함께 length 속성 을 커지 면 배열 의 길이 가 증가 하고 undefined 를 사용 하여 새로운 요소 로 채 웁 니 다.length 는 쓸 수 있 는 속성 입 니 다.
myArray.length = 10; // the new array length is 10
myArray[myArray.length - 1] ; // undefined
22. 조건 에서 논리 와 또는
var foo = 10;
foo == 10 && doSomething(); // is the same thing as if (foo == 10) doSomething();
foo == 5 || doSomething(); // is the same thing as if (foo != 5) doSomething();
함수 매개 변수의 기본 값 과 같은 기본 값 을 논리 적 으로 설정 할 수도 있 습 니 다.
function doSomething(arg1){
arg1 = arg1 || 10; // arg1 will have 10 as a default value if it’s not already set
}
23. map () 함수 방법 으로 데이터 순환
var squares = [1,2,3,4].map(function (val) {
return val * val;
});
// squares will be equal to [1, 4, 9, 16]
24. 지정 한 소수 자리 유지
var num =2.443242342;
num = num.toFixed(4); // num will be equal to 2.4432
toFixec () 는 숫자 가 아 닌 문자열 을 되 돌려 줍 니 다.25. 부동 소수점 계산 문제
0.1 + 0.2 === 0.3 // is false
9007199254740992 + 1 // is equal to 9007199254740992
9007199254740992 + 2 // is equal to 9007199254740994
왜 일 까요?0.1 + 0.2 는 0. 300000000000004 이기 때문이다.자 바스 크 립 트 의 숫자 는 IEEE 754 표준 에 따라 구 축 됩 니 다. 내부 에 64 비트 부동 소수점 소수 로 표시 되 어 있 으 며, 자 바스 크 립 트 의 숫자 가 어떻게 인 코딩 되 었 는 지 구체 적 으로 참조 할 수 있 습 니 다. toFixed () 와 toPrecision () 을 사용 하여 이 문 제 를 해결 할 수 있 습 니 다.26. for - in 순환 검사 대상 의 속성 아래 와 같은 용법 을 통 해 교체 할 때 대상 의 원형 속성 에 들 어 가 는 것 을 방지 할 수 있 습 니 다.
for (var name in object) {
if (object.hasOwnProperty(name)) {
// do something with name
}
}
27. 쉼표 연산 자
var a = 0;
var b = ( a++, 99 );
console.log(a); // a will be equal to 1
console.log(b); // b is equal to 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"); // false
isFinite("10"); // true
isFinite(10); // true
isFinite(undefined); // false
isFinite(); // false
isFinite(null); // true，
30. 배열 에서 마이너스 로 색인 하 는 것 을 피한다.
var numbersArray = [1,2,3,4,5];
var from = numbersArray.indexOf("foo") ; // from is equal to -1
numbersArray.splice(from,2); // will return [5]
splice 에 전 달 된 색인 매개 변 수 는 음수 가 아니 라 음수 일 때 배열 의 끝 에서 요 소 를 삭제 합 니 다.31. JSON 으로 서열 화 와 반 서열 화
var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} };
var stringFromPerson = JSON.stringify(person);
/* stringFromPerson "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}" */
var personFromString = JSON.parse(stringFromPerson);
/* personFromString person */
32. eval () 또는 함수 구조 기 eval () 과 함수 구조 기 (Function consturctor) 를 사용 하지 마 십시오. 호출 할 때마다 자 바스 크 립 트 엔진 은 소스 코드 를 실행 가능 한 코드 로 변환 합 니 다.
var func1 = new Function(functionCode);
var func2 = eval(functionCode);
33 、 사용 을 피한다 with ()
with () 를 사용 하면 전역 역할 영역 에 변 수 를 추가 할 수 있 습 니 다. 따라서 다른 동명 변수 가 있 으 면 헷 갈 리 기 쉬 우 며, 2 차 값 도 덮어 씁 니 다.34. 배열 에 for - 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 순환 의 첫 번 째 성명 에서 두 사람 은 한 번 만 초기 화 할 수 있 습 니 다. 이것 은 다음 과 같은 쓰기 보다 빠 릅 니 다.
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 대신 switch / case 를 사용 합 니 다.
두 갈래 가 넘 는 것 으로 판단 할 때 switch / case 를 사용 하 는 것 이 더 빠 르 고 우아 하 며 코드 조직 에 유리 합 니 다. 물론 10 갈래 가 넘 으 면 switch / case 를 사용 하지 마 세 요.37. switch / case 에서 디지털 구간 을 사용 합 니 다. 사실 switch / case 의 case 조건 은 이렇게 쓸 수 있 습 니 다.
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"
38. 대상 을 대상 으로 하 는 원형 아래 에서 이렇게 하면 대상 을 매개 변수 로 하여 이 를 원형 으로 하 는 새로운 대상 을 만 들 수 있다.
function clone(object) {
function OneShotConstructor(){};
OneShotConstructor.prototype = object;
return new OneShotConstructor();
}
clone(Array).prototype ; // []
39. HTML 필드 변환 함수
function escapeHTML(text) {
var replacements= {"": ">","&": "&", "\"": """};
return text.replace(/[<>&"]/g, function(character) {
return replacements[character];
});
}
40. try - catch - finally try - catch - finally 에서 catch 부분 을 순환 내부 에서 사용 하지 마 십시오. 이 변 수 는 실행 할 때 역할 영역 내의 새로운 변수 로 구 축 됩 니 다.절대:
var object = ['foo', 'bar'], i;
for (i = 0, len = object.length; i 마땅 히
var object = ['foo', 'bar'], i;
try {
for (i = 0, len = object.length; i 41. XML HttpRequests 를 사용 할 때 시간 초과 XML HttpRequests 가 실 행 될 때 장시간 응답 하지 않 을 때 (예 를 들 어 네트워크 문제 등) 연결 을 중지 해 야 합 니 다. setTimeout () 을 통 해 이 작업 을 완성 할 수 있 습 니 다.
var xhr = new XMLHttpRequest ();
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
clearTimeout(timeout);
// do something with response data
}
}
var timeout = setTimeout( function () {
xhr.abort(); // call error callback
}, 60*1000 /* timeout after a minute */ );
xhr.open('GET', url, true);
xhr.send();
동시에 주의해 야 할 것 은 여러 개의 XML HttpRequests 요청 을 동시에 하지 말 라 는 것 이다.42. WebSocket 을 처리 하 는 시간 초과 일반적인 상황 에서 WebSocket 연결 을 만 든 후 30 초 안에 아무런 활동 이 없 으 면 서버 측 에서 연결 을 시간 초과 처리 하고 방화벽 도 단위 주기 에 활동 이 없 는 연결 을 시간 초과 처리 할 수 있다.이러한 상황 을 방지 하기 위해 서 는 일정 시간 마다 서버 에 빈 메 시 지 를 보 낼 수 있다.다음 두 함 수 를 통 해 이 수 요 를 실현 할 수 있 습 니 다. 하 나 는 연결 이 활동 상 태 를 유지 하 는 데 사용 되 고 다른 하 나 는 이 상 태 를 끝 내 는 데 사 용 됩 니 다.
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 () 방법의 맨 끝 에 놓 을 수 있 습 니 다.43. 시간 은 원래 의 조작 부호 가 함수 보다 빨리 호출 되 는 것 을 주의해 야 한다. 예 를 들 어 Vanilla JS 를 사용 하면 보통 이렇게 하지 않 는 다.
var min = Math.min(a,b);
A.push(v);
이렇게 대체 할 수 있다.
var min = a < b ? a : b;
A[A.length] = v;
44. 개발 시 코드 구 조 를 주의 하고 온라인 에서 자바 스 크 립 트 코드 를 검사 하고 압축 하면 JSlint 또는 JSmin 등 도 구 를 사용 하여 코드 를 검사 하고 압축 할 수 있 습 니 다.45. JavaScript 는 넓 고 심오 합 니 다. 여기 좋 은 학습 자원 Code Academy 자원 이 있 습 니 다.http://www.codecademy.com/tracks/javascript
Marjin Haverbekex 가 작성 한 Eloquent JavaScript:http://eloquentjavascript.net/
John Resig 가 작성 한 Advanced JavaScript:http://ejohn.org/apps/learn/
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
