12 가지 유용 한 자 바스 크 립 트 기법

이 글 에서 나 는 12 개의 매우 유용 한 자 바스 크 립 트 기 교 를 공유 할 것 이다.이런 기 교 는 네가 코드 를 줄 이 고 최적화 하 는 데 도움 을 줄 수 있다.
1)사용!!변 수 를 불 형식 으로 변환 합 니 다.
때때로,우 리 는 일부 변수 가 존재 하 는 지,아니면 유효한 값 이 있 는 지 검사 해서,그것들의 값 을 true 로 간주 해 야 한다.이러한 검 사 를 할 때||(이중 부정 연산 자)를 사용 할 수 있 습 니 다.모든 종류의 데 이 터 를 불 값 으로 자동 으로 변환 할 수 있 습 니 다.이 변수 만 false:0,null,",undefined 또는 NaN 으로 되 돌아 갈 수 있 습 니 다.다른 것 은 true 로 돌아 갑 니 다.우 리 는 이 간단 한 예 를 보 자.

function Account(cash) { 
 this.cash = cash; 
 this.hasMoney = !!cash; 
} 
var account = new Account(100.50); 
console.log(account.cash); // 100.50 
console.log(account.hasMoney); // true 
var emptyAccount = new Account(0); 
console.log(emptyAccount.cash); // 0 
console.log(emptyAccount.hasMoney); // false 

이 예 에서 account.cash 의 값 이 0 보다 크 면 account.hasMoney 의 값 은 true 입 니 다.
2)사용+변 수 를 숫자 로 변환
이 변환 은 매우 간단 하지만 숫자 문자열 에 만 적 용 됩 니 다.그렇지 않 으 면 NaN(숫자 가 아 닙 니 다)으로 돌아 갑 니 다.이 예 를 보 세 요.

function toNumber(strNumber) { 
 return +strNumber; 
} 
console.log(toNumber("1234")); // 1234 
console.log(toNumber("ACB")); // NaN 

 이 변환 동작 은 Date 에 도 사용 할 수 있 습 니 다.이 경우 타임 스탬프 를 되 돌려 줍 니 다.

console.log(+new Date()) // 1461288164385 

3)단락 조건
만약 당신 이 이런 유사 한 코드 를 본 적 이 있다 면:

if (conected) { 
 login(); 
} 

그러면 이 두 변수 사이 에&&(AND 연산 자)를 사용 하여 코드 를 줄 일 수 있 습 니 다.예 를 들 어 앞의 코드 는 한 줄 로 줄 일 수 있 습 니 다.

conected && login(); 

너 도 이런 방법 으로 대상 에 어떤 속성 이나 함수 가 존재 하 는 지 검사 할 수 있다.다음 코드 와 유사 합 니 다:

user && user.login(); 

4)사용|||기본 값 설정
ES6 에는 기본 매개 변수 라 는 기능 이 있 습 니 다.이전 브 라 우 저 에서 이 기능 을 모 의 하기 위해 서 는||(OR 연산 자)를 사용 하고 기본 값 을 두 번 째 인자 로 사용 할 수 있 습 니 다.첫 번 째 매개 변수 가 false 로 돌아 가면 두 번 째 매개 변 수 는 기본 값 으로 돌아 갑 니 다.이 예 를 보 세 요.

function User(name, age) { 
 this.name = name || "Oliver Queen"; 
 this.age = age || 27; 
} 
var user1 = new User(); 
console.log(user1.name); // Oliver Queen 
console.log(user1.age); // 27 
var user2 = new User("Barry Allen", 25); 
console.log(user2.name); // Barry Allen 
console.log(user2.age); // 25 

5)순환 중 캐 시 array.length
이 기 교 는 매우 간단 하고 대수 그룹 을 순환 처리 할 때 성능 에 큰 영향 을 미 치 는 것 을 피 할 수 있다.기본적으로 거의 모든 사람 이 이렇게 for 를 사용 하여 하나의 배열 을 반복 합 니 다.

for (var i = 0; i < array.length; i++) { 
 console.log(array[i]); 
}

작은 배열 을 사용 하면 괜 찮 지만 큰 배열 을 처리 하면 이 코드 는 모든 순환 에서 배열 의 크기 를 반복 해서 계산 합 니 다.이것 은 일정한 지연 이 생 길 수 있 습 니 다.이러한 상황 을 피하 기 위해 서 는 array.length 를 변수 에 캐 시 할 수 있 습 니 다.순환 할 때마다 array.length 대신 캐 시 를 사용 할 수 있 습 니 다.

var length = array.length; 
for (var i = 0; i < length; i++) { 
 console.log(array[i]); 
} 

더욱 간결 하기 위해 서 는 이렇게 쓸 수 있다.

for (var i = 0, length = array.length; i < length; i++) { 
 console.log(array[i]); 
}

6)검 측 대상 의 속성
일부 속성 이 존재 하 는 지 확인 하고 정의 되 지 않 은 함수 나 속성 을 실행 하지 않도록 해 야 할 때 이 기술 은 매우 유용 합 니 다.크로스 브 라 우 저 코드 를 만 들 려 면 이 기술 을 사용 할 수도 있 습 니 다.예 를 들 어,이전 버 전의 Internet Explorer 6 와 호 환 되 는 코드 를 작성 해 야 한다 고 가정 하고,document.query Selector()를 사용 하여 ID 를 통 해 일부 요 소 를 가 져 오 려 고 합 니 다.그러나 현대 브 라 우 저 에 서 는 이 함수 가 존재 하지 않 습 니 다.따라서 이 함수 가 존재 하 는 지 확인 하려 면 in 연산 자 를 사용 할 수 있 습 니 다.이 예 를 보 세 요.

if ('querySelector' in document) { 
 document.querySelector("#id"); 
} else { 
 document.getElementById("id"); 
} 

이 경우 document 에 query Selector 함수 가 없 으 면 document.getElement ById()를 대체 합 니 다.
7)배열 의 마지막 요 소 를 가 져 옵 니 다.
Array.prototype.slice(begin,end)는 배열 을 자 르 는 데 사용 할 수 있 습 니 다.그러나 종료 매개 변수 end 의 값 을 설정 하지 않 으 면 이 함 수 는 자동 으로 end 를 배열 길이 값 으로 설정 합 니 다.나 는 이 함수 가 마 이 너 스 를 받 아들 일 수 있다 는 것 을 아 는 사람 이 별로 없다 고 생각한다.만약 에 begin 을 마이너스 로 설정 하면 배열 에서 마지막 요 소 를 얻 을 수 있다.

var array = [1, 2, 3, 4, 5, 6]; 
console.log(array.slice(-1)); // [6] 
console.log(array.slice(-2)); // [5,6] 
console.log(array.slice(-3)); // [4,5,6] 

8)배열 절단
이 기술 은 배열 의 크기 를 잠 글 수 있 습 니 다.이것 은 배열 의 고정 수량 요 소 를 삭제 하 는 데 매우 유용 합 니 다.예 를 들 어 10 개의 요 소 를 포함 하 는 배열 이 있 지만 앞의 5 개의 요소 만 얻 으 려 면 array.length=5 단계 배열 을 설정 할 수 있 습 니 다.이 예 를 보 세 요.

var array = [1, 2, 3, 4, 5, 6]; 
console.log(array.length); // 6 
array.length = 3; 
console.log(array.length); // 3 
console.log(array); // [1,2,3] 

9)모두 교체
String.replace()함 수 는 String 과 Regex 를 사용 하여 문자열 을 바 꿀 수 있 습 니 다.이 함수 자 체 는 첫 번 째 일치 하 는 문자열 만 바 꿀 수 있 습 니 다.그러나 정규 표현 식 끝 에/g 를 추가 하여 replace All()함 수 를 모 의 할 수 있 습 니 다.

var string = "john john"; 
console.log(string.replace(/hn/, "ana")); // "joana john" 
console.log(string.replace(/hn/g, "ana")); // "joana joana" 

10)병합 배열
두 배열 을 합 쳐 야 한다 면 Array.concat()함 수 를 사용 할 수 있 습 니 다.

var array1 = [1, 2, 3]; 
var array2 = [4, 5, 6]; 
console.log(array1.concat(array2)); // [1,2,3,4,5,6]; 

그러나 이 함 수 는 큰 배열 에 적합 하지 않 습 니 다.새로운 배열 을 만 들 고 많은 메모 리 를 소모 하기 때 문 입 니 다.이 경우 Array.push.apply(arr1,arr2)를 사용 할 수 있 습 니 다.새 배열 을 만 들 지 않 고 두 번 째 배열 을 첫 번 째 배열 에 합 쳐 메모리 사용 을 줄 일 수 있 습 니 다.

var array1 = [1, 2, 3]; 
var array2 = [4, 5, 6]; 
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6]; 

11)NodeList 를 배열 로 변환
document.query Selector All("p")함 수 를 실행 하면 DOM 요소 배열,즉 NodeList 대상 을 되 돌려 줍 니 다.그러나 이 대상 은 배열 에 속 하 는 함수 가 없습니다.예 를 들 어 sort(),reduce(),map(),filter().이 함수 와 배열 의 다른 원생 함 수 를 사용 하기 위해 서 는 NodeList 를 배열 로 변환 해 야 합 니 다.변환 을 하려 면 이 함수 만 사용 하 십시오:[].slice.call(elements):

var elements = document.querySelectorAll("p"); // NodeList  
var arrayElements = [].slice.call(elements); //            
var arrayElements = Array.from(elements); //  NodeList             

12)배열 요소 에 대한 카드 세탁
외부 라 이브 러 리 Lodash 처럼 데이터 요 소 를 다시 섞 으 려 면 이 기술 만 사용 하 십시오.

var list = [1, 2, 3];  
console.log(list.sort(function() {  
  return Math.random() - 0.5 
})); // [2,1,3] 

결론.
현재,당신 은 유용 한 JS 기술 을 배 웠 습 니 다.그들 은 주로 자바 스 크 립 트 코드 의 양 을 줄 이 는 데 사 용 됩 니 다.그 중에서 일부 기술 은 많은 유행 하 는 JS 프레임 워 크 에서 사용 되 고 있 습 니 다.예 를 들 어 Lodash,Underscore.js,Strings.js 등 입 니 다.다른 JS 기술 을 알 고 있다 면 공유 하 세 요!