Vue 筆記 - 【實作】不更動原始資料僅顯示需求條件

本次需求是修改顯示方式，但不要更動到資料架構。先提一個開發很重要的觀念，在開發專案時，假設要呈現的跟原始資料有不同的時候，基本上是「不要動到原始資料」，可以使用 map() 方法去重整資料樣式，原始資料記得要 clonedeep()。

實際需求

這次專案使用 Vue.js 開發在後端送來的資料不變動的狀態下，透過前端去判斷掉其中物件的屬性，然後讓前端的畫面強迫不顯示原本有呈現但卻不呈現的元素。這樣講有點饒口，下圖為範例：

原本後端資料會呈現的

前端修改後呈現的畫面

刪除物件的方法

刪除操作符

使用 delete 刪除屬性，這是基本都知道的方法：

var person = { name: "Tim", age: 23, sex: "Male" };

delete person.age;
console.log(person);

/*
    輸出: { name: 'Tim', sex: 'Male' }
*/

使用解構賦值 Spread 展開

使用 …rest 告訴物件要刪除哪個屬性，

var person = { name: "Tim", age: 23, sex: "Male" };

const { age, ...rest } = person;
console.log(rest);

/*
    輸出: { name: 'Tim', sex: 'Male' }
*/

使用 loadash 的 omit 方法

omit 會濾掉物件中的屬性。

var _ = require("underscore");

var person = { name: "Tim", age: 23, sex: "Male" };

person = _.omit(person, "age");
console.log(person);

/*
    輸出: { name: 'Tim', sex: 'Male' }
*/

以上方法，就是刪除物件屬性的常用方法。

但是!!

這些都還是會變更到原始資料的資料結構，未來如果要排查錯誤就會很困難。

實作範例

假設這是原始資料：

arrList: [
      {
        level: 'A',
        ticketName: 'A1TICKET',
        price: {
          corporate: {
            code: 'promot',
            dollar: 100,
          },
        },
        title: 'TITLE',
        description:
          'This fake description This fake description This fake description This fake description This fake description This fake description',
        buttonText: 'CLICK',
      },
      {
        level: 'A',
        ticketName: 'A2TICKET',
        price: {
          corporate: {
            code: 'promot',
            dollar: 200,
          },
        },
        title: 'TITLE',
        description:
          'This fake description This fake description This fake description This fake description This fake description This fake description',
        buttonText: 'CLICK',
      },
      {
        level: 'A',
        ticketName: 'A3TICKET',
        price: {
          corporate: {
            dollar: 300,
          },
        },
        title: 'TITLE',
        description:
          'This fake description This fake description This fake description This fake description This fake description This fake description',
        buttonText: 'CLICK',
      },
      {
        level: 'A',
        ticketName: 'A4TICKET',
        price: {
          corporate: {
            dollar: 400,
          },
        },
        title: 'TITLE',
        description:
          'This fake description This fake description This fake description This fake description This fake description This fake description',
        buttonText: 'CLICK',
      },
    ],

想要的需求是隱藏 A2 的 badge，就算它的 corporate 中有傳 code 的屬性，邏輯寫在這裡：

下方為前人的邏輯。

hasCorporate(option){
      return (option) => {
       return this.invalidMode //專案中有個先行判斷結果為 false
         ? false
         : (option.ticketName.substring(0, 2) === 'A3' &&
             !!option.price.corporate.code) ||
             (option.ticketName.substring(0, 2) === 'A4' &&
               !!option.price.corporate.code)
     };
}

• 使用 hasCorporate 方法將迴圈的物件傳入方法，並做操作。
• 因為有先行判斷的條件為 false，所以在三元運算子這邊原本的 false 值為 true，後面的才是真正的 false。
• 將物件中透過 substring 的方法取得 ticketName 前兩個字符要等於有 A3 跟 A4 的內容，並且還要比對物件資料中有 code 有值。
• 符合以上條件才能正確顯示 badge。

但這樣寫很醜，又不是很好閱讀，透過 ChatGPT 的建議，在調整成實際需求的寫法，非常快速外，可讀性也比較高：

hasCorporate(option) {
   const ticketName = option.ticketName.substring(0, 2);
    const hasInvalidName = ['A2', 'A4'].includes(ticketName);
    const hasCorporate = !!option.price.corporate.code;
    const corporateResult = hasCorporate && !hasInvalidName;
    return this.showCorporateIcon ? corporateResult : hasCorporate;
  },

• 先用 substring 取得 ticketName 前兩個字符。
• 使用陣列的 includes 方法，若有 A2 跟 A4 的話就為 true，代表有找到不要顯示的值。
• 並且將兩個判斷結果用 corporateResult 存起來。
• 最後用三元運算子去 return 想要的結果，就是隱藏有 A2 的中有 corporate.code 的話，就不要顯示。
• 透過每一個步驟先拆開後重組，看起來更清楚也更易讀。

DEMO:連結

參考資料

• 從 JavaScript 中的對像中刪除屬性