用javascript類轉換對象

Question

我正在轉換從API接收的數據。 前端需要顯示一些計算。

處理數據轉換的正確方法是什么？

• 我應該為要傳遞的對象定義一個屬性嗎？ 如果是這樣，為什么
• 這是使用setter和getter的好用例還是不必要？

---

const dogData = {
  dog_name: "filo",
  born_time: 1530983852,
  coat_color: "brown"
};

class Dog {
  constructor(data) {
    //do I need to set this.dog to the data object, what's the benefit of doing so?
    this.dog = data;

    this.name = this.dog.dog_name;
    // vs
    this.name = data.dog_name;

    //Should I use setters and getters?
    this.color = this.dog.coat_color;
    // vs
    this._color = this.dog.coat_color;

    this.age = this.calculateAge();
  }

  calculateAge() {
    return Date.now().getTime() - this.dog.born_time;
  }

  //Is this a good case where I  should using getters to access the properties or would that be superfluous?
  //should I be setting the properties with setters in this case?
  get color() {
    return this._color;
  }
}

const dog = new Dog(dogData)

Answer 1

您無需將數據復制到班級中。

您可以直接分配類字段（使用對象分解來提高可讀性）。

const data = {
  dog_name: 'filo',
  born_time: 1530983852,
  coat_color: 'brown'
}

class Dog {
  // Directly assign values
  constructor({ dog_name, born_time, coat_color }) {
    this.name = dog_name
    this.bornAt = born_time
    this.color = coat_color
  }

  // Getter for computed properties
  get age() {
    return Date.now() - this.bornAt
  }
}

const dog = new Dog(data)

僅對於計算的屬性（動態或格式化值）才需要使用吸氣劑。

好例子：

class Person {
  constructor({ firstname, lastname }) {
    this.firstname = firstname
    this.lastname = lastname
  }

  get fullname() {
    return `${this.firstname} ${this.lastname}`
  }
}

Answer 2

 class Dog { constructor(data) { const { dog_name: name, born_time: age, coat_color: color } = data; Object.assign(this, { name, age, color }); } } const dogData = { dog_name: "filo", born_time: 1530983852, coat_color: "brown" }; const dog = new Dog(dogData); console.log(dog.name); 

Answer 3

問 ：

盡管如此，我是否應該拋出一種可能的只讀方法？ –彼得·塞利格（Peter Seliger）

答 ：

不會疼的 我贊賞不同的方法。 –馬修·莫蘭（Matthew Moran）

... 開始了 ...

 // module start ... eg file: "Dog.js" // locally scoped helper function function calculateAge(dateOfBirth) { return (Date.now() - dateOfBirth); } /*export default */class Dog { constructor(initialValue) { Object.defineProperties(this, { valueOf: { // just in order to hint what `initialValue` might still be good for. value: function () { return Object.assign({}, initialValue); } }, name: { value: initialValue.dog_name, enumerable: true }, color: { value: initialValue.coat_color, enumerable: true }, age: { get() { return calculateAge(initialValue.born_time); }, enumerable: true, } }); } } // module end. // test const dogData = { dog_name: "filo", born_time: 1530983852, coat_color: "brown" }; const dog = new Dog(dogData); console.log('Object.keys(dog) : ', Object.keys(dog)); console.log('dog.valueOf() : ', dog.valueOf()); console.log('dog.age : ', dog.age); console.log('dog.name : ', dog.name); console.log('dog.color : ', dog.color); console.log('(dog.age = 298146912) : ', (dog.age = 298146912) && dog.age); console.log('(dog.name = "spot") : ', (dog.name = "spot") && dog.name); console.log('(dog.color = "black") : ', (dog.color = "black") && dog.color); 

 .as-console-wrapper { max-height: 100%!important; top: 0; }