前言： 日常所说的优化优化、最后我们到底优化了哪些，不如让我们从代码质量开始；个人觉得简洁简化代码其实觉得存在感挺强烈的
1. 获取URL中 ？后的携带参
// 获取URL的查询参数
let params={}
location.search.replace(/([^?&=]+)=([^&]+)/g, (_,k,v) => parmas[k] = v);
cosnole.log(params) // ?a=b&c=d&e=f => {a: "b", c: "d", e: "f"}
2. 对多个条件筛选用 Array.includes
// 优化前
function test(fruit) {
if (fruit == 'apple' || fruit == 'strawberry') {
console.log('red');
}
}
// 优化后
function test(fruit) {
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
if (redFruits.includes(fruit)) {
console.log('red');
}
}
3. 选择 Map 或对象字面量，而不是 Switch、 if else
// 优化前
function test(color) {
switch (color) {
case 'red':
return ['apple', 'strawberry'];
case 'yellow':
return ['banana', 'pineapple'];
case 'purple':
return ['grape', 'plum'];
default:
return [];
}
}
// 优化后 方式1
const fruitColor = {
red: ['apple', 'strawberry'],
yellow: ['banana', 'pineapple'],
purple: ['grape', 'plum']
};
function test(color) {
return fruitColor[color] || [];
}
// 优化后 方式2
const fruitColor = new Map()
.set('red', ['apple', 'strawberry'])
.set('yellow', ['banana', 'pineapple'])
.set('purple', ['grape', 'plum']);
function test(color) {
return fruitColor.get(color) || [];
}
// if... if else... else... 优化方法
const actions = new Map([
[1, () => {
// ...
}],
[2, () => {
// ...
}],
[3, () => {
// ...
}]
])
actions.get(val).call(this)
4. 更少的嵌套，尽早返回
// 优化前
function test(fruit, quantity) {
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
if (!fruit) throw new Error('No fruit!');
if (redFruits.includes(fruit)) {
  if (quantity > 10) {
console.log('big quantity');
}
}
}
// 优化后
function test(fruit, quantity) {
const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
if (!fruit) throw new Error('No fruit!'); // condition 1: throw error early
if (!redFruits.includes(fruit)) return; // condition 2: stop when fruit is not redif (quantity > 10) {
console.log('big quantity');
}
}
5. 使用默认的函数参数和解构
// 优化前
function test(fruit，quantity ) {
const q = quantity || 1;
console.log ( );
if (fruit && fruit.name) {
console.log (fruit.name);
} else {
console.log('unknown');
}
}
// 优化后
function test({name} = {}，quantity = 1) {
console.log (name || 'unknown');
console.log (quantity );
}
6. 数组去重
Array.from(new Set(arr))
[...new Set(arr)]
7. 数组合并
[1,2,3,4].concat([5,6]) // [1,2,3,4,5,6]
[...[1,2,3,4],...[4,5]] // [1,2,3,4,5,6]
[1,2,3,4].push.apply([1,2,3,4],[5,6]) // [1,2,3,4,5,6]
8. 数组求和
[1,2,3,4].arr.reduce(function (prev, cur) {
return prev + cur;
},0) // 10
9. 数组排序
[1,2,3,4].sort(); // [1, 2,3,4],默认是升序
[1,2,3,4].sort((a, b) => b - a); // [4,3,2,1] 降序
10. 数组 判断是否包含值
[1,2,3].includes(4) //false
[1,2,3].indexOf(4) //-1 如果存在换回索引
[1, 2, 3].find((item)=>item===3)) //3 如果数组中无值返回undefined
[1, 2, 3].findIndex((item)=>item===3)) //2 如果数组中无值返回-1
11. 类数组转化为数组
Array.prototype.slice.call(arguments) //arguments是类数组(伪数组)
Array.prototype.slice.apply(arguments)
Array.from(arguments)
[...arguments]
12. 对象和数组转化
Object.keys({name:'张三',age:14}) //['name','age']
Object.values({name:'张三',age:14}) //['张三',14]
Object.entries({name:'张三',age:14}) //[[name,'张三'],[age,14]]
13. 扁平化n维数组
[1,[2,3]].flat(2) //[1,2,3]
[1,[2,3,[4,5]].flat(3) //[1,2,3,4,5]
[1[2,3,[4,5[...]].flat(Infinity) //[1,2,3,4...n]
14. 数组 串联（每一项是否都满足）使用 Array.every ； 并联（有一项满足）Array.some 过滤数组 每项设值
// 每一项是否满足
[1,2,3].every(item=>{return item > 2}) // false
// 有一项满足
[1,2,3].some(item=>{return item > 2}) // true
// 过滤数组
[1,2,3].filter(item=>{return item > 2}) // [3]
// 每项设值
[1,2,3].fill(false) // [false,false,false]
15. 实现防抖
const debounce = (fn, delay) => {
let timer = null;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}
16. 实现节流
const throttle = (fn, delay = 500) => {
let flag = true
return (...args) => {
if (!flag) return
flag = false
setTimeout(() => {
fn.apply(this, args)
flag = true
}, delay)
}
}
