JS优化技巧

20 个 JS 工具函数助力高效开发
1、条件判断代码
复杂逻辑推荐使用对象Map写法
1)，普通的if else

let txt = '';
if (falg) {
 txt = "成功"
} else {
 txt = "失败"
}
1
2
3
4
5
6

2)，三元运算符

let txt = flag ? "成功" : "失败";
1

3)，多个if else

// param {status} status 活动状态：1：成功 2：失败 3:进行中 4：未开始
let txt = '';
if (status == 1) {
 txt = "成功";
} else if (status == 2) {
 txt = "失败";
} else if (status == 3) {
 txt = "进行中";
} else {
 txt = "未开始";
}
1
2
3
4
5
6
7
8
9
10
11

4)，switch case

let txt = '';
switch (status) {
 case 1:
 txt = "成功";
 break;
 case 2:
 txt = "成功";
 break;
 case 3:
 txt = "进行中";
 break;
 default:
 txt = "未开始";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

5)，对象写法

const statusMap = {
 1: "成功",
 2: "失败",
 3: "进行中",
 4: "未开始"
}
//调用直接 statusMapp[status]
1
2
3
4
5
6
7

6)，Map写法
Map 对象
Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

const actions = new Map([
 [1, "成功"],
 [2, "失败"],
 [3, "进行中"],
 [4, "未开始"]
])
// 调用直接 actions.get(status)

let map=new Map([
    ["fun1",()=>{console.log('fun1:map函数值')}],
    ['fun2',()=>{console.log('fun2函数')}]
]);
map2.get('fun1')();//fun1:map函数值
map2.get('fun2')();//fun2函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Maps 和 Objects 的区别
一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。
Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。
Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。
Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。
2、使用方法链
链式写法也是代码优雅之道的重头戏。
实现链式反应的本质为：每次该对象（Object-A）调用其方法（Method-1）时，返回值仍为本对象（Object-A），从而后面使用链式的方式再调用另外一个方法（Method-2）时，得到的this仍为原对象（Object-A），然后返回值同样（Object-A），从而仍可通过链式的方式再调用该对象上的别的方法（Method-3），以此类推
在js上常见的链式编程有以下几种具体应用：

• 对象方法return this的链式操作
• Promise
• 责任链（Chain of responsibility）

// 不好的
class Car {
 constructor() {
   this.make = 'Honda';
   this.model = 'Accord';
   this.color = 'white';
 }
 setMake(make) {
   this.make = make;
 }
 save() {
   console.log(this.make, this.model, this.color);
 }
}
const car = new Car();
car.setMake('Ford');
car.save();
// 好的
class Car {
 constructor() {
   this.make = 'Honda';
   this.model = 'Accord';
   this.color = 'white';
 }
 setMake(make) {
   this.make = make;
   // NOTE: return this是为了用链式写法
   return this;
 }
 save() {
   console.log(this.make, this.model, this.color);
   // NOTE:return this是为了用链式写法
   return this;
 }
}
const car = new Car()
 .setMake('Ford')
 .save();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

3、位运算符
双位非运算符有一个非常实用的用途，可以用它来替代Math.floor()函数，它在执行相同的操作时速度更快。
注意：双非位运算符只适用于 32 位整数，即范围为 -(2^31) 到 (2^31)-1，即 -2147483648 到 2147483647。对于大于 2147483647 或小于 0 的数字，双非位运算符（~~）会给出错误的结果，因此建议在这种情况下使用 Math.floor() 方法。
传统写法：

Math.floor(4.9) === 4  //true
1

简化写法：

~~4.9 === 4  //true
1

4、多值匹配
传统写法

if (value === 1 || value === 'one' || value === 2 || value === 'two') {
  // ...
}
1
2
3

简化写法

if ([1, 'one', 2, 'two'].includes(value)) { 
    // ...
}
1
2
3

5、扩展运算符...
拓展运算符是深拷贝还是浅拷贝是看具体拷贝内容的，当拷贝的内容只有一层时是深拷贝，层数很多时是浅拷贝（[{name:‘zs’,age:18,sex:“男”},{name:‘ls’,age:16,sex:“女”}];）
传统写法

// 合并数组
const odd = [1, 3, 5];
const nums = [2, 4, 6].concat(odd);
// 克隆数组(深复制)
const arr = [1, 2, 3, 4];
const arr2 = arr.slice();

//合并对象
let fname = { firstName : '前端' };
let lname = { lastName : '充电宝'}
let full_names = Object.assign(fname, lname);
1
2
3
4
5
6
7
8
9
10
11

简化写法：

// 合并数组
const odd = [1, 3, 5];
const nums = [2, 4, 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]
// 克隆数组(深复制) 也可用于对象深复制
const arr = [1, 2, 3, 4];
const arr2 = [...arr];

//合并对象
let full_names = {...fname, ...lname};
1
2
3
4
5
6
7
8
9
10