Question

我一直在尝试从Object.assign中的父作业中分配嵌套在对象中的许多值。我按照我想要的方式工作。但是，我不知道它是如何或为什么起作用。为什么在第二个Object.assign评估它之前需要计算样式？

＆＃13;

var cards = Object.assign(card=document.createElement('div'),style=card.style, {
id:'cards',
innerHTML:'hello world',
  [style]:[Object.assign(style,{
    width:"300px",
    margin:'auto',
    color:'green',
    height:'300px',
  })]
  });
  
var body=  document.querySelector('body');
  body.appendChild(cards);

＆＃13;

Answer 1

该代码不能满足您的需求，并且不会像您认为的那样工作。请注意，您是accidentally introducing global variables，并且您的计算属性键将是无用且未使用的"[object CSSStyleDeclaration]"。它确实具有所需的效果，因为Object.assign(style, …)已被评估，但在嵌套对象中执行它没有任何影响。

你应该写

var card = document.createElement('div');
Object.assign(card, {
    id:'cards',
    innerHTML:'hello world'
});
var style = card.style;
Object.assign(style, {
    width:"300px",
    margin:'auto',
    color:'green',
    height:'300px',
});

var body = document.querySelector('body');
body.appendChild(cards); // probably not necessary, cards already is part of the document

或甚至可能更简单

var card = document.createElement('div');
card.id = 'cards';
card.innerHTML = 'hello world';
var style = card.style;
style.width = "300px";
style.margin = 'auto';
style.color = 'green';
style.height = '300px';

当我们去除Object.assign时，看看你做错了什么也许有帮助。您的代码等同于

_temp1 = card=document.createElement('div'); // global variable!
_temp2 = style=card.style; // global variable!
_temp3 = {
    id:'cards',
    innerHTML:'hello world'
};
_temp4 = style;
_temp5 = {
    width:"300px",
    margin:'auto',
    color:'green',
    height:'300px',
};
for (p in _temp5) // the Object.assign(style, {…})
    _temp4[p] = _temp5[p];

_temp3[String(style)] = [_temp4]; // WTF

for (p in _temp2) // the first part of Object.assign(card, style, …)
    _temp1[p] = _temp2[p]; // WTF
for (p in _temp3) // the second part of Object.assign(card, …, {…})
    _temp1[p] = _temp3[p];

var cards = _temp1;

var body = document.querySelector('body');
body.appendChild(cards);

从Object.assign中的父作业中分配嵌套在对象中的许多值

1 个答案: