什麼是傳入數據和導出對象的最佳方式？

Question

這裏是JSON對象，我有：

const json = { 
     "itemDetails": itemsArray, 
     "paymentDetails": [{ 
      "billingAddress": { 
       "address": { 
        "address1": billingAddress.address1, 
        "address2": billingAddress.address2, 
        "zipCode": billingCityStateZip.zipCode, 
        "city": billingCityStateZip.city, 
        "type": "US", 
        "addressType": billingAddress.addressType, 
        "stateCode": billingCityStateZip.stateCode, 
        "country": "US" 
       }, 
       "contactInfo": { 
        "dayPhoneNumber": billingPhone, 
        "companyName": billingAddress.companyName 
       }, 
       "personalInfo": { 
        "firstName": billingAddress.firstName, 
        "lastName": billingAddress.firstName 
       } 
      }, 
      "cardType": paymentDetails.cctype, 
      "cardNumber": paymentDetails.ccnumber, 
      "expirationMonth": paymentDetails.ccmonth, 
      "expirationYear": paymentDetails.ccyear, 
      "cvv": paymentDetails.cvv, 
      "type": "creditCard" 
     }], 
     "shippingDetails": [{ 
      "shippingAddress": { 
       "address": { 
        "address1": shippingAddress.address1, 
        "address2": shippingAddress.address2, 
        "zipCode": shippingCityStateZip.zipCode, 
        "city": shippingCityStateZip.city, 
        "type": "US", 
        "addressType": shippingAddress.addressType, 
        "stateCode": shippingCityStateZip.stateCode, 
        "country": "US" 
       }, 
       "contactInfo": { 
        "email": email.emailAddress, 
        "dayPhoneNumber": shippingPhone, 
        "companyName": shippingAddress.companyName 
       }, 
       "personalInfo": { 
        "firstName": shippingAddress.firstName, 
        "lastName": shippingAddress.lastName 
       } 
      }, 
      "unlimitedDetails": { 
       "unlimitedFlag": "", 
       "unlimitedSKU": "", 
       "unlimiteProductId": "" 
      }, 
      "shippingLabelMessages": { 
       "labelMessage1": "", 
       "labelMessage2": "", 
       "labelMessage3": "", 
       "labelMessage4": "" 
      }, 
      "itemDetails": itemsArray, 
      "type": "hardGoodShippingType" 
     }], 
     "couponDetails": [], 
     "userDetails": { 
      "userCheckoutPreferences": { 
       "payViaPaypal": "false", 
       "payByVouchersOnly": "false" 
      }, 
      "userDateOfBirth": { 
       "day": dob.dobDay, 
       "month": dob.dobMonth, 
       "year": dob.dobYear 
      }, 
      "password": "", 
      "emailFlag": "false", 
      "userBusinessPartner": { 
       "businessPartner": null, 
       "businessPartnerNumber": null 
      } 
     }, 
     "offerDetails":{ 
      "responseCode":responseCode 
     }, 
     "webRedirectDetails": { 
     } 
    } 
    return json; 

我會被傳遞數據到這個通過反應，終極版道具，而是尋找最effiencient的方式來創造的對象。

我一直在尋找創建ES6類並返回JSON後格式化到正確的結構。我收到的數據與我需要提交給API的格式不同。

我寫了這個類，這似乎工作 - 但不知道它是否是最好的方法呢？

class AddressObject { 
    constructor(object) { 

    // Create Address 
    this.address = {}; 
    this.address.address1 = object.address1; 
    this.address.address2 = object.address2; 
    this.address.zipCode = object.zipCode; 
    this.address.city = object.city; 
    this.address.state = object.state; 
    this.address.type = object.type; 
    this.address.addressType = object.addressType; 
    this.address.country = object.country; 

    // Create contactInfo 
    this.contactInfo = {}; 
    this.contactInfo.dayPhoneNumber = object.dayPhoneNumber; 
    this.contactInfo.companyName = object.companyName; 

    // Create personalInfo 
    this.personalInfo = {}; 
    this.personalInfo.firstName = object.firstName; 
    this.personalInfo.lastName = object.lastName; 
    } 

    getAddress() { 
    return this 
    } 

} 

請幫忙！

Answer 1

ES6功能組合destructuring assignment和shorthand property assignment可以簡化格式化您的對象。

您可以從參數開始解構，甚至可以重命名變量並添加默認值。

所以對於看起來像這樣的輸入對象...

{ 
    address_1: 'my address line 1', 
    address_2: 'my address line 2', 
    city: '...', 
    contact: { 
    firstName: 'John', 
    lastName: 'Smith', 
    phone: '1234' 
    } 
} 

而不是寫你的函數類似這樣的

function formatData(data) { 
    return { 
     address1: data.address_1, 
     ... 
    } 
} 

你可以寫你的函數是這樣的...

function formatData({ 
    address_1: address1, 
    address_2: address2 = '', 
    city, 
    zipCode, 
    state, 
    contact: { 
     firstName, 
     lastName, 
     phone: dayPhoneNumber 
    } 
}) { 
    return { 
     addressData: { 
      address1, 
      address2, 
      city, 
      zipCode, 
      state 
     }, 
     contactInfo: { 
     companyName, 
     dayPhoneNumber 
     } 
    } 
} 

返回值使用賦值的簡寫符號...

你不必做

{ 
    address1: address1, 
    address2: address2 
    ... 
} 

Answer 2

功能肯定比一個類更好，正如評論中提到的那樣。另外，如果你的問題是這樣做的最ES6的方法是什麼（如，最緊湊和乾淨的），那麼我建議充分利用的結構破壞特性：

function formatDataForAPI(data) { 
    const { 
    address1, 
    address2, 
    zipCode, 
    city, 
    state, 
    type, 
    addressType, 
    country, 
    dayPhoneNumber, 
    companyName, 
    firstName, 
    lastName, 
    } = data; 

    return { 
    addressData: { 
     address1, 
     address2, 
     zipCode, 
     city, 
     state, 
     type, 
     addressType, 
     country, 
    }, 
    contactInfo: { 
     dayPhoneNumber, 
     companyName, 
    }, 
    personalInfo: { 
     firstName, 
     lastName, 
    }, 
    }; 
} 

當然你的方式效果一樣好。這比班級重量輕，眼睛更輕鬆。請注意，它只適用於您的密鑰的名稱相同，但如果不是，可以輕鬆更改。