Question

HTMLelement是一个对象。风格也是一个对象。那么为什么这段代码不起作用呢？没有解构，一切都运行正常，所以这不是一个大问题，我只是想知道原因。

＆＃13;

div{
  width: 300px;
  height: 150px;
  color: blue;
  background: red;
}

＆＃13;

<div onClick = "changeColor()">
  <p>Example</p>
</div>

＆＃13;

ChromeOptions options = new ChromeOptions();
        ...
        options.addArguments("--no-sandbox");
        options.addArguments("--disable-dev-shm-usage");

＆＃13;

Answer 1

解构只会创建新的局部变量，这意味着

let {color, background} = div.style

基本上等同于

let color = div.style.color
let background = div.style.background

然后如果您按照

跟随这些行

color = "red"
background = "blue"

您尚未为任何内容分配新的对象属性，您只为本地变量分配了新值。

Answer 2

此：

const changeColor = () => {
  const div = document.querySelector("div");
  let {color, background} = div.style;       // ***
  color = "red";
  background = "blue";
};

除了div.style被评估一次，而不是两次之后，

与此完全相同：

const changeColor = () => {
  const div = document.querySelector("div");
  let color = div.style.color;               // ***
  let background = div.style.background;     // ***
  color = "red";
  background = "blue";
};

在任何一种情况下，更改局部变量都不会对对象属性产生任何影响。局部变量得到了对象属性的值，它没有持久的链接。

换句话说：解构只是创造了本地人，它并没有创造出一种“观察”的对象。到提供原始对象属性访问器的原始对象上。（这会很有趣，但它不是解构所做的。）

你可以这样做：

const changeColor = () => {
  const {style} = document.querySelector("div");
  style.color = "red";
  style.background = "blue";
};

这是有效的，因为我们正在抓取对div style对象的引用并直接修改其属性。

或者，完全抛弃解构：

const changeColor = () => {
  Object.assign(document.querySelector("div").style, {
      color: "red",
      background: "blue"
  });
};

如果函数接受那些作为参数，那么：

const changeColor = (color, background) => {
  Object.assign(document.querySelector("div").style, {color, background});
};

您要通过changeColor("red", "blue");致电

。

为什么对象解构不是在风格上工作？

2 个答案: