자 바스 크 립 트 의 기교가 음탕 하 다

JavaScript 는 전 세계 에서 가장 우수한 프로 그래 밍 언어 로 웹 개발, 모 바 일 애플 리 케 이 션 개발 (PhoneGap, Appcelerator), 서버 개발 (Node. js 와 Wakanda) 등에 사용 할 수 있다.자 바스 크 립 트 는 많은 초보 자 들 이 프로 그래 밍 세계 에 발 을 들 여 놓 은 첫 번 째 언어 이다.브 라 우 저의 간단 한 알림 상 자 를 표시 할 수도 있 고, nodebot 이나 nodruino 를 통 해 로봇 을 제어 할 수도 있 습 니 다.구조 가 뚜렷 하고 성능 이 효율 적 인 자 바스 크 립 트 코드 를 작성 할 수 있 는 개발 자 는 현재 채용 시장 에서 가장 인기 있 는 사람 이 되 었 다.
사용 = = = 대체 = =
= = 화! =조작 부 호 는 필요 한 상황 에서 데이터 형식 을 자동 으로 변환 합 니 다.그러나 = = = 화! = =아 닙 니 다. 값 과 데이터 형식 을 동시에 비교 할 수 있 습 니 다. 이것 은 = 와! =빨리.

[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

underfined, null, 0, false, NaN, 빈 문자열 의 논리 적 결 과 는 모두 false 입 니 다.
type: of, instanceof, contructor 사용 하기
type: of: JavaScript 1 원 연산 자 는 문자열 형식 으로 변수의 원본 형식 을 되 돌려 줍 니 다. type: of null 도 object 를 되 돌려 줍 니 다. 대부분의 대상 유형 (배열 Array, 시간 Date 등) 도 object contructor: 내부 원형 속성 을 되 돌려 줍 니 다. 코드 를 통 해 instanceof: JavaScript 연산 자 를 다시 쓸 수 있 습 니 다. 프로 토 타 입 체인 의 구조 기 에서 검색 합 니 다.찾 으 면 true 로 돌아 갑 니 다. 그렇지 않 으 면 false 로 돌아 갑 니 다.

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

그룹 에서 무 작위 로 구성원 가 져 오기

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

지정 한 범위 내의 난수 가 져 오기
이 기능 은 테스트 용 가짜 데 이 터 를 생 성 할 때 특히 수량 이 있다. 예 를 들 어 소개 와 지정 범위 내의 임금 수 등 이다.

var x = Math.floor(Math.random() * (max - min + 1)) + min;

무 작위 알파벳 숫자 문자열 생 성

function generateRandomAlphaNum(len) { 
  var rdmString = ""; 
  for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2)); 

  return rdmString.substr(0, len);
}

문자열 공백 제거

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

새로운 자 바스 크 립 트 엔진 은 이미 trim () 의 원생 실현 이 있 었 다.
배열 간 추가

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] */

대상 을 배열 로 변환

var argArray = Array.prototype.slice.call(arguments);

숫자 인지 확인

function isNumber(n){ return !isNaN(parseFloat(n)) && isFinite(n);}

배열 인지 확인

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

배열 의 최대 값 과 최소 값 가 져 오기

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

배열 에서 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 를 사용 할 수 있 습 니 다.
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

조건 에서 논리 와 또는

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
}

맵 () 함수 방법 으로 데이터 순환

var squares = [1,2,3,4].map(function (val) { 
  return val * val; 
}); 
// squares will be equal to [1, 4, 9, 16]

지정 한 소수 자리 유지

var num =2.443242342;
num = num.toFixed(4); // num will be equal to 2.4432

toFixec () 는 숫자 가 아 닌 문자열 을 되 돌려 줍 니 다.
for - in 순환 검사 대상 의 속성
다음 과 같은 용법 은 교체 할 때 대상 의 원형 속성 에 들 어 가 는 것 을 방지 할 수 있다.

for (var name in object) { 
  if (object.hasOwnProperty(name)) { // do something with name } 
}

isFinite () 에 들 어 오 는 인 자 를 미리 검사 합 니 다.

isFinite(0/0) ; // false
isFinite("foo"); // false
isFinite("10"); // true
isFinite(10); // true
isFinite(undefined); // false
isFinite(); // false
isFinite(null); // true，       

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      */

eval () 또는 함수 구조 기 를 사용 하지 마 십시오.
eval () 과 함수 구조 기 (Function consturctor) 의 비용 이 비교적 많 습 니 다. 호출 할 때마다 자 바스 크 립 트 엔진 은 소스 코드 를 실행 가능 한 코드 로 변환 합 니 다.

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

사용 하지 않 기 with ()
with () 를 사용 하면 전역 역할 영역 에 변 수 를 추가 할 수 있 습 니 다. 따라서 다른 동명 변수 가 있 으 면 헷 갈 리 기 쉬 우 며, 2 차 값 도 덮어 씁 니 다.
배열 에 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++)

setInterval () 과 setTimeout () 에 전달 할 때 문자열 대신 함 수 를 사용 합 니 다.
setTimeout () 과 setInterval () 에 문자열 을 전달 하면 eval 과 유사 한 방식 으로 변환 합 니 다. 느 릴 수 있 으 므 로 사용 하지 마 십시오.

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

대신:

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

한 겹 의 if / else 대신 switch / case 사용 하기
두 갈래 가 넘 는 것 으로 판단 할 때 switch / case 를 사용 하 는 것 이 빠 르 고 우아 하 며 코드 조직 에 유리 합 니 다.물론 10 개가 넘 는 지점 이 있 으 면 switch / case 를 사용 하지 마 세 요.
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"

대상 을 대상 으로 하 는 원형 을 사용 하 다.
다음 에 이렇게 하면 대상 을 매개 변수 로 지정 하여 이 를 원형 으로 하 는 새로운 대상 을 만 들 수 있 습 니 다.

function clone(object) { 
  function OneShotConstructor(){}; 
  OneShotConstructor.prototype = object; 

  return new OneShotConstructor(); 
} 
clone(Array).prototype ; // []

HTML 필드 변환 함수

function escapeHTML(text) { 
  var replacements= {"": ">","&": "&", "\"": """}; 

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

순환 내부 에서 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 

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 요청 을 동시에 하지 말 라 는 것 이다.
웹 소켓 처리 시간 초과
통상 적 으로 웹 소켓 연결 이 생 성 된 후 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 () 방법의 맨 끝 에 놓 을 수 있 습 니 다.
시간 주의 원본 연산 자 는 함수 보다 빨리 호출 되 며, Vanilla JS 를 사용 합 니 다.
예 를 들 어 보통 이러 지 마 세 요.

var min = Math.min(a,b); 
A.push(v);

이렇게 대체 할 수 있다.

var min = a < b ? a : b; 
A[A.length] = v;

개발 시 코드 구 조 를 주의 하고 온라인 에서 자바 스 크 립 트 코드 를 검사 하고 압축 합 니 다.
JSlint 나 JSmin 등 도 구 를 사용 하여 코드 를 검사 하고 압축 할 수 있 습 니 다.
일부 내용 은 come two 의 블 로그 내용 에서 발췌 되 었 다.