JS对象解析在不实例化变量的情况下访问属性以进行评估

Question

我正在改进我的React js代码，使用ESLint和eslint-config-airbnb ，我收到类型错误：

• [eslint]必须使用解构道具赋值（反应/解构 - 赋值）

我可以通过使用JS Object解构来克服这些错误，并在必要时声明其他变量。

在下面的代码片段中，我使用对象解构来填充cat变量。 但是，如果我想做一个“if”语句，有条件地反对对象解构输出，我无法做到这一点，如果不做一个两步过程，其中：

1. 声明要使用通过对象解构填充它的变量
2. 在我的“if”语句中使用该变量。

有没有办法在不必声明这个“临时”变量的情况下执行此操作，但仍然可以通过对象解构来访问内部对象属性，以便在例如“if”语句中使用。

我在下面尝试了注释代码，但它没有编译。

 const animals = { cat: "brown", dog: "white" }; let cat; ({ cat } = animals); console.log(cat); if (cat === "brown") { console.log("The cat is brown"); }; // Now, the same "if" statement, but this time I replace the variable called "cat" with lines 6 to 8 above /* if (({ cat } = animals) === "brown")) { console.log("The cat is brown"); }; */ 

这是有错误的实际代码，我刚刚构建了上面的例子，专注于js语法：

 aTest() {
     if (this.state.shouldToggle === true) {
       this.setState({ activeTabKey: 'hello' })
     } else {
       clearInterval(this.state.timerId)
     }
   }

this.state.shouldToggle - 带有下划线红色，错误为“[eslint]必须使用解构状态赋值（react / destructuring-assignment）”

Answer 1

对我而言，ESLint抱怨不在那里使用解构是非常奇怪的。 但显然它确实如此，这意味着你的选择是：

1. 如果您不喜欢它的要求，请禁用该规则。 （如果真的需要在代码中使用解构 - 而且我没有理由怀疑你的截图 - 这条规则对我来说似乎有点傻，但这既不在这里也不在那里。）

2. 因为它要求你使用解构，在这个例子中它要求你使用解构赋值（因为你没有参数来解构），这意味着你必须要分配一些东西，这意味着创建不必要的变量/常量：

    aTest() { const {shouldToggle, timerId} = this.state; if (shouldToggle === true) { this.setState({ activeTabKey: 'hello' }) } else { clearInterval(timerId) } } 

   这可以防止重复this.state ，但是让你重复使用shouldToggle和timerId ，这似乎不是一个有用的权衡（再次，对我而言 ，但我认为这不重要，你的是）。

Answer 2

根据您更新的问题，您应该能够做到：

 aTest() {
  const { shouldToggle, timerId } = this.state
     if (shouldToggle) {
       this.setState({ activeTabKey: 'hello' })
     } else {
       clearInterval(timerId)
     }
   }

---

继续您之前的尝试：

if (({ cat } = animals) === "brown")) {
   console.log("The cat is brown");
};

永远不会满足条件。

使用解构语法分配变量时，它将与对象本身进行比较。 让我用简单的测试来澄清你：

 if(({test} = {test:13})==13) { console.log(test); // will not be logged } 

  if(({test} = {test:13})==undefined) { console.log(test); // will not be logged } 

 if(({test} = {test:13})==true) { console.log(test); // will not be logged } 

 if(({test} = {test:13})==false) { console.log(test); } 

 if(JSON.stringify(({test} = {test:13})) == JSON.stringify({test:13}) ) { console.log(test); // now, this will be logged } 

---

所以，你要比较brown == { cat: 'brown', dog: 'white' } ，它永远不会满足。

您必须实现的是根据ESLINT使用解构语法将它们分配到变量中，

const { cat } = animals
if(cat === 'brown') { // Okay