1. 배열 필터 사용
배열 풀에서 요소 버킷을 필터링하는 것은 작은 해킹입니다. 이 메소드는 테스트를 통과한 모든 배열 요소로 채워진 배열을 생성합니다(함수로 제공됨). 요구 사항에 따라 필수가 아닌 요소에 대한 콜백 함수를 만듭니다.
아래 예에서 버킷 요소는 null 이며 필터링할 준비가 되어 있습니다.
예:
schema = ["hi","ihaveboyfriend",null, null, "goodbye"]
schema = schema.filter(function(n) {
return n
});Output: ["hi","ihaveboyfriend", "goodbye"]이 해킹은 개발자의 시간과 코드 줄을 절약해 줍니다.
2. 문자열 바꾸기 기능을 사용하여 모든 값 바꾸기
String.replace() 함수를 사용하면 String 및 Regex를 사용하여 문자열을 바꿀 수 있습니다.
기본적으로 이 함수는 처음 나타날 때 문자열을 대체합니다. 그러나 replacementAll() 함수를 사용하여 모두 바꾸려면 Regex 끝에 /g를 사용하십시오.
예:
var string = "login login";
console.log(string.replace("in", "out")); // "logout login"
console.log(string.replace(/in/g, "out")); //"logout logout"3. 디버깅을 위해 중단점과 콘솔을 사용하세요
중단점 이나 디버깅 지점을 사용하면 여러 장벽을 설정하여 모든 장벽에서 오류 원인을 수정할 수 있습니다.
다음 호출 기능을 사용하려면 F11을 누르고 스크립트 실행을 다시 시작하려면 F8을 누르세요.
콘솔을 사용하여 함수에 의해 생성된 동적 값을 확인할 수도 있고 다양한 값에 대한 출력을 확인할 수도 있습니다.
4. 성능 저하 없이 부동 숫자로 변환
소수를 제거하기 위해 종종 math.floor , math.ceil 및 math.round를 사용합니다 . 이를 사용하는 대신 "~~"를 사용하여 값의 소수점을 제거합니다.
코드의 미세한 최적화와 관련하여 성능을 높이는 데에도 도움이 됩니다 .
예:
Use
~~ (math.random*100)
Instead of
math.round(math.random*100)5. 길이를 사용하여 배열의 빈 삭제
이 기술은 배열의 크기를 조정하고 비우는 데 도움이 됩니다.
배열에서 n개의 요소를 삭제하려면 array.length 를 사용하세요 .
array.length = n
See this example:
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]
For **emptying array** use
array.length = 0;.예:
var array = [1, 2, 3, 4, 5, 6];
array.length = 0;
console.log(array.length); // 0
console.log(array); // []이 기술은 배열 요소의 크기를 조정/설정 해제하는 다른 방법보다 주로 선호되며 대부분의 개발자가 따르는 최고의 자바스크립트 방법 중 하나입니다.
6. 서버 부하 없이 어레이 병합
두 개의 배열을 병합 해야 하는 경우 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)이유는 대규모 배열에서 Array.concat() 함수를 사용하면 별도의 새 배열을 생성하는 동안 많은 메모리를 소비 하기 때문입니다.
이 경우 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];또한 배열 크기에 관계없이 Javascript 코드의 성능을 최적화합니다.
7. splice를 사용하여 배열 요소 삭제
이것은 아마도 javascript에 대한 최고의 최적화 팁 중 하나일 것입니다 . JS 코드의 속도를 최적화합니다 .
삭제 대신 splice를 사용하는 것은 좋은 습관입니다. 코드에 "널/정의되지 않은 공간"이 절약됩니다.
삭제 사용 의 단점은 객체 속성을 삭제하지만 배열을 다시 색인화하거나 길이를 업데이트하지 않고 정의되지 않은 값을 남겨둔다는 것입니다. 또한 실행하는데 많은 시간이 소요됩니다.
스플라이스 사용
예
myArray = ["a", "b", "c", "d"]
myArray.splice(0, 2) ["a", "b"]
Result: myArray ["c", "d"]8. 객체의 값 확인
객체가 비어 있는지 확인하려면 다음을 사용하십시오.
Object.keys(YOUR\_OBJECT).length
// 0 returns if object is empty다음 코드는 객체의 요소 수를 반환합니다.
9. 변수 캐시
변수를 캐싱하면 자바스크립트 성능이 엄청나게 향상됩니다 .
document.getElementById() 또는 getElementsByClassName()을 사용할 때마다 JS는 유사한 각 요소 요청에 따라 반복적으로 모든 요소를 통해 이동합니다.
성능을 높이려면 선택 사항을 일부 변수에 캐시하십시오(동일한 선택 사항을 여러 번 사용하는 경우).
예:
var cached = document.getElementById('someElement');
cached.addClass('cached-element');루프에서 대규모 배열을 처리하는 데 권장되는 성능에 큰 영향을 미치는 간단한 최적화 팁 입니다 .
성능 결과는 이 링크를 확인하세요.
10. if/else 대신에 스위치 케이스를 사용하세요
일반적으로 스위치 케이스는 if/else 문 위에 사용되어 거의 동일한 작업을 수행합니다 .
스위치 문에서 테스트할 표현식은 한 번만 평가되므로 if/else에 비해 스크립트의 실행 시간이 짧아집니다. 여기서 모든 if에 대해 평가해야 합니다.
11. 단락 조건부
단락은 논리 연산자가 모든 인수를 평가하지 않는 경우입니다.
코드
if (loggedin) {
welcome\_messege();
}검증된 변수와 그 사이에 && (AND 연산자) 를 사용한 함수의 조합을 사용하여 짧게 만듭니다 .
이제 위의 코드를 한 줄로 만들 수 있습니다
loggedin && welcome\_messege();12. 배열의 마지막 항목 가져오기
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]13. ||를 사용한 기본값 운영자
JS에는 기본값을 갖는 기본 규칙이 있습니다. 그렇지 않으면 프로세스가 정의되지 않은 값에서 중단됩니다.
변수에 기본값을 제공하려면 || 이 가장 일반적인 문제를 피하십시오.
var a = a || 'hello'개발자는 버그를 방지하기 위해 함수에 전달될 수 있는 충돌하는 값이 있는지 확인해야 합니다.
14. JS 코드를 아름답게 만들기
Javascript 코드를 아름답게 하려면 jsbeautifier 를 사용하세요 . 서투른 JS 코드를 잘 구조화된 코드로 포맷합니다.
꾸미기 전의 코드
꾸미기 후 코드
15. JS 성능 확인
Javascript 코드의 성능을 확인하고 결과를 공유하려면 jsperf를 사용하세요. 테스트케이스를 생성하고 공유하는 가장 쉬운 방법입니다.