如果属性内部不存在变量，如何正确解构变量？答案

【问题标题】：How to properly destructure variable if it can be absent inside property?如果属性内部不存在变量，如何正确解构变量？
【发布时间】：2019-12-20 12:06:18
【问题描述】：

我在 React 组件中有一个基于服务器响应的变量，该变量可以位于 prop.prop 或 prop 中。我怎样才能正确地解构这个案例？

 const { myVar } = prop.prop || prop

【问题讨论】：

prop 是一个对象吗？你有数据的例子吗？
你目前的方法有什么问题？
@NickParsons 使用当前方法 myVar 将始终从 prop.prop 解构，即使它不存在于其中。
@MaheerAli 哦，我现在明白了。起初我不明白这个问题，但现在明白了
const { p, q } = {...prop.prop, ...prop}; ?

标签： javascript

【解决方案1】：

把它当作

const { prop: { myVar } = prop } = prop;

使用嵌套解构和默认值的组合。这是显示不同类型的道具输入的示例代码。在 Real 代码中，您可以只使用一个 const 语句。

var propFlat = { myVar1: "flat-1", myVar2: "flat-2" };

var propNested = { prop: { myVar1: "nested-1", myVar2: "nested-2" } };

const { prop: { myVar1 } = propFlat } = propFlat;
const { prop: { myVar2 } = propNested } = propNested;

console.log(myVar1); // output "flat-1"
console.log(myVar2); // output "nested-2"

【讨论】：

【解决方案2】：

您可以使用三元运算符。

 const { myVar } = prop.prop.myVar ? prop.prop : prop

如果您的myVar 可能包含任何虚假值，那么您可以使用hasOwnProperty

 const { myVar } = prop.prop.hasOwnProperty('myVar') ? prop.prop : prop

您完全避免了解构语法。

 const myVar = prop.prop.myVar || prop.myVar

如果它确定myVar 永远不会是虚假值，我会使用最后一种方式。

【讨论】：

const { myVar } = prop.prop.myVar ? //... 将在此处抛出错误，如果 prop.prop 未设置。
@mbojko 但是OP没有提到prop.prop可能是undefined。他只是说myVar 将在prop.prop 或prop 内。如果myVar 不在prop.prop 内，则并不意味着它的undefined
... 这使得所有这些都变得不必要了。

【解决方案3】：

嗯，我知道它是一个浏览器并且没有反应，但是这个 sn-p 在 Chrome 中对我有用：

function test(prop){
  const { myVar } = prop.prop || prop;
  console.log(myVar);
}

test({myVar:10});
test({prop:{myVar:20}});

该方法也适用于 React。我去了repl.it，并将默认组件修改为

[...]
  render() {
    function test(prop){
      const { myVar } = prop.prop || prop;
      return myVar;                          
    }
    let asd=test({myVar:10});
    let qwe=test({prop:{myVar:20}});
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit {asd}<code>src/App.js</code>{qwe} and save to reload.
[...]

结果按预期呈现：

Edit 10src/App.js20 and save to reload.

10 和 20 都在那里。

【讨论】：

这能回答问题吗？不，不是。
@JonasWilms：好吧，标签上写着“JavaScript”，它是 JavaScript。它甚至可以在使用了 3 年的 iOS Safari 上运行，所以我真的非常怀疑它不能在 React 上运行，尽管它有不同的 JS 引擎。
@JonasWilms 它也适用于反应。转发您对该问题的反对票以及关闭。