大佬代码中的js，来看看你会几种

持续更新哟~~

此文档只适合闲着的时候阅读，或者略读一遍，收藏起来用到再来细读。这几天刚好没事，打算研究一下我们公司大佬的代码，看看大佬的过人之处。

涉及Vue3、element-plus、vant4

1.根据接口返回的Status值来匹配statusMap中值对应的文字

 <div>{{ statusMap.get(item.status) }}</div>

const statusMap = new Map([
    [-2, "驳回（客户存在异议）"],
    [-1, "作废"],
    [0, "待客户上传增值税发票"],
    [1, "待客户确认"],
    [2, "待打款"],
    [3, "打款完成"],
])

和以下渲染效果是一样的

<div v-for="(i,index) in dictStore.settlementStatusList" :key="index">
	<span v-show="item.status === i.code">{{i.name}}</span>
</div>
        

2.将一个字符串转为数组

项目中经常用到传递一个数组给后端，获取到的数据是一个id字符串

let id = '0235265-djb5445-c244-cd4'

console.log([id]);   //[id] = ['0235265-djb5445-c244-cd4']

以上是大佬写的，然而我写的是这样的。

let id = '0235265-djb5445-c244-cd4'

let ids = []
ids.push(id)

console.log(ids)  //ids = ['0235265-djb5445-c244-cd4']

3. 可以直接在页面使用props接收的对象

const props = defineProps({
    item: {
        type: Object,
        required: true,
    }
})

<!-- 粘贴一段代码，自行体会 -->
<!-- 可以直接在页面上用 item.什么什么 太棒了，我之前都是定义一个值，在赋值给它 -->
<div>
     <div>订单编号：{{ item.settlementCode }}</div>
     <div v-for="(i,index) in dictStore.settlementStatusList" :key="index">
           <span v-if="item.status == i.code">{{i.name}}</span>
      </div>
</div>

4.判断的时候一个字段可以有多个值

if (  data.isReview && ([1, 2, 4].includes(data.isReview))  ) {
	//翻译：有data.isReview值  并且 这个值等于1 或者等于2 或者等于4 
}

想想就很高级，自己都是

  data.isReview === 1 || data.isReview === 2 || data.isReview === 3

5.在方法上传多个值

<!-- 用对象包裹的形式，在方法里面传值。 -->

<div title="点击查看" @click="toRouter({name: 'reportInfo'},{reportStatus:'4'})">
<div title="点击查看" @click="toRouter({name: 'reportInfo'},{reportStatus:'15'})">
<div title="点击查看" @click="toRouter({name: 'reportInfo'})">
<div title="点击查看" @click="toRouter({name: 'reportInfo'})"> 

小插曲：网页设计,div中title的作用是
title是标签的一个属性,用于对标签进行注释,当鼠标经过时会显示出来该属性的值。
如下图:

6.获取当前日期

function getCurrentYearMonth() {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1; // 月份需要加1因为getMonth()返回0-11
    const day = now.getDate() ;
    return `${year}/${month.toString().padStart(2, '0')}/${day}`; // 格式化为YYYY/MM格式，月份补零
}
console.log(getCurrentYearMonth()); // 输出例如 "2024/05/24"