JS优化技巧，解决冗余代码

孤寂人生

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

1. // 传统函数定义
5. function add(a, b) {
9. return a + b;
13. }
17.   
21. // 箭头函数简化
25. const add = (a, b) => a + b;

复制代码

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

1. // 传统变量声明
5. const firstName = person.firstName;
9. const lastName = person.lastName;
13. // 解构赋值简化
17. const { firstName, lastName } = person;

复制代码

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

1. // 传统字符串拼接
5. const greeting = 'Hello, ' + name + '!';
9. // 模板字面量简化
13. const greeting = `Hello, ${name}!`;

复制代码

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

1. // 合并数组
5. const combined = [...array1, ...array2];
9. // 复制对象
13. const clone = { ...original };

复制代码

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

1. // 遍历数组并返回新数组
5. const doubled = numbers.map(num => num * 2);
9. // 过滤数组
13. const evens = numbers.filter(num => num % 2 === 0);

复制代码

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

1. // 传统条件判断
5. let message;
9. if (isSuccess) {
13. message = 'Operation successful';
17. } else {
21. message = 'Operation failed';
25. }
29. // 条件运算符简化
33. const message = isSuccess ? 'Operation successful' : 'Operation failed';

复制代码

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

1. // 传统参数设置默认值
5. function greet(name) {
9. const finalName = name || 'Guest';
13. console.log(`Hello, ${finalName}!`);
17. }
21.   
25. // 对象解构和默认参数简化
29. function greet({ name = 'Guest' }) {
33. console.log(`Hello, ${name}!`);
37. }

复制代码

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

1. // 纯函数
5. function add(a, b) {
9. return a + b;
13. }
17.   
21. // 函数组合
25. const multiplyByTwo = value => value * 2;
29. const addFive = value => value + 5;
33. const result = addFive(multiplyByTwo(3));

复制代码

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

1. // 传统对象创建
5. const person = {
9. firstName: 'John',
13. lastName: 'Doe',
17. age: 30,
21. };
25.   
29. // 对象字面量简化
33. const firstName = 'John';
37. const lastName = 'Doe';
41. const age = 30;
45. const person = { firstName, lastName, age };

复制代码

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

1. // 不好的
5. const x = 10; // 设置x的值为10
9. function a(b) {
13. return b * 2; // 返回b的两倍
17. }
21. // 好的
25. const speed = 10; // 设置速度为10
29. function double(value) {
33. return value * 2; // 返回输入值的两倍

复制代码

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

简单的条件判断逻辑用if else 或者 三元运算符, 一眼看过去还能知道说的啥，但是大量的if else和叠加在一起的三元运算符就是接盘侠的噩梦~~~
给大家上一个三元运算符叠加的案例，我是真实在项目中遇到过，cpu直接干爆~~~

1. <view>{{status===1?'成功': status===2 ? '失败' : status===3 ? '进行中' : '未开始' }}</view>

复制代码

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

1. let txt = '';
5. if (falg) {
9. txt = "成功"
13. } else {
17. txt = "失败"
21. }

复制代码

2，三元运算符

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

复制代码

3，多个if else

1. // param {status} status 活动状态：1：成功 2：失败 3:进行中 4：未开始
5. let txt = '';
9. if (status == 1) {
13. txt = "成功";
17. } else if (status == 2) {
21. txt = "失败";
25. } else if (status == 3) {
29. txt = "进行中";
33. } else {
37. txt = "未开始";
41. }

复制代码

4，switch case

1. let txt = '';
5. switch (status) {
9. case 1:
13. txt = "成功";
17. break;
21. case 2:
25. txt = "成功";
29. break;
33. case 3:
37. txt = "进行中";
41. break;
45. default:
49. txt = "未开始";
53. }

复制代码

5，对象写法

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

复制代码

5，Map写法

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

复制代码

12. 封装条件语句

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

1. 大脑：'别来碰我，让我静静'
5. // 不好的
9. if (fsm.state === 'fetching' && isEmpty(listNode)) {
13. // ...
17. }
21. // 好的
25. shouldShowSpinner(fsm, listNode){
29. return fsm.state === 'fetching' && isEmpty(listNode)
33. }
37. if(shouldShowSpinner(fsm, listNode)){
41. //...doSomething
45. }

复制代码

13. 函数应该只做一件事

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

1. // 不好的
5. function createFile(name, temp) {
9. if (temp) {
13.    fs.create(`./temp/${name}`);
17. } else {
21.    fs.create(name);
25. }
29. }
33. // 好的
37. function createFile(name) {
41. fs.create(name);
45. }
49. function createTempFile(name) {
53. createFile(`./temp/${name}`)
57. }

复制代码

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

• 遍历clients数组
  
• 遍历过程中，通过lookup函数得到一个新的对象clientRecord
  
• 判断clientRecord对象中isActive函数返回的是不是true,
  
• 
  
  
  
  • isActive函数返回true,执行email函数并把当前成员带过去
    
  
  

1. // 不好的
5. function emailClients(clients) {
9. clients.forEach((client) => {
13.    const clientRecord = database.lookup(client);
17.    if (clientRecord.isActive()) {
21.      email(client);
25.    }
29. });
33. }
37. // 好的
41. function emailClients(clients) {
45. clients
49.    .filter(isClientRecord)
53.    .forEach(email)
57. }
61. function isClientRecord(client) {
65. const clientRecord = database.lookup(client);
69. return clientRecord.isActive()
73. }

复制代码

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

• 巧用filter函数，把filter的回调单开一个函数进行条件处理，返回符合条件的数据
  
• 符合条件的数据再巧用forEach，执行email函数
  

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

1. // 不好的
5. const menuConfig = {
9. title: null,
13. body: 'Bar',
17. buttonText: null,
21. cancellable: true
25. };
29. function createMenu(config) {
33. config.title = config.title || 'Foo';
37. config.body = config.body || 'Bar';
41. config.buttonText = config.buttonText || 'Baz';
45. config.cancellable = config.cancellable === undefined ?
49. config.cancellable : true;
53. }
57. createMenu(menuConfig);
61. // 好的
65. const menuConfig = {
69. title: 'Order',
73. buttonText: 'Send',
77. cancellable: true
81. };
85. function createMenu(config) {
89. Object.assign({
93.    title: 'Foo',
97.    body: 'Bar',
101.    buttonText: 'Baz',
105.    cancellable: true
109. }, config)
113. }
117. createMenu(menuConfig);

复制代码

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

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

1. // 不好的
5. function createMenu(title, body, buttonText, cancellable) {
9. // ...
13. }
17. // 好的
21. const menuConfig = {
25. title: 'Foo',
29. body: 'Bar',
33. buttonText: 'Baz',
37. cancellable: true
41. };
45. function createMenu(config){
49. // ...
53. }
57. createMenu(menuConfig)

复制代码

16. 使用解释性的变量

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

1. // 不好的
5. const address = 'One Infinite Loop, Cupertino 95014';
9. const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
13. saveCityZipCode(address.match(cityZipCodeRegex)[1], address.match(cityZipCodeRegex)[2]);
17. // 好的
21. const address = 'One Infinite Loop, Cupertino 95014';
25. const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
29. cosnt [, city, zipCode] = address.match(cityZipCodeRegex) || [];
33. saveCityZipCode(city, zipCode)

复制代码

想对类中的属性进行更多自定义取/增/改的操作时，使用set/get
第一次见这个写法，不知道是啥意思的小伙伴，把他当成vue2中的defineProperty

1. Object.defineProperty(data1,'age',{
5. set:function(newAge){
9.    console.log(this.name+'现在'+newAge+'岁')
13. },
17. get:function(){
21.    return 18;
25. }
29. })

复制代码

是一个意思，赋值的时候set会被触发，取值的时候get会被触发。
巧用自带属性，提升性能。

1. class BankAccount {
5. constructor(balance = 1000) {
9.    this._balance = balance;
13. }
17. // It doesn't have to be prefixed with `get` or `set` to be a
21. //getter/setter
25. set balance(amount) {
29.    console.log('set')
33.    if (verifyIfAmountCanBeSetted(amount)) {
37.      this._balance = amount;
41.    }
45. }
49. get balance() {
53.    console.log('get')
57.    return this._balance;
61. }
65. verifyIfAmountCanBeSetted(val) {
69.    // ...
73. }
77. }
81. const bankAccount = new BankAccount();
85. // Buy shoes...
89. bankAccount.balance -= 100;
93. // Get balance
97. let balance = bankAccount.balance;

复制代码

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

闭包天生就是做私有化的

1. // 不好的
5. const Employee = function(name) {
9. this.name = name;
13. };
17. Employee.prototype.getName = function getName() {
21. return this.name;
25. };
29. const employee = new Employee('John Doe');
33. console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe
37. delete employee.name;
41. console.log(`Employee name: ${employee.getName()}`); // Employee name: undefined
45. // 好的
49. const Employee = function(name){
53. this.getName = function(){
57.    return name
61. }
65. }
69. const employee = new Employee('John Doe');
73. console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe
77. delete employee.name;
81. console.log(`Employee name: ${employee.getName()}`); // Employee name: undefined

复制代码

第一个示例
优点：

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

缺点：

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

第二个示例
优点：

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

缺点：

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

18. 使用方法链

链式写法也是代码优雅之道的重头戏。
ps：发明这个的程序员肯定是后端出身的，这种写法在PHP的CI框架中见过。

1. // 不好的
5. class Car {
9. constructor() {
13.    this.make = 'Honda';
17.    this.model = 'Accord';
21.    this.color = 'white';
25. }
29. setMake(make) {
33.    this.make = make;
37. }
41. save() {
45.    console.log(this.make, this.model, this.color);
49. }
53. }
57. const car = new Car();
61. car.setMake('Ford');
65. car.save();
69. // 好的
73. class Car {
77. constructor() {
81.    this.make = 'Honda';
85.    this.model = 'Accord';
89.    this.color = 'white';
93. }
97. setMake(make) {
101.    this.make = make;
105.    // NOTE: return this是为了用链式写法
109.    return this;
113. }
117. save() {
121.    console.log(this.make, this.model, this.color);
125.    // NOTE:return this是为了用链式写法
129.    return this;
133. }
137. }
141. const car = new Car()
145. .setMake('Ford')
149. .save();

复制代码

看完上面的这么多栗子，小伙伴的思路是不是清晰了很多，在你们的项目里练练手吧。

来源:https://www.cnblogs.com/xw-01/p/17600393.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！