l兰州网站建设/国外免费建站网站

本文主要是分享一下平时前端工程师，在写前端代码过程中的一些代码优化，以及使用的一些小技巧，来使我们的代码更加简洁，可读性更强，更易维护。

1. 字符串的自动匹配（includes的优化）

includes是ES7新增的 API，与indexOf不同的是includes直接返回的是Boolean值，indexOf则返回的索引值, 数组和字符串都有includes方法。

我们经常需要检查某个字符串是否是符合我们的规定的字符串之一。最常见的方法就是使用||和===去进行判断匹配。但大量的使用这种判断方式，会使得我们的代码变得十分臃肿，写起来也很累。其实我们可以使用Array.includes来帮我们自动去匹配。

代码示例：

// 未优化前的代码
if(code==='202' || code === '203' || code === '204') {return 1
}else{return 2
}

// 优化后的写法
if(['202','203','204'].includes(code)){retrun 1
}else{return 2
}

2. 三目运算符

代码示例：

// 未优化前的代码
let demo
if(code==='201') {demo = 1
}else if (code==='202'){demo = 2
}else{demo = 99
}

// 优化后的写法
let demo = code==='201' ? 1 : code==='202' ? 2 : 99

虽然三目简洁一些，但是复杂的逻辑，不建议使用。
因为复杂逻辑会导致代码可读性变差，所以在实际使用中需要我们根据情况去取舍。

3. 解构

代码示例：

// 未优化前的代码
const demo1 = {name: '回忆哆啦没有A梦',age: 27,skill:['js','vue','python','react']
}
const demo2 = {name: demo2.name,age: demo2.age,
}
console.log(demo2) //  {name: '回忆哆啦没有A梦',age: 27}

// 优化后的写法
const demo1 = {name: '回忆哆啦没有A梦',age: 27,skill:['js','vue','python','react']
}
const {name,age} = demo1
const demo2 ={name, age}
console.log(demo2) //  {name: '回忆哆啦没有A梦',age: 27}
console.log(name) //  '回忆哆啦没有A梦'
console.log(age) //  27

使用解构语法，开发人员可以快速将数组中的值或对象中的属性解包到指定的变量中。

4. 使用可选的链接运算符（?.）

?.作用与 . 操作符类似。

不同的是 ?. 如果对象链上的引用是 null 或者 undefined 时， . 操作符会像前言中的例子抛出一个错误，而 ?. 操作符则会按照短路计算的方式进行处理，返回 undefined。

可选链操作符也可用于函数调用，如果操作符前的函数不存在，也将会返回 undefined。

代码示例：

// 未优化前的代码
let code;
if (data?.code) {code = data.code;
} else {code = "201";
}

// 优化后的写法
const code = data?.code || "201";

?.提供了一种方法来简化被连接对象的值访问，保证访问数据的安全性。它可以用于对象、数组、函数中。这个语法很有用，在项目中使用可以达到事半功倍的效果。

5. 将参数作为对象传递

代码示例：

// 未优化前的代码
const creatData = (name,skill,age)=>{// ...
}
creatData('回忆哆啦没有A梦',['js','vue','python','react'],27)

// 优化后的写法
const creatData = ({name,age,skill})=>{// ...
}
creatData({name: '回忆哆啦没有A梦',age: 27,skill:['js','vue','python','react']
})

这样传递参数的方式的好处：

• 参数的顺序不再重要，开发人员可以专注于交付高质量的代码，而不必反复检查功能定义。
• 由于IDE将专注于您提供的特定参数，因此自动完成变得更加容易。
• 当函数调用指定每个属性的值时，此方法以明确的方式传达意图，后续维护的时候，也不必害怕因为传错参数顺序导致执行错误。
• 大型代码库将从附加的详细信息中受益匪浅。

6. 用对象代替switch/case，if/else选择结构

我们经常遇到复杂逻辑判断的情况，通常会用if/else或者switch/case来实现多个条件判断，但这样会有个问题，随着逻辑复杂度的增加，代码中的if/else/switch/case会变得越来越臃肿，越来越看不懂，所以我们可以这样优化下代码。

代码示例：

// 未优化前的代码
let activeText;
switch (code) {case 500:activeText= "通用错误消息";break;case 501:activeText= "无法识别请求";break;case 502:activeText= "网关或者代理错误";break;case 503:activeText= "服务器维护或者过载";break;case 504:activeText= "未收到响应";break;case 505:activeText= "服务器不支持";break;
}

借助 Object 的 { key: value } 结构，我们可以在 Object 中枚举所有的情况，然后将 key 作为索引，直接通过 Object.key 或者 Object[key] 来获取内容。

// 优化后的写法
const texts = {500: "通用错误消息",501: "无法识别请求",502: "网关或者代理错误",503: "服务器维护或者过载",504: "未收到响应",505: "服务器不支持",
};
const activeText = texts [code];

7. 判断一个变量是否为null、undefined、0、false、NaN、""

如果你想要判断一个变量是否为null、undefined、0、false、NaN、”''，你就可以使用逻辑非（!）取反，来帮助我们来判断,而不用每一个值都用===来判断。

代码示例：

// 未优化前的代码
const isFalsey = (value) => {if (value === null ||value === undefined ||value === 0 ||value === false ||value === NaN ||value === "") {return true;}return false;
};

// 优化后的写法
const isFalsey = (value) => !value;

8. 等到多个Promise完成

我们在开发中，经常会遇到一个需求，有a,b, 2个http请求，我们需要等到a,b, 2个接口都请求成功，返回数据后才能去做动作c。

这时候， 每当您需要执行多个任务并等待它们完成时，此技巧就很重要。由于每个任务都是异步运行的，因此可以并行处理它们，并且一旦所有承诺都得到解决，就可以使用返回的数据。

const promiseA = = new Promise((resolve, reject) => {resolve('成功了')
});
const promiseB = new Promise((resolve, reject) => {resolve('success')
});
let promiseC = Promse.reject('失败')Promise.all([promiseA , promiseB ]).then((result) => {console.log(result)               // ['成功了', 'success']
}).catch((error) => {console.log(error)
})Promise.all([promiseA ,promiseB ,promiseC ]).then((result) => {console.log(result)
}).catch((error) => {console.log(error)      // 失败了，打出 '失败'
})

Promse.all在处理多个异步处理时非常有用，比如说：一个页面上需要等两个或多个ajax的数据回来以后才正常显示，在此之前只显示loading图标。

除了Promse.all，还有个Promse.race ，race就是“赛跑”。
Promse.race 意思就是说，Promise.race([promiseA , promiseB ,promiseC])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

9. for-of 使用

for-of，可以帮助我们自动遍历Array和object中的每一个元素,不需要我们手动跟更改索引来遍历元素。

代码示例：

// 未优化前的代码
const arr = ['a',' b', 'c'];
for (let i = 0; i < arr.length; i++) {const demo = arr[i];console.log(demo);
}

// 优化后的写法
for (const demo of arr) {console.log(demo);
}
// a
// b
// c

不推荐使用 for-in，因为 for-in 的 性能很差 ，他会迭代所有的私有和共有属性，原型链一级级查很耗性能。

未完待续，持续更新…