本文已参与「新人创作礼」活动,一起开启掘金创作之路。
写在前面
又是一年的毕业季,工作之余也浅叹一下,依稀记得当初因为太年轻,没有好的编码习惯也不注重编码效率,在实习阶段频繁加班的苦逼日子,今天抽空总结一下几个编程优化小Tip,给即将踏入前端俱乐部年轻的小可爱们做个参考,前辈就当温习一下,也欢迎大家补充指正!
JS 代码优化Tip
连环 if 优化
在许多业务中,往往会涉及很多的分支,当分支太多的时候,我们很容易像 code_1 那样将 if-else-if 写成非常 ugly 的代码段,那么有什么优化手段呢,接下来我们来看看代码
code-1 未优化的代码
逻辑很简单,根据 code 返回对应的颜色
// code-1
// 未优化前代码
function getColor(code){
if(code === '200'){
return 'blue-blue'
}else if(code === '201'){
return 'green-green'
}else if(code === '202'){
return 'red-red'
}else{
return 'other-other'
}
}
console.log(getColor('200'))
复制代码
code-2 使用 switch 优化
可以看出使用 switch 优化后代码行数并没有减少,仅仅是优化了结构,代码看起来更加舒服,阅读也相对更简单一些,而这并不是我们最优的选择
// code-2
// 使用 switch 优化
function getColor2(code){
switch(code){
case '200':
return 'blue-blue'
break
case '201':
return 'green-green'
break
case '202':
return 'red-red'
break
default:
return 'other-other'
break
}
}
console.log(getColor2('200'))
复制代码
code-3 使用映射优化
很明显,使用映射优化的代码,代码量降低了,同时也没有影响代码的可读性,对于更加复杂的分支,通过映射的写法将会有更加明显的优势,而且这样做还有一个好处,如果分支非常复杂时,可以将映射抽离,作为 json 文件引入到代码中,进一步优化代码,更加易于维护
// code-3
// 使用映射优化
function getColor3(code){
var colorMap = {
'200': 'blue-blue',
'201': 'green-green',
'202': 'red-red',
}
return colorMap[code] || 'other-other'
}
console.log(getColor3('200'))
复制代码
可选链操作符 ?.
顾名思义,可选即当读取的属性在引用为空(nullish ) (null
或者 undefined
) 的情况下不会引起错误,如 code-1,当我们无法确定 req 的数据结构的时候,那么如果想获取 type,就需要通过链操作 req.data.params.type 获取,而 req、data、params 中任何一个获取失败都会引起报错,所以需要通过 && 符号逐个判断
if(req && req.data && req.data.params && req.data.params.type === '200'){}
复制代码
使用 ?. 优化
可以看出,使用 ?. 后代码简洁性和蹭蹭蹭往上涨!!
if(req?.data?.params?.type === '200'){}
复制代码
合并对象
合并对象可以说是业务中非常非常常见的逻辑了,主要存在两种优化的写法
未优化代码
通过逐一赋值的方式合并,这种方式非常 ugly,随着 key 值越多,代码 ugly 的程度会急剧增加
let info = {
name: 'yimwu',
tel: '134xxxxx320'
}
let otherInfo = {
name: 'yimwu',
age: '18',
address: 'gd'
}
info.age = otherInfo.age
info.address = otherInfo.address
console.log(info)
复制代码
通过扩展运算符优化
let info = {
name: 'yimwu',
tel: '134xxxxx320'
}
let otherInfo = {
name: 'yimwu',
age: '18',
address: 'gd'
}
info = {...info, ...otherInfo}
console.log(info)
复制代码
通过 ES6 方法 Object.assign() 优化
let info = {
name: 'yimwu',
tel: '134xxxxx320'
}
let otherInfo = {
name: 'yimwu',
age: '18',
address: 'gd'
}
Object.assign(info, otherInfo)
console.log(info)
复制代码
深拷贝
我们都知道对象存在引用,当我们想将一个对象的所有内容赋值给另外一个对象时,如果只是简单的用 “ = ”赋值,两个对象将共享一块内存,也就是说两个对象指向同一个内存块的引用,那么之后改变任何一个对象中的值,两个对象都会同步改变,这并不是我们想要的,因此,在对象赋值时我们需要进行深拷贝,对对象进行拷贝赋值,保证两个对象指向不同的内存块,这样才能保证对象的修改不会互相影响
未优化代码
深拷贝传统的写法需要对对象进行深度遍历,每个对象的 key 逐个赋值
function deepClone(obj) {
if (typeof obj != 'object') return obj;
var temp = Array.isArray(obj) ? [] : {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
if (obj[key] && typeof obj[key] == 'object') {
temp[key] = deepClone(obj[key])
} else {
temp[key] = obj[key];
}
}
}
return temp;
}
let info = {
name: 'yimwu',
tel: '134xxxxx320',
address: {
home: 'jy',
company: 'gz'
}
}
let infoCopy = deepClone(info)
复制代码
通过 JSON 方法优化
通过 JSON.parse 和 JSON.stringify 巧妙地将对象转化成字符串再进行解析,js 将重新赋值到新的内存块中,达到深拷贝的效果
let info = {
name: 'yimwu',
tel: '134xxxxx320',
address: {
home: 'jy',
company: 'gz'
}
}
let infoCopy = JSON.parse(JSON.stringify(info))
复制代码
写在最后
今天抽空就先写这么几点,后续继续补充其他相关的优化小Tip,欢迎各位评论区补充,指正!
博主接下来将持续更新好文,欢迎关注博主哟!!
如果文章对您有帮助麻烦亲点赞、收藏 + 关注和博主一起成长哟!!❤❤❤