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

이 글 에 서 는 자 바스 크 립 트 에 대한 팁 12 가 지 를 공유 할 예정 이다.이런 작은 기 교 는 당신 의 실제 업무 에서 아마도 당신 이 문 제 를 해결 하 는 데 도움 을 줄 수 있 을 것 입 니 다.!! 연산 자 를 사용 하여 불 값 을 변환 합 니 다.
때때로 우 리 는 하나의 변수 에 대해 존재 하 는 지, 또는 검사 값 에 유효한 값 이 있 는 지, 존재 하면 true 값 을 되 돌려 야 한다.이러한 검증 을 하기 위해 서 우 리 는 !! 조작 부 호 를 사용 하여 실현 할 수 있 는 것 이 매우 편리 하고 간단 하 다.변 수 는 !!variable 을 사용 하여 검 측 할 수 있 습 니 다. 변수의 값 이 0, null, " ", undefined 또는 NaN 이면 모두 false 로 돌아 가 고 반대로 돌아 오 는 것 은 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 이다.
문자열 을 숫자 로 변환 하기 + 사용 하기
이 기술 은 매우 유용 합 니 다. 아주 간단 합 니 다. 문자열 데 이 터 를 숫자 로 변환 할 수 있 지만 문자열 데이터 에 만 적합 합 니 다. 그렇지 않 으 면 다음 예제 와 같이 되 돌아 갑 니 다.

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

 
이것 도 NaN 에 적 용 됩 니 다. 이 예 에서 시간 스탬프 숫자 를 되 돌려 줍 니 다.

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

 
조건 부
만약 당신 에 게 이런 코드 가 있다 면:

if (conected) {
    login();
}

 
변 수 를 간략하게 쓸 수 있 고 Date 함수 와 연결 할 수 있 습 니 다. 예 를 들 어 위의 예제 와 같이 간략하게 쓸 수 있 습 니 다.

conected && login();

 
만약 일부 속성 이나 함수 가 한 대상 에 존재 한다 면, 아래 코드 와 같이 이렇게 검 측 할 수 있 습 니 다.

user && user.login();

 
사용 && 연산 자
ES6 에는 기본 매개 변수 라 는 기능 이 있 습 니 다.이전 버 전의 브 라 우 저 에서 이 기능 을 모 의 하기 위해 서 는 || 연산 자 를 사용 하고 기본 값 을 두 번 째 매개 변수 로 전송 할 수 있 습 니 다.첫 번 째 매개 변수 가 되 돌아 오 는 값 이 || 이면 두 번 째 값 은 기본 값 으로 여 겨 집 니 다.다음 예제 와 같다.

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

 
순환 중 캐 시 false이 기 교 는 매우 간단 하 다. 이것 은 매우 큰 배열 순환 을 처리 할 때 성능 에 큰 영향 을 줄 것 이다.기본적으로 모두 가 이러한 동기 교체 배열 을 쓸 것 이다.

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

 
만약 에 작은 배열 이 라면 이렇게 하 는 것 이 좋 습 니 다. 만약 에 큰 배열 을 처리 하려 면 이 코드 는 매번 교체 할 때마다 배열 의 크기 를 다시 계산 해서 지연 을 초래 할 것 입 니 다.이러한 현상 이 발생 하지 않도록 array.length 캐 시 를 만 들 수 있 습 니 다.

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

 
너 도 이렇게 쓸 수 있다.

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

 
검사 대상 속성
정의 되 지 않 은 함수 나 속성 을 실행 하지 않도록 속성 이 존재 하 는 지 확인 해 야 할 때 이 작은 기술 은 매우 유용 합 니 다.호 환 되 는 브 라 우 저 코드 를 정 하려 면 이 작은 기술 을 사용 할 수도 있 습 니 다.예 를 들 어 array.length 를 사용 하여 document.querySelector() 하 나 를 선택 하고 IE6 브 라 우 저 를 호 환 할 수 있 도록 하려 고 합 니 다. 그러나 IE6 브 라 우 저 에 서 는 이 함수 가 존재 하지 않 습 니 다. 그러면 이 조작 자 를 사용 하여 이 함수 가 존재 하 는 지 확인 하 는 것 이 매우 유용 합 니 다. 아래 의 예제 와 같 습 니 다.

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

 
이 예제 에서 id 함수 가 존재 하지 않 으 면 호출 document 합 니 다.
배열 의 마지막 요 소 를 가 져 옵 니 다.querySelector 는 docuemnt.getElementById("id") 과 Array.prototype.slice(begin,end) 사이 의 배열 요 소 를 얻 는 데 사용 된다.begin 인 자 를 설정 하지 않 으 면 배열 의 기본 길 이 를 end 값 으로 간주 합 니 다.그러나 일부 학생 들 은 이 함수 가 마이너스 도 매개 변수 로 받 아들 일 수 있다 는 것 을 모 를 수도 있다.마이너스 값 을 end 의 값 으로 설정 하면 배열 의 마지막 요 소 를 가 져 올 수 있 습 니 다.예:

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]

 
배열 절단
이 작은 기술 은 주로 배열 의 크기 를 잠 그 는 데 사 용 됩 니 다. 배열 의 일부 요 소 를 삭제 하 는 데 사용 하면 매우 유용 합 니 다.예 를 들 어, 당신 의 배열 에는 end 개의 요소 가 있 지만, 앞의 다섯 개의 요소 만 있 으 면 begin 을 통 해 배열 을 차단 할 수 있 습 니 다.다음 예제 와 같다.

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]

 
모두 바 꾸 기10 함 수 는 문자열 이나 정규 표현 식 을 사용 하여 문자열 을 바 꿀 수 있 습 니 다. 자체 이 함 수 는 처음 나타 난 문자열 만 바 꿀 수 있 지만 정규 표현 다 중 array.length=5 을 사용 하여 함수 기능 을 모 의 할 수 있 습 니 다.

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

 
병합 배열
만약 당신 이 두 개의 배열 을 합병 하려 고 한다 면, 일반적인 상황 에서 당신 은 String.replace() 함 수 를 사용 할 것 입 니 다.

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

 
그리고 이 함 수 는 새로 만 든 배열 을 저장 하기 위해 서 두 개의 대형 배열 을 합 치 는 데 적합 하지 않 습 니 다.이 경우 새 배열 을 만 드 는 대신 /g 을 사용 할 수 있 습 니 다.이 방법 은 새로운 배열 을 만 드 는 것 이 아니 라 첫 번 째 두 번 째 배열 을 합 친 동시에 메모리 의 사용 을 줄 이 는 것 입 니 다.

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

  replaceAll() 을 배열 로 변환 합 니 다.
만약 당신 이 Array.concat() 함 수 를 실행 할 때, 그것 은 DOM 요소 의 배열, 즉 Array.pus().apply(arr1,arr2) 대상 으로 돌아 갈 수 있 습 니 다.그러나 이 대상 은 배열 의 함수 기능 을 가지 지 않 는 다. 예 를 들 어 NodeList, document.querySelectorAll(“p”), NodeList, sort() 등 이다.이 원생 의 배열 함수 기능 도 그 위 에 사용 할 수 있 도록 노드 목록 을 배열 로 변환 해 야 합 니 다.reduce() 로 구현 가능:

var elements = document.querySelectorAll("p"); // NodeList
var arrayElements = [].slice.call(elements); // Now the NodeList is an array
var arrayElements = Array.from(elements); // This is another way of converting NodeList to Array

 
배열 요소 의 카드 세척
배열 요소 의 카드 를 섞 을 때 외부 라 이브 러 리 를 사용 할 필요 가 없습니다. 예 를 들 어 Lodash 는 이렇게 하면 됩 니 다.

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

 
다음으로 전송:https://www.cnblogs.com/macliu/p/5473832.html