# 18个你需要知道的 JavaScript 优化技巧

## 1. 多个条件的判断

``````//Bad
if (x === 'iphoneX' || x === 'iphone11' || x === 'iphone12') {
//code...
}
//Good
if (['iphoneX', 'iphone11', 'iphone12'].includes(x)) {
//code...
}
``````

## 2. If 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;
``````

``````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、Undefined、’’ 空值检查

``````// Bad
if (first !== null || first !== undefined || first !== '') {
let second = first;
}
// Good 短路写法
let second = first|| '';
``````

## 4. 空值检查和分配默认值

``````let first = null,
let second = first || 'default'
console.log(second)
``````

## 4. 双位操作符

``````// Bad
Math.floor(4.9) === 4  //true
// Good
~~4.9 === 4  //true
``````

## 5. ES6常见小优化 - 对象属性

``````const x,y = 5
const obj = { x:x, y:y }
// Good
const obj = { x, y }
``````

## 6. ES6常见小优化-箭头函数

``````//Bad
function sayHello(name) {
console.log('Hello', name);
}
setTimeout(function() {
}, 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))
``````

## 7. ES6常见小优化-隐式返回值

``````//Bad
function calcCircumference(diameter) {
return Math.PI * diameter
}
// Good
const calcCircumference = diameter => (
Math.PI * diameter
)
``````

## 8. ES6常见小优化-解构赋值

``````const form = { a:1, b:2, c:3 }
const a = form.a
const b = form.b
const c = form.c
// Good
const { a, b, c } = form
``````

## 9. ES6常见小优化-展开运算符

``````const odd = [ 1, 3, 5 ]
const arr = [ 1, 2, 3, 4 ]
const nums = [ 2, 4, 6 ].concat(odd)
const arr2 = arr.slice( )
// Good
const nums = [2 ,4 , 6, ...odd]
const arr2 = [...arr]
``````

## 10. 数组常见处理

every some filter map forEach find findIndex reduce includes

``````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} )
``````

## 11. 比较返回

`return`语句中使用比较可以将代码从5行减少到1行。

``````// Bad
let test
const checkReturn = () => {
if (test !== undefined) {
return test;
} else {
return callMe('test');
}
}

// Good
const checkReturn = () => {
return test || callMe('test');
}
``````

## 12. 短函数调用

``````const test1 =() => {
console.log('test1');
}
const test2 =() => {
console.log('test2');
}
const test3 = 1;
if (test3 == 1) {
test1()
} else {
test2()
}
// Good
test3 === 1? test1():test2()
``````

## 13.switch代码块(ifelse代码块)简写

``````// 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]()

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();
``````

## 14. 多行字符串简写

``````// Bad
const data = 'abc abc abc abc abc abcnt'
+ 'test test,test test test testnt'
// Good
const data = `abc abc abc abc abc abc
test test,test test test test`
``````

## 15. Object.entries() Object.values() Object.keys()

Object.entries() 该特性可以将一个对象转换成一个对象数组。

Object.values()可以拿到对象value值

Object.keys()可以拿到对象key值

``````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']
**/
``````

## 16. 多次重复一个字符串

``````//Bad
let test = '';
for(let i = 0; i < 5; i ++) {
test += 'test,';
}
console.log(str);// test,test,test,test,test,

//good
console.log('test,'.repeat(5))
``````

## 17. 幂的简写

``````//Bad
Math.pow(2,3)// 8

//good
2**3 // 8
``````

## 18. 数字分隔符

``````//old syntax
let number = 98234567
//new syntax
let number = 98_234_567
``````

1.`replaceAll()`：返回一个新字符串，其中所有匹配的模式都被新的替换词替换。

2.`Promise.any()`：需要一个可迭代的Promise对象，当一个Promise完成时，返回一个带有值的Promise。

3.`weakref`：此对象持有对另一个对象的弱引用，不阻止该对象被垃圾收集。

4.`FinalizationRegistry`：让你在对象被垃圾回收时请求回调。

5.私有方法：方法和访问器的修饰符：私有方法可以用`#`声明。

6.逻辑运算符：`&&``||`运算符。

7.`Intl.ListFormat`：此对象启用对语言敏感的列表格式。

8.`Intl.DateTimeFormat`：该对象启用对语言敏感的日期和时间格式。

THE END