約束の中でオブジェクトの値を適切に設定するにはどうしたらいいですか？

Question

は、だから私は、このオブジェクト持っている：

let user = { 
    name: null, 
    age: null, 
    sex: null, 
    created_at: null 
} 

を、私はどのような約束が戻るに基づいて値を設定したいです。返されるデータのプロパティ名は同じです。

だから約束はこれです：

promise.get(/*url*/).then(res => { 
    const data = res.data; 
    // set values here 
}) 

I持つプロパティの値を設定することで、私の心の中に三つの方法今：最高/適切な方法である

// First 
user = data 

// Second 
user = { 
    name: data.name, 
    age: data.age, 
    sex: data.sex, 
    created_at: data.created_at 
} 

// Third 
Object.assign(user, data); 

？そして、もう一方の利点は何ですか？ 私は現在第3のオプションを使用しています。どんな助けでも大歓迎です。

Answer 1

のためのより多くのここまで読んで

私は「私はまた、拡散演算子でそれを表示しようとしていたが、私のREPLは明らかにdoesnのObject.assign()

const user = { 
 
     name: 'Ronald Mickdonlad', 
 
     age: null, 
 
     sex: 'no thanks', 
 
     created_at: null 
 
    } 
 
    
 
    const res = { 
 
     data: { 
 
     name: 'Garbo Hamburgler', 
 
     age: 1337, 
 
     sex: '0%', 
 
     created_at: 133713371337 
 
    } 
 
    } 
 
    
 
    //fake DB call 
 
    console.log(Object.assign({}, user, res.data))

が好きそれを持っているので、私はあきらめた。あなたはバベルが必要になり、

return { 
    ...user, 
    ...res.data 
} 

をしかし：https://babeljs.io/docs/plugins/transform-object-rest-spread/

それは不変であるので、私は他の方法以上の方の両方を好むこれも動作するはず

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

：こちらを参照してください。変数を再割り当てしていません。あなたはいったん割り当てられた読み取り専用をして、次に行くごとに新しいオブジェクトを作成します。

Object.assign()とスプレッド演算子のどちらも右から左への優先順位があります。したがって、「一番新しい一番右の」値は「古い別の左発生」の値を上書きします。

これで行く：ここ

const user = { 
    name: null, 
    age: null, 
    sex: null, 
    created_at: null 
} 

// if inside an async function 
const updatedUserObj = await promise 
    .get(/*url*/) 
    .then(res => Object.assign({}, user, res.data)) 

console.log(updatedUserObj) 

は、さらにあなたにObject.assign()を表示するカップルより多くの例です：

const user = { 
 
    name: null, 
 
    age: null, 
 
    sex: null, 
 
    created_at: null 
 
} 
 

 
const someObject = { 
 
    coffee: { 
 
    good: true, 
 
    flavour: 'ultra', 
 
    shouldDrink: true, 
 
    age: 1337 
 
    } 
 
} 
 

 
// Notice how coffee is the property on the object we just created: 
 
console.log('FIRST EXAMPLE', JSON.stringify(Object.assign({}, someObject), null, 2)) 
 

 
// Notice how someObject is the property on the new object and coffee is its property 
 
console.log('SECOND EXAMPLE', JSON.stringify(Object.assign({}, { someObject }), null, 2)) 
 

 
// Now, watch what happens if we begin overwriting: 
 
console.log('THIRD EXAMPLE', JSON.stringify(Object.assign({}, user, someObject), null, 2)) 
 

 
console.log('FOURTH EXAMPLE', JSON.stringify(Object.assign({}, { user, someObject }), null, 2)) 
 

 
console.log('FIFTH EXAMPLE', JSON.stringify(Object.assign({}, user, { someObject }), null, 2)) 
 

 
console.log('SIXTH EXAMPLE', JSON.stringify(Object.assign({}, { user }, someObject), null, 2))

Answer 2

オプション3が最適です。 Object.assign()の例では、ファクトリ関数を使用してuserの新しいインスタンスを作成しています。これの利点は、新しいuserインスタンスを作成するときに、userのコンストラクタを呼び出さなくてもよいことです。あなたも使用できますObject.create()

これはObject Orientated Programmingの基本的な例です。より良く理解https://www.sitepoint.com/object-oriented-javascript-deep-dive-es6-classes/