18 个JS优化技巧

这 18 个JS优化技巧，可以解决 90% 的屎山代码！！！

1、使用箭头函数简化函数定义

2、使用解构赋值简化变量声明

3、使用模板字面量进行字符串拼接

4、使用展开运算符进行数组和对象操作

5、使用数组的高阶方法简化循环和数据操作

6、使用条件运算符简化条件判断

7、使用对象解构和默认参数简化函数参数

8、使用函数式编程概念如纯函数和函数组合

9、使用对象字面量简化对象的创建和定义

10、使用适当的命名和注释来提高代码可读性

11、优雅的写条件判断代码

简单的条件判断逻辑用if else 或者 三元运算符, 一眼看过去还能知道说的啥，但是大量的if else和叠加在一起的三元运算符就是接盘侠的噩梦~~~

给大家上一个三元运算符叠加的案例，我是真实在项目中遇到过，cpu直接干爆~~~

大概是这样的，具体的项目代码不好放在这里，小伙伴们意会就行。复杂逻辑推荐使用对象Map写法，符合人脑的逻辑，可读性高，看着舒服~~~

11.1 普通的if else

11.2 三元运算符​​​​​​​

11.3 多个if else​​​​​​​

11.4 switch case​​​​​​​

11.5 对象写法​​​​​​​

11.6 Map写法

12、封装条件语句

同上，if里的条件越多越不利于接盘侠的维护，不利于人脑的理解，一眼看过去又是一堆逻辑。

多个逻辑应该化零为整：

13、函数应该只做一件事

函数式写法推崇柯里化, 一个函数一个功能，可拆分可组装

再来一个栗子函数，要做的事情如下：

·遍历clients数组

·遍历过程中，通过lookup函数得到一个新的对象clientRecord

·判断clientRecord对象中isActive函数返回的是不是true,

·isActive函数返回true,执行email函数并把当前成员带过去

上面不好的栗子一眼看过去是不是感觉一堆代码在那，一时半会甚至不想去看了。好的栗子，是不是逻辑很清晰，易读。

·巧用filter函数，把filter的回调单开一个函数进行条件处理

·返回符合条件的数据符合条件的数据再巧用forEach，执行email函数

14、Object.assign给默认对象赋默认值

15、函数参数两个以下最好

说一千道一万，就是为了优雅，就是为了可读性好。

16、使用解释性的变量

省流，用了扩展运算符，为了可读性（saveCityZipCode(city, zipCode)可读性很好，知道参数是干嘛的）

想对类中的属性进行更多自定义取/增/改的操作时，使用set/get

17、让对象拥有私有成员-通过闭包来实现

闭包天生就是做私有化的。

第一个示例

优点：

·通过原型链共享方法，节省了内存空间。所有实例对象共享同一个 getName 方法，而不是每个实例对象都创建一个独立的方法。

缺点：

·在构造函数中无法直接定义私有属性或方法，所有属性和方法都会被暴露在原型链上。

第二个示例

优点：

·可以在构造函数内部定义私有属性和方法，不会暴露在对象的原型链上，提供了更好的封装性。

缺点：

·每次创建实例对象时，都会创建一个独立的方法，每个实例对象都有自己的 getName 方法,占用更多的内存空间。

18、使用方法链

链式写法也是代码优雅之道的重头戏。

ps：发明这个的程序员肯定是后端出身的，这种写法在PHP的CI框架中见过。