你应该优化的JavaScript代码,以及前端工程师日常使用的小技巧。使之更加简洁,可读性更强,更易维护。
创始人
2024-05-29 08:12:36
0

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

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. 判断一个变量是否为nullundefined0falseNaN""

如果你想要判断一个变量是否为nullundefined0falseNaN”'',你就可以使用逻辑非(!)取反,来帮助我们来判断,而不用每一个值都用===来判断。

代码示例:

// 未优化前的代码
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.racerace就是“赛跑”。
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性能很差 ,他会迭代所有的私有和共有属性,原型链一级级查很耗性能。

未完待续,持续更新…

相关内容

热门资讯

安卓系统源码修改练习,从零开始... 亲爱的技术爱好者,你是否曾梦想过深入安卓系统的内核,亲手修改源码,让手机变得更加个性化?那就让我们一...
安卓考勤系统论文,基于安卓平台... 你有没有想过,每天打卡上班,是不是也能变得有趣起来呢?没错,就是那个我们每天都要面对的安卓考勤系统。...
安卓系统哪家流畅度,安卓系统流... 手机里的安卓系统,就像是每个人的小世界,各有各的风采。但说到流畅度,这可是大家最关心的问题了。今天,...
安卓开不了定位系统,安卓设备定... 最近是不是发现你的安卓手机定位系统突然罢工了?别急,别慌,今天就来给你详细解析一下这个问题,让你轻松...
安卓系统怎么设置airpod,... 你有没有发现,自从AirPods问世以来,它就成为了科技界的宠儿?这款无线耳机不仅音质出众,而且连接...
安卓系统王者荣耀链接,解锁全新... 你有没有发现,最近你的手机里是不是多了一个叫做“王者荣耀”的游戏?这款游戏可是现在年轻人圈子里的大热...
传统手机安卓系统版本,传统手机... 你有没有发现,手机更新换代的速度简直就像坐上了火箭呢?从功能单一的“大哥大”到如今智能化的“小能手”...
王者荣耀适合安卓系统,安卓系统... 你有没有发现,最近手机游戏界又掀起了一股热潮?没错,就是那款风靡全球的《王者荣耀》!这款游戏不仅在国...
安卓系统下载游戏太慢,安卓系统... 你是不是也遇到了这个问题?安卓系统下载游戏太慢,简直让人抓狂!别急,今天就来跟你聊聊这个让人头疼的小...
安卓 智能家居系统,安卓智能家... 你有没有发现,现在的生活越来越离不开手机了?而手机,又和家里的智能家居系统紧密相连。今天,就让我带你...
安卓系统怎么开启sir,安卓系... 你有没有想过,你的安卓手机里有个超级智能的助手——Siri?没错,就是那个在苹果手机上呼之即来的小助...
安卓最高系统等级排名,揭秘最高... 你有没有想过,你的安卓手机里那些看似普通的系统更新,其实背后隐藏着一场激烈的“等级”较量呢?没错,今...
安卓设置系统日期软件,享受智能... 手机里的日期总是不对劲?是不是觉得每次手动调整都麻烦死了?别急,今天就来给你支个招,让你轻松搞定安卓...
怎样降安卓手机系统,解锁性能与... 手机用久了,是不是觉得安卓系统越来越卡,运行速度大不如前?别急,今天就来教你怎么给安卓手机来个系统大...
安卓系统dialog的样式,A... 你有没有发现,在使用安卓手机的时候,那些弹出来的对话框(也就是我们常说的dialog)样式真是千变万...
安卓怎样和系统说话,与系统对话... 你有没有想过,你的安卓手机里那些冰冷的代码是怎么和你对话的呢?是不是觉得它们就像一群神秘的机器人,默...
凤凰安卓系统玩fgo,畅享高品... 亲爱的安卓用户们,你是否曾在某个午后,手握凤凰安卓系统,沉浸在那一片梦幻般的《Fate/Grand ...
安卓系统怎么设置休眠,轻松进入... 你有没有发现,手机用久了,有时候会变得有点“懒”,反应慢吞吞的,这时候,是不是很想给它来个“小憩”呢...
oppo安卓8系统更新,畅享智... 你有没有发现,你的OPPO手机最近好像变得不一样了?没错,就是那个安卓8系统更新!这可不是一个小小的...
安卓系统所有手机通用,揭秘所有... 你有没有发现,现在市面上各种各样的手机,品牌琳琅满目,让人挑花了眼?不过,不管你用的是哪个品牌的手机...