技术文章
关于代码的优雅写法的一点思考——js、vue
一、 代码优化-减少代码冗余
getState(status) {
switch (status) {
case 1:
return "整改中";
case 2:
return "已整改";
case 3:
return "进行中";
case 4:
return "已解除";
case 5:
return "持续存在";
}
}, getState(status) {
const table ={1:'整改中',2:'已整改',3:'进行中',4:'已解除',5:'持续存在'};
return table[status];
}, getComtentName(arg) {
/**if (arg == 1) {
return "评论";
}
if (arg == 2) {
return "督办";
}
if (arg == 3) {
return "处置日志";
}
if (arg == 4) {
return "编辑";
}*/
const nameInfo={1:'评论',2:'督办',3:'处置日志',4:'编辑'};
return nameInfo[arg];
},二、css划过效果
css代码
.edit {
background-image: url(~@images/edit.png);
}
.edit:hover {
background-image: url(~@images/edit-hover.png);
}
template里面
<span
v-if="ele.submitState !== 1"
@click="goDetail(ele.id, 'edit')"
title="编辑"
class="handle edit"
></span><img :src="sysNot" title="系统通知" alt="系统通知" @mouseover="sysNot = sysNotOld" @mouseout="sysNot = sysNot1"
@click="changeSys" />
下面是script的data中定义
sysNot: "/static/img/msg.png",
sysNot1: "/static/img/msg.png",
sysNotOld: "/static/img/msg-hover.png", <img :src="checkedUser" title="切换账号" alt="切换账号" @mouseover="$event.currentTarget.src=checkedUserHover" @mouseout="$event.currentTarget.src=checkedUser"
@click="changeSys" />三、判断当前数组是否有重复的值
// 判断是否有重复
const beginLength = repeatJudge.length;
const endLength = Array.from(new Set(repeatJudge)).length;
if (beginLength != endLength) {
return this.$message.warning("审批流程的审批人员选择重复");
}四、引入图片时减少代码冗余
原代码
<img
v-if="item.approveState == 2"
class="state"
src="@/images/rejected.png"
alt=""
/>
<img
v-if="item.approveState == 1"
class="state"
src="@/images/pass.png"
alt=""
/>
<img
v-if="item.approveState == 3"
class="state"
src="@/images/canceled.png"
alt=""
/>改进后
<img
class="statusImg"
:src="approveStateList[pageInfo.approveState]"
alt=""
/>
data(){return{approveStateList: {
2: require("@/images/rejected.png"),
1: require("@/images/pass.png"),
3: require("@/images/canceled.png")
}}},
五、使用es6新增方法遍历对象
遍历普通对象var obj = {1:1,2:2};
使用for in
for(var key in obj){
console.log(key);//输出的是对象的key而不是下标
}六、对比两个包含对象的数组是否相同
对比两个数组是否相同
var arr1 =[1,5,4,8,0,{q:''},3,5,1,{c:''}];
var arr2 =[{q:''},3,5,1,1,5,4,8,0,{c:''},123456789];
console.log(JSON.stringify(arr1.sort())==JSON.stringify(arr2.sort()))七、遍历数组里的对象
遍历数组里的对象
let arr =[{1:1},{1:2}];
for( var item of arr) {
console.log(item,item[1])//{1:1},1
}八、watch监听使用场景
场景：
当从列表页点进详情，我们看到详情页调了接口，却发现详情页的子组件渲染出现问题，调查发现父传子先于调接口，子组件获取到个空对象，直接判断出现了问题。
怎么解决呢，设置定时器延时调用子组件的判断？不不不，网速不好的时候这招不好使。
子组件再调一遍详情接口？没必要
使用watch监听就行
vue2的watch监听用法
watch:{
'detail':{// 引号加不加都无所谓，detail监听的是data或props里命名的值
immediate: true,//初次获取到值就执行
deep: true,// 深度监听对象
handler(){ //执行我们想要的操作
this.powerCN = this.judgeType();
}
}
},九、关于空值合并运算符??的使用场景
一直都感觉||比??实用的多，当值为0、false、''时都能走到后面，直到有一天发现判断一些id是否存在的时候，当id或status为0，直接被||略过，而0??1比0||1好就好在，??判定前面的值为null或undefined时才往后走 。
十、可选链操作符
可选链操作符用着是真的爽，但我接受的一个vue-cli2搭建的老项目竟然没法用这个，我觉得是babel解析的插件可能有问题，一调查果然是，建议上网上搜一下，安装一个插件配置一下就能用了。
事实上现在大部分的vue2、vue3项目在不用我们单独配置的情况下就已经可以使用可选链操作符了。
减少了代码冗余，最近发现甚至可以判断对象是否存在然后再调用；
十一、es9新增
1. 异步迭代
await可以和for...of循环一起使用，以串行的方式运行异步操作
async function process(array) {
for await (let i of array) {
// doSomething(i);
}}2. Array.flat()和Array.flatMap()
flat()
[1, 2, [3, 4]].flat(Infinity); // [1, 2, 3, 4]
flatMap()
[1, 2, 3, 4].flatMap(a => [a**2]); // [1, 4, 9, 16]3. 逻辑运算符和赋值表达式
逻辑运算符和赋值表达式，新特性结合了逻辑运算符（&&，||，??）和赋值表达式而JavaScript已存在的 复合赋值运算符有：
a ||= b
//等价于
a = a || (a = b)
a &&= b
//等价于
a = a && (a = b)
a ??= b
//等价于
a = a ?? (a = b)
4. 数字分隔符
数字分隔符，可以在数字之间创建可视化分隔符，通过_下划线来分割数字，使数字更具可读性
const money = 1_000_000_000;
//等价于
const money = 1000000000;
1_000_000_000 === 1000000000; // true5. Object.assign方法（对象合并）
//Object.assign 静态方法 提取对象所有的属性及方法,方法合并为一个对象 返回一个新对象
var newObj = Object.assign({a:'a'},{b:'b'},{c:'c'})
console.log(newObj); //返回值为 {a:'a',b:'b',c:'c'}6.扩展运算符(…)
用于取出参数对象所有可遍历属性然后拷贝到当前对象
// 1、拷贝对象（深拷贝）
let p1 = { name: "Amy", age: 15 }
let someone = { ...p1 }
console.log(someone) //{name: "Amy", age: 15}十二、template模版直接循环遍历对象
<div v-for="item,key,index in test" :key='key'><span>{{key}}</span></div>
test:{
"2023-06-29": [
{
"id": 60162,
"hintId": "542473209950375956",
"createTime": "2023-06-29T06:07:35.000+0000",
"commentName": "河北省人力资源部操作员",
"orgId": "212942",
"orgName": "中国人寿河北省分公司",
"deptId": "90176",
"deptName": "人力资源部",
"content": "河北省人力资源督办",
"commentType": 2
}
]
}也可以通过Object.entries(this.coverList)转换后去循环遍历
版权声明：
本文为[JianZhen✓]所创，转载请带上原文链接，感谢
https://blog.csdn.net/aZHANGJIANZHENa/article/details/130981422
