本文摘自PHP中文网,作者coldplay.xixi,侵删。
这篇文章主要是想和大家一起学习一下,工作之中有哪些让我们眼前一亮的JavaScript代码简洁小技巧。
注意:下面的代码对比没有绝对的正确和错误,有些写法的使用场景会比较单一,根据大家的习惯和喜好判断即可,如果有更好或不同意见欢迎留言交流哦~
(免费学习推荐:javascript视频教程)
1. 短路操作:
当我们遇到这样的情况的时候,你会是
1 | const res1 = item.a ? item.a : item.b
|
还是利用js逻辑运算来实现呢?
1 | const res1 = item.a || item.b; const res1 = item.a && item.b;
|
2. 通过条件判断给变量赋值布尔值的正确姿势:
当我们需要比较单一的值来获取结果的时候,利用直接的运算,要不if判断要简洁的多~
1 2 3 | let res; if (a === '余光' ){
res = true } else {
res = false;}
|
3. 在if中判断数组长度不为零的正确姿势:
场景:如果数组内存在元素,则进行操作:
以此类推,当我们需要判断数组的长度为为空时:
4. 使用includes简化if判断:
场景:如果参数等于1、2、3、4,就进行下一步操作
写第一版代码:
1 2 | if (a === 1 || a === 2 || a === 3 || a ===4){
|
看完感觉异常的头疼,遂修改为:
1 2 | if ([1,2,3,4].includes(a)){
|
5. 使用some判断是否存在符合条件的值:
场景:寻找是否存在价格小于n的商品
1 2 3 4 5 6 7 8 9 10 | const itemList = [
{name: '手机' , price: 1000},
{name: '手机壳' , price: 10},
{name: '帽子' , price: 50},] function checkData(n){
for (let i = 0; i < item.length; i++){
if (item.price < n){
return true;
}
}
return false;}
|
方法写完了,但既然js为我们提供了那么多数组的方法,用起来:
1 2 3 4 | const itemList = [
{name: '手机' , price: 1000},
{name: '手机壳' , price: 10},
{name: '帽子' , price: 50},] const checkData = (n) => itemList.some(item => item.price < n)
|
再次优化
1 | const checkData = (n, itemList) => itemList.some(item => item.price < n)
|
6. 使用filter方法过滤原数组,形成新数组
情景:剔除某些不需要的元素,例如每一条数据的id是之后操作的必须数据,为了剔除缺陷数据,我们会这么做:
1 2 3 4 5 6 7 | const data = [
{ name: '手机' , price: 1000, id: 1 },
{ name: '手机壳' , price: 10, id: 2 },
{ name: '帽子' , price: 50, id: '' },]
if (data.id) {
newArr.push(arr[i])
}}
|
掌握“过滤”思想,我们这样处理:
1 | const afterData = data.filter(item => item.id);
|
7. 使用map对数组内的元素进行批量处理:
情景:在涉及到价格的交互中,我们拿到的价格字段通常是以分为单位的,我们要怎么做展示呢?
1 | const data = [10000, 20000, 980000] const afterData = data.map(price => price / 100)
|
8. 解构数组进行变量值的替换
情景:需要将两个值进行交换
1 2 3 4 5 | b = 2let temp = a
a = b
b = temp
b = 2[b, a] = [a, b]
|
9. 解构融到代码中:
情景:获取对象中的某个元素,并设置默认值
写第一版代码:
1 2 3 4 5 | this.name = person.name this.age = person.age
}
this.name = name this.age = age
}
|
10. 多个方法合体时都能做什么?(举例一)
这是最后一条代码简洁思路,拿一个具体的场景距离,抛砖引玉,欢迎大家在评论区留言~
场景:
前端拿到的数据是
1 2 3 4 5 6 | data = [
{ id: 1, name: '一级标题-1' },
{ id: 2, name: '一级标题-2' },
{ id: 3, name: '二级标题-1' , pid: 1 },
{ id: 3, name: '一级标题-3' },
{ id: 3, name: '二级标题-2' , pid: 2 },]
|
我们需要形成及联关系,如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | needData = [
{
id: 1,
name: '一级标题-1' ,
children: [
{ id: 3, name: '二级标题-1' , pid: 1 }
]
},
{
id: 2,
name: '一级标题-2' ,
children: [
{ id: 5, name: '二级标题-2' , pid: 2 }
]
},
{ id: 4, name: '一级标题-3' },]
|
于是我借助数组提供的多个api:
1 2 3 4 5 6 7 8 9 10 | newList = data.reduce((result, item, _, arr) => {
if (!item.pid) {
return [...result, item];
}
const parentItem = arr.find(({ id }) => id === item.pid);
if (parentItem) {
const { children = [] } = parentItem;
parentItem.children = [...children, item];
}
return result;}, []);
|
思路:
- 寻找存在父级的元素
- 将它发到正确的位置上
- 返回所有没有父级字段(pid)的数据
如果大家有更多类似的思路和操作请一定要留言哦
相关免费学习推荐:javascript(视频)
以上就是JavaScript的代码简洁技巧的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript主要由哪些部分组成
如何获取微信小程序登录的session?(详细)
javascript中substr()和substring()之间的区别是什么?
javascript专题之八:数组扁平化
javascript是一种运行在什么语言
javascript如何添加节点
学习在 javascript 中正确处理变量
javascript怎么实现页面跳转
javascript中的splice()的正确使用
如何使用插件数字滚动插件numberanimate.js?
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » JavaScript的代码简洁技巧