당신이 알아야 할 18가지 JavaScript 최적화 팁
- WBOY앞으로
- 2021-12-14 18:49:361678검색
이 기사에서는 JavaScript 프로그래밍을 사용하는 모든 개발자에게 적합한 18가지 JavaScript 최적화 기술을 살펴보겠습니다. 이 기사의 목적은 개발 작업에 JavaScript 언어를 더 능숙하게 사용할 수 있도록 돕는 것입니다. 모두에게 도움이 될 것입니다.
1. 여러 조건의 판단
여러 값을 판단해야 할 경우 배열의 include 메소드를 사용할 수 있습니다.
//Bad
if (x === 'iphoneX' || x === 'iphone11' || x === 'iphone12') {
//code...
}
//Good
if (['iphoneX', 'iphone11', 'iphone12'].includes(x)) {
//code...
}2. true인 경우… else
삼항 연산자는 if-else 조건 내부에 더 큰 논리가 포함되지 않은 경우 더 잘 작동합니다.
// Bad
let test= boolean;
if (x > 100) {
test = true;
} else {
test = false;
}
// Good
let test = (x > 10) ? true : false;
//or we can simply use
let test = x > 10;조건을 중첩한 후에는 아래와 같이 내용을 유지합니다(복잡한 점의 3배):
let x = 300, let test2 = (x > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100'; console.log(test2); // "greater than 100"
3 Null, Undefine, '' Null 값 확인
때로는 우리가 참조하는지 확인해야 합니다. 변수가 null이 아니거나 정의되지 않았거나 ''가 아니더라도 단락 쓰기를 사용할 수 있습니다
// Bad
if (first !== null || first !== undefined || first !== '') {
let second = first;
}
// Good 短路写法
let second = first|| '';4. Null 값 확인 및 기본값 할당
값을 할당하고 변수를 찾으면 비어 있고 기본값을 할당해야 하는 경우 다음과 같은 단락 쓰기를 사용할 수 있습니다.
let first = null, let second = first || 'default' console.log(second)
4. 이중 비트 연산자
비트 연산자는 JavaScript 초보자 튜토리얼의 기본 지식 포인트이지만 우리는 그렇지 않습니다. 비트 연산자를 자주 사용하지 않습니다. 누구도 바이너리를 다루지 않고 1과 0으로 작업하고 싶어하지 않기 때문입니다.
하지만 이중 비트 연산자에는 매우 실용적인 경우가 있습니다. Math.floor() 대신 이중 비트 연산자를 사용할 수 있습니다. 이중 음수 위치 연산자의 장점은 동일한 작업을 더 빠르게 수행한다는 것입니다.
7. ES6 일반적인 소규모 최적화 - 암시적 반환 값
반환 값은 함수의 최종 결과를 반환하는 데 일반적으로 사용하는 키워드입니다. 명령문이 하나만 있는 화살표 함수는 암시적으로 결과를 반환할 수 있습니다(함수는 return 키워드를 생략하려면 괄호({ })를 생략해야 합니다).여러 줄 문(예: 개체 텍스트)을 반환하려면 { } 대신 ()를 사용하여 함수 본문을 래핑해야 합니다. 이렇게 하면 코드가 단일 문으로 평가됩니다. // Bad
Math.floor(4.9) === 4 //true
// Good
~~4.9 === 4 //true
const x,y = 5
// Bad
const obj = { x:x, y:y }
// Good
const obj = { x, y }
여러 줄 문(예: 개체 텍스트)을 반환하려면 { } 대신 ()를 사용하여 함수 본문을 래핑해야 합니다. 이렇게 하면 코드가 단일 문으로 평가됩니다. //Bad
function sayHello(name) {
console.log('Hello', name);
}
setTimeout(function() {
console.log('Loaded')
}, 2000)
list.forEach(function(item) {
console.log(item)
})
// Good
const sayHello = name => console.log('Hello', name)
setTimeout(() => console.log('Loaded'), 2000)
list.forEach(item => console.log(item))
작성 시 API를 보지 마십시오. 결국 이러한 방법은 코딩 효율성을 향상시킬 수 있습니다. 매일 사용
모든 필터 맵 forEach find findIndex 감소 포함//Bad
function calcCircumference(diameter) {
return Math.PI * diameter
}
// Good
const calcCircumference = diameter => (
Math.PI * diameter
)
11. 비교 반환return 문에서 비교를 사용하면 코드를 5줄에서 1줄로 줄일 수 있습니다.
const form = { a:1, b:2, c:3 }
//Bad
const a = form.a
const b = form.b
const c = form.c
// Good
const { a, b, c } = form
12. 짧은 함수 호출
삼항 연산자를 사용하여 이러한 유형의 함수를 구현할 수 있습니다. const odd = [ 1, 3, 5 ]
const arr = [ 1, 2, 3, 4 ]
// Bad
const nums = [ 2, 4, 6 ].concat(odd)
const arr2 = arr.slice( )
// Good
const nums = [2 ,4 , 6, ...odd]
const arr2 = [...arr]
키-값 객체에 조건을 저장한 후 조건에 맞게 사용할 수 있습니다. const arr = [1,2,3]
//every 每一项都成立，才会返回true
console.log( arr.every(it => it>0 ) ) //true
//some 有一项都成了，就会返回true
console.log( arr.some(it => it>2 ) ) //true
//filter 过滤器
console.log( arr.filter(it => it===2 ) ) //[2]
//map 返回一个新数组
console.log( arr.map(it => it==={id:it} ) ) //[ {id:1},{id:2},{id:3} ]
//forEach 没有返回值
console.log( arr.forEach(it => it===console.log(it)) ) //undefined
//find 查找对应值 找到就立马返回符合要求的新数组
console.log( arr.find(it => it===it>2) ) //3
//findIndex 查找对应值 找到就立马返回符合要求新数组的下标
console.log( arr.findIndex(it => it===it>2) ) //2
//reduce 求和或者合并数组
console.log( arr.reduce((prev,cur) => prev+cur) ) //6
//includes 求和或者合并数组
console.log( arr.includes(1) ) //true
//数组去重
const arr1 = [1,2,3,3]
const removeRepeat = (arr) => [...new Set(arr1)]//[1,2,3]
//数组求最大值
Math.max(...arr)//3
Math.min(...arr)//1
//对象解构 这种情况也可以使用Object.assign代替
let defaultParams={
pageSize:1,
sort:1
}
//goods1
let reqParams={
...defaultParams,
sort:2
}
//goods2
Object.assign( defaultParams, {sort:2} )
코드에서 여러 줄 문자열을 처리할 때 다음과 같이 할 수 있습니다: // Bad
let test
const checkReturn = () => {
if (test !== undefined) {
return test;
} else {
return callMe('test');
}
}
// Good
const checkReturn = () => {
return test || callMe('test');
}
Object.entries() 이 기능은 객체를 객체 배열로 변환합니다. Object.values()는 객체 값을 얻을 수 있습니다.
Object.keys()는 객체 키 값을 얻을 수 있습니다.const test1 =() => {
console.log('test1');
}
const test2 =() => {
console.log('test2');
}
const test3 = 1;
if (test3 == 1) {
test1()
} else {
test2()
}
// Good
test3 === 1? test1():test2()
16 문자열을 여러 번 반복합니다.
같은 문자를 여러 번 반복하려면 , for 루프를 사용하여 동일한 루프에 추가할 수 있습니다. 어떻게 단축할 수 있나요?// Bad
switch (data) {
case 1:
test1();
break;
case 2:
test2();
break;
case 3:
test();
break;
// And so on...
}
// Good
const data = {
1: test1,
2: test2,
3: test
}
data[anything] && data[anything]()
// Bad
if (type === 'test1') {
test1();
}
else if (type === 'test2') {
test2();
}
else if (type === 'test3') {
test3();
}
else if (type === 'test4') {
test4();
} else {
throw new Error('Invalid value ' + type);
}
// Good
const types = {
test1: test1,
test2: test2,
test3: test3,
test4: test4
};
const func = types[type];
(!func) && throw new Error('Invalid value ' + type); func();
17. 거듭제곱의 약어
수학적 지수 거듭제곱 함수는 다음과 같습니다. // Bad
const data = 'abc abc abc abc abc abc\n\t'
+ 'test test,test test test test\n\t'
// Good
const data = `abc abc abc abc abc abc
test test,test test test test`
이제 _만 사용하면 쉽게 숫자를 구분할 수 있습니다. 이렇게 하면 대량의 데이터를 더 쉽게 처리할 수 있습니다. const data = { test1: 'abc', test2: 'cde' }
const arr1 = Object.entries(data)
const arr2 = Object.values(data)
const arr3 = Object.keys(data)
/** arr1 Output:
[
[ 'test1', 'abc' ],
[ 'test2', 'cde' ],
]
**/
/** arr2 Output:
['abc', 'cde']
**/
/** arr3 Output:
['test1', 'test2']
**/ 최신 버전의 JavaScript(ES2021/ES12)의 최신 기능을 사용하고 싶다면 다음을 확인하세요.
1.
replaceAll(): 일치하는 모든 패턴이 새로운 대체 단어로 대체되는 새 문자열을 반환합니다.replaceAll()：返回一个新字符串，其中所有匹配的模式都被新的替换词替换。2.
Promise.any()：需要一个可迭代的Promise对象，当一个Promise完成时，返回一个带有值的Promise。3.
weakref：此对象持有对另一个对象的弱引用，不阻止该对象被垃圾收集。4.
FinalizationRegistry：让你在对象被垃圾回收时请求回调。5.私有方法：方法和访问器的修饰符：私有方法可以用#声明。
6.逻辑运算符：&&和||运算符。
7.
Intl.ListFormat：此对象启用对语言敏感的列表格式。8.
Intl.DateTimeFormat
Promise.any(): 반복 가능한 Promise 객체가 필요합니다. Promise가 완료되면 값이 있는 Promise가 반환됩니다. 3. weakref: 이 개체는 다른 개체에 대한 약한 참조를 보유하며 개체가 가비지 수집되는 것을 방지하지 않습니다. 🎜🎜🎜🎜4.FinalizationRegistry: 객체가 가비지 수집될 때 콜백을 요청할 수 있습니다. 🎜🎜🎜🎜5. 프라이빗 메서드: 메서드 및 접근자의 수정자: 프라이빗 메서드는 #으로 선언할 수 있습니다. 🎜🎜🎜🎜6. 논리 연산자: && 및 || 🎜🎜🎜🎜7.Intl.ListFormat: 이 개체는 언어 구분 목록 형식을 활성화합니다. 🎜🎜🎜🎜8.Intl.DateTimeFormat: 이 개체는 언어 구분 날짜 및 시간 형식을 활성화합니다. 🎜🎜🎜🎜【추천 학습: 🎜javascript 고급 튜토리얼🎜】🎜위 내용은 당신이 알아야 할 18가지 JavaScript 최적화 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!