JavaScript에서 코드를 줄이고 최적화하기 위한 팁 요약

1) !!를 사용하여 변수를 부울 유형으로 변환합니다.

때로는 일부 변수가 존재하는지 또는 유효한 값이 있는지 확인하여 해당 값을 true로 간주해야 합니다. 이러한 검사를 수행하려면 모든 유형의 데이터를 부울 값으로 자동 변환하는 ||(이중 부정 연산자)를 사용할 수 있습니다. 다음 변수만 false를 반환합니다: 0, null, "", 정의되지 않음 또는 NaN, 기타 모든 항목은 반환됩니다. 진실. 다음 간단한 예를 살펴보겠습니다.

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) 단락 조건

Pass가 표시되는 경우

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.querySelector()를 사용하여 ID로 특정 요소를 가져오려고 한다고 가정해 보겠습니다. 하지만 최신 브라우저에는 이 기능이 존재하지 않습니다. 따라서 이 함수가 존재하는지 확인하려면 in 연산자를 사용할 수 있습니다. 다음 예를 살펴보세요.

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

이 경우 문서에 querySelector 함수가 없으면 대신 document.getElementById()를 사용합니다.

7) 배열의 마지막 요소 가져오기

Array.prototype.slice(begin, end)를 사용하여 배열을 잘라낼 수 있습니다. 그러나 end 매개변수 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) 배열 잘림

this 기술은 배열의 크기를 잠글 수 있는데, 이는 배열에서 고정된 수의 요소를 삭제하려는 경우에 유용합니다. 예를 들어, 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() 함수를 사용하면 문자열 및 Regex를 사용하여 문자열을 바꿀 수 있습니다. 이 함수 자체는 첫 번째 일치하는 문자열만 바꿀 수 있습니다. 하지만 정규식 끝에 /g를 추가하여 교체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.querySelectorAll("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]

위 내용은 JavaScript에서 코드를 줄이고 최적화하기 위한 팁 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!