JavaScript 프로그래머가 알아야 할 45가지 실용적인 팁_javascript 팁

아시다시피 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 // is true
[] === 0 // false
'' == false // true이지만 true == "a"는 false
'' === false // is false

3 – 클로저를 사용하여 개인 변수 구현

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

function Person(이름, 나이) {
this.getName = function() { return name };
this.setName = function(newName) { name = newName; } ;
this.getAge = function() { return age };
this.setAge = function(newAge) { age = newAge };

// 생성자에서 초기화됨 속성
var 직업;
this.getOccupation = function() { return 직업 };
this.setOccupation = function(newOcc) { 직업 =
newOcc };
}

4 – 문장 끝에 세미콜론을 사용하세요
문 끝에 세미콜론을 사용하는 것이 좋습니다. 대부분의 경우 JavaScript 인터프리터가 세미콜론을 추가해 주기 때문에 작성하는 것을 잊어버리더라도 경고가 표시되지 않습니다.
5 – 객체 생성자 생성

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

function Person(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
}

var Saad = new Person("Saad", "Mousliki") ;

6 – typeof, instanceof 및 생성자를 신중하게 사용하세요

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

var arr = ["a", "b", "c"];
typeof arr; // return "object"
arr instanceof Array // true
arr.constructor(); / /[]

7 – 자체 호출 함수 생성
이를 종종 자체 호출 익명 함수 또는 즉시 호출 함수 표현식이라고 합니다. (IIFE-즉시 호출 함수 표현). 생성 직후 자동으로 실행되는 함수로 보통 다음과 같습니다.

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

(function(){
// 자동으로 실행될 일부 비공개 코드
})();
(function(a,b){
var result = a b;
결과 반환;
})(10,20)

8- 배열에서 임의의 항목 가져오기

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

var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];

var randomItem = items[ Math.floor( Math.random() * items.length)];[code]
9 – 특정 범위의 난수 가져오기
이 코드 조각은 원하는 경우 매우 유용합니다. 테스트 데이터를 생성하는 데 유용합니다(예: 최소값과 최대값 사이의 임의 급여 값).
[코드]var x = Math.floor(Math.random() * (max - min 1)) min;

10 – 0과 설정된 최대값 사이에서 생성됨 배열 숫자

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

varnumberArray = [], max = 100 ;

for( var i=1; numberArray.push(i )
11 – 임의의 영숫자 문자열 생성

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

function generateRandomAlphaNum(len) {
var rdmstring = "";
for( ; rdmString.length < len; rdmString = Math.random().toString(36).substr(2));
return rdmString.substr(0, len);
}

12 – 숫자 배열을 뒤섞습니다

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

varnumbers = [5, 458, 120, -215, 228, 400, 122205, -85411];
numbers = number.sort( 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] */
//In 실제로 concat은 두 배열 연결을 직접 구현할 수 있지만 반환 값은 새 배열입니다. array1에 대한 직접적인 변경 사항은 다음과 같습니다

15 – 인수 객체를 배열로 변환

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

var argArray = Array.prototype.slice.call(arguments);
arguments 객체는 배열과 유사한 객체이지만 실제 배열은 아닙니다

16 – 다음 여부를 확인하세요. 인수가 숫자(숫자)입니다

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

함수 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]

// 인스턴스가 올바르게 작동하지 않습니다. myArray는 생성자를 잃습니다.
// 생성자는 프레임 간에 공유되지 않습니다.
arr instanceof Array;

18 – 숫자 배열에서 최대값 또는 최소값 가져오기

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

var number = [5, 458, 120, -215, 228, 400, 122205, -85411];
var maxInNumbers = Math.max.apply(Math, 숫자);
var minInNumbers = Math.min.apply(Math, 숫자);
//번역기 참고: 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와 같습니다. , undefound × 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; is 10
myArray[myArray.length - 1] ; // 정의되지 않음

22 – 조건부 판단을 위해 논리 AND/OR 사용

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

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

논리적 AND를 사용하여 함수 매개변수의 기본값을 설정할 수도 있습니다

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

function doSomething(arg1){
Arg1 = arg1 || // arg1이 아닌 경우; Arg1은 기본적으로 10으로 설정됩니다
}

23 – map() 메서드를 사용하여 배열의 항목을 반복합니다

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

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

24 – 숫자를 소수점 N으로 반올림합니다. place

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

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(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); // false
isFinite("foo") // false
isFinite("10"); // true
isFinite(10) ); // 참
isFinite(정의되지 않음); // 거짓
isFinite(null) // 참 !!!

30 – 배열에서는 음수 인덱스를 피하세요

코드 복사 코드는 다음과 같습니다.varnumberArray = [1, 2,3,4,5];

var from = numberArray.indexOf("foo") ; // from은 -1과 같습니다

numbersArray.splice(from,2); [5 ] 반환

indexOf를 호출할 때 인수가 음수가 아닌지 확인하세요.

31 – JSON 기반 직렬화 및 역직렬화

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

var person = {이름:'Saad', 나이: 26, 부서: {ID: 15, 이름: "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 사용 생성자는 소스 코드를 실행 가능한 코드로 변환하기 위해 스크립트 엔진을 호출할 때마다 비용이 많이 드는 작업입니다.

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

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

33 – with() 사용을 피하세요
with()를 사용하면 전역 변수가 삽입됩니다. 따라서 같은 이름의 변수는 해당 값을 덮어쓰게 되어 불필요한 문제를 일으키게 됩니다.
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 (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 – switch/case 문을 사용하고, if/else
의 긴 목록 대신 2개 이상의 상황을 판단할 때 switch/case를 사용하는 것이 더 효율적이고 우아합니다(코드 구성이 더 쉽습니다). 단, 판단해야 할 상황이 10개 이상일 때는 스위치/케이스를 사용하지 마세요.
37 – 수치 범위 판단 시 스위치/케이스 사용
다음 상황에서는 수치 범위 판단 시 스위치/케이스를 사용하는 것이 합리적입니다.

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

function getCategory(age) {
var Category = "";
스위치(true) {
case isNaN(age):
Category = "연령 아님";<
반환 카테고리;
}
getCategory(5) ; // "Baby"를 반환합니다
//일반적으로 숫자 범위를 판단하려면 if/else를 사용하는 것이 더 적합합니다. 특정 값을 판단하는 데는 스위치/케이스가 더 적합합니다


38 - 생성된 객체에 프로토타입 객체를 지정

지정된 매개변수를 사용하여 객체를 생성하는 함수를 다음과 같이 작성할 수 있습니다. 프로토타입 :




코드 복사

코드는 다음과 같습니다.
function clone(object) { function OneShotConstructor(){ };
OneShotConstructor.prototype= object;

return new OneShotConstructor();}clone(Array).prototype; // []39 – 하나의 HTML 이스케이프 기능

코드 복사

코드는 다음과 같습니다.
function escapeHTML (텍스트) { var replacements= {"<": "<", ">": ">","&": "&", """: """};
return text.replace( /[<>&"]/g, function(character) {

              return replacements[character]; 내부적으로 try-catch-finally를 런타임에 사용하여 매번 catch 절이 실행되면 catch된 예외 개체가 변수에 할당되고 try-catch-finally 구조에서는 매번 이 변수가 생성됩니다. 다음과 같이 작성하지 마세요.

코드 복사


코드는 다음과 같습니다.

var object = [ 'foo' , 'bar'], i;
for (i = 0, len = object.length; i try {
// 예외를 발생시키는 작업을 수행합니다. } catch (e) {

// 예외 처리
}

} 및 사용:

코드 복사

코드는 다음과 같습니다.

var object = ['foo', 'bar'], i;
try {
for (i = 0, len = object .length; i // 예외를 발생시키는 작업 수행
}

}
catch (e) {
// 처리 예외

}41 – XMLHttpRequests에 대한 시간 제한을 설정합니다. XHR 요청에 오랜 시간이 걸린 후(예: 네트워크 문제로 인해) 요청을 중단해야 할 수도 있습니다. 그런 다음 XHR 호출과 함께 setTimeout()을 사용할 수 있습니다.

코드 복사


코드는 다음과 같습니다.

var xhr = new XMLHttpRequest();
xhr .onreadystatechange = function () {

if (this.readyState == 4) {
clearTimeout(timeout); // 응답 데이터로 작업 수행 }
}
var timeout = setTimeout ( function () {

xhr.abort(); // 오류 콜백 호출}, 60*1000 /* 1분 후 타임아웃 */ );xhr.open('GET' , URL, 참) xhr.send();
또한 일반적으로 동기식 Ajax 요청을 완전히 피해야 합니다.
42 - WebSocket 시간 초과 처리
일반적으로 WebSocket 연결이 생성된 후 활동이 없으면 서버는 30초 후에 연결 시간을 초과합니다. 방화벽은 일정 기간 동안 활동이 없으면 연결이 끊어집니다.

시간 초과 문제를 방지하려면 간헐적으로 빈 메시지를 서버에 보내야 할 수도 있습니다. 이렇게 하려면 다음 두 가지 기능을 코드에 추가하면 됩니다. 하나는 연결을 유지하는 기능이고 다른 하나는 연결 보류를 취소하는 기능입니다. 이 기술을 사용하면 시간 초과 문제를 제어할 수 있습니다.

timerID 사용:

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

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

keepAlive() webSOcket 연결의 onOpen() 메소드 끝에 메소드를 추가해야 하며, onClose() 메소드 끝에 cancelKeepAlive()를 추가합니다.
43 – 기본 연산자는 항상 함수 호출보다 더 효율적이라는 점을 명심하세요. 바닐라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는 정말 놀랍습니다.

요약

그 외에도 많은 팁, 요령, 모범 사례가 있다는 것을 알고 있습니다. 제가 공유한 내용에 추가하고 싶거나 피드백 또는 수정하고 싶은 내용이 있으면 댓글로 알려주세요. .