コードのエレガントな書き方についての考え - js、vue

1. コードの最適化 - コードの冗長性を削減します。

 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];
    },

2、エフェクト全体の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" />

3. 現在の配列に重複した値があるかどうかを確認します。

 // 判断是否有重复
      const beginLength = repeatJudge.length;
      const endLength = Array.from(new Set(repeatJudge)).length;
      if (beginLength != endLength) {
        return this.$message.warning("审批流程的审批人员选择重复");
      }

4. 画像を導入する際のコードの冗長性を減らす

オリジナルコード

   <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")
      }}},

5. es6 の新しいメソッドを使用してオブジェクトを走査します

遍历普通对象var obj = {1:1,2:2};

使用for in 

for(var key in  obj){ 

console.log(key);//输出的是对象的key而不是下标

}

6. オブジェクトを含む 2 つの配列が同じかどうかを比較します

对比两个数组是否相同

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()))

7、配列内のオブジェクトを走査します

遍历数组里的对象

let arr =[{1:1},{1:2}];

for( var item of arr) {

console.log(item,item[1])//{1:1},1

}

8、監視の使用シナリオを監視する

シーン:

一覧ページから詳細をクリックすると、詳細ページではインターフェースが調整されていることが分かりましたが、詳細ページでのサブコンポーネントの描画に問題があることが判明し、調査の結果、親から子への引き渡しが判明しました。インターフェイスが調整される前に、サブコンポーネントが空のオブジェクトを取得したため、何かが起こったと直接判断しました。

解決するにはタイマーを設定してサブコンポーネントの呼び出し判定を遅らせるか？いやいや、インターネットの速度が悪い場合、この裏技は機能しません。

サブコンポーネントは詳細なインターフェイスを再度調整しますか? 必要なし

時計を使って監視するだけです

vue2的watch监听用法

  watch:{

    'detail':{// 引号加不加都无所谓，detail监听的是data或props里命名的值

      immediate: true,//初次获取到值就执行

      deep: true,// 深度监听对象

      handler(){ //执行我们想要的操作

this.powerCN = this.judgeType();

      }

    }

  },

九、null値合体演算子の使用シナリオについて??

|| は ?? よりも実用的だといつも感じています。値が 0、false、'' の場合、最後に移動できます。ある日、ID またはステータスが 0 の場合、何らかの ID が存在するかどうかが判明するまで、 | |Skip によって直接使用され、0??1 は 0||1 よりも優れており、前の値が null または未定義であると判断した場合にのみ後戻りします。

10.オプションの連鎖演算子

オプションのチェーンオペレーターを使用するのは非常に便利ですが、私が受け入れた 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}

12. テンプレートテンプレートはオブジェクトを直接ループします。


    <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) をループすることもできます