자바스크립트에 매우 유용한 12가지

1) 연산자 를 사용하여 부울로 변환

때때로 우리는 어떤 변수가 존재하는지 또는 유효한 값을 가지고 있는지 확인하여 그것들을 참 값으로 간주할 필요가 있습니다. 이러한 종류의 유효성 검사를 수행하기 위해 !!(이중 부정 연산자) simple 을 사용할 수 있습니다 !!variable. 이는 모든 종류의 데이터를 부울로 자동 변환하고 이 변수는 다음 값 중 일부가 있는 경우에만 false를 반환합니다. 0, null, 또는 "", 그렇지 않으면 그것은 돌아올 것이다 . 실제로 이해하려면 다음과 같은 간단한 예를 살펴보십시오.undefinedNaNtrue

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
This magic will work with Date too and, in this case, it will return the timestamp number:

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

array.length5) 루프에서 캐싱

이 팁은 매우 간단하며 루프 중에 큰 배열을 처리할 때 성능에 큰 영향을 줍니다. 기본적으로 거의 모든 사람들이 배열을 반복하기 위해 다음과 같이 동기식으로 작성합니다.

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과 호환되는 코드를 작성해야 하고 , 를 사용하여 s document.querySelector()로 일부 요소를 가져 오려고 한다고 가정해 보겠습니다. id그러나 이 브라우저에서는 이 함수가 존재하지 않으므로 이 함수의 존재를 확인하려면 in 연산자를 사용할 수 있습니다. 이 예를 참조하세요.

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

querySelector이 경우 문서 객체에 기능 이 없으면 document.getElementById()as fallback을 사용할 수 있습니다.

7) 배열의 마지막 항목 가져오기

Array.prototype.slice(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]

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()함수를 사용하면 문자열과 정규식을 사용하여 문자열을 바꿀 수 있으며, 기본적으로 이 함수는 첫 번째 항목만 대체합니다. 그러나 끝에 replaceAll()다음을 사용하여 함수를 시뮬레이션할 수 있습니다 ./gRegex

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)이 경우 새 배열을 만드는 대신 which를 사용할 수 있습니다 . 첫 번째 배열의 두 번째 배열을 병합하여 메모리 사용량을 줄입니다.

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로 변환Arrays

함수 를 실행하면 document.querySelectorAll("p")아마도 DOM 요소의 배열인 NodeList객체를 반환할 것입니다. sort()그러나 이 객체는 , reduce(), map(), 와 같은 배열의 모든 기능을 가지고 있지 않습니다 filter(). 이들 및 다른 많은 기본 배열의 기능을 활성화하려면 로 변환해야 NodeList합니다 Arrays. 이 기술을 실행하려면 다음 기능을 사용하십시오 [].slice.call(elements).

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

12) 배열 요소 섞기

Lodash와 같은 외부 라이브러리를 사용하지 않고 배열의 요소를 섞으려면 다음 마술을 실행하십시오.

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