关于代码的优雅写法的一点思考——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; // true

5. 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)转换后去循环遍历