使用函数中的变量删除对象的键和值答案

【问题标题】：Remove an object's key and value using a variable from function使用函数中的变量删除对象的键和值
【发布时间】：2019-01-10 06:46:31
【问题描述】：

嘿，我正在尝试从 Javascript 对象内的状态中删除键：值对。

当我在代码中硬编码键名时它可以工作，但是当我尝试使用函数调用中的变量时，它什么也不做。

有人可以帮帮我吗？

这是一个对象示例：

  toppingsSelected: {
     "Onion":"true",
     "Mushrooms":"true",
  }

这可行，硬编码：

deleteTopping = toppingName => {

   const { Onion, ...withoutOnion } = toppingsSelected;
   console.log(withoutOnion); // Returns object without onion

  };

这不起作用：

deleteTopping = toppingName => {


   const toppingName = "Onion"; // Variable gets passed in

   const { toppingName, ...withoutOnion } = toppingsSelected;
   console.log(withoutOnion); // Returns original object, no change made

  };

所以我基本上是在尝试从 React 状态中删除一个键，但我对 Javascript 还是很陌生。

如何让 Javascript 知道 toppingName 是一个键？

【问题讨论】：

据我所知，您在破坏时不能使用动态键。因此，请寻求其他提供的答案。

标签： javascript reactjs object ecmascript-6

【解决方案1】：

另一种选择是在toppingName 周围添加方括号，并将其分配给变量。正如@Bergi 在 cmets 中指出的那样，此选项不会改变 toppingsSelected

const toppingsSelected = {
  "Onion":"true",
  "Mushrooms":"true",
};
const toppingName = "Onion";
const {
  [toppingName]: topping,
  ...withoutOnion
} = toppingsSelected;

console.log(JSON.stringify(withoutOnion));

要设置 React 状态，您需要这样做

this.setState({ toppingsSelected: withoutOnion })

【讨论】：

哇，这是多么有趣的方式。我认为关键是将其定义为undefined。
Onion 在此示例中将在 withoutOnion 中未定义
是的，我知道，但我可以发誓，首先我用undefined 代替随机变量进行了尝试，它起作用了:) 现在它不起作用了。奇怪又非常有趣的方式。
它对我有用。 deleteTopping = toppingName => { const { [toppingName]: topping, ...withoutOnion } = this.state.toppingsSelected; this.setState({toppingsSelected: withoutOnion}) }
这有效@devserkan - 一定是我再次混淆了JS语法。谢谢。

【解决方案2】：

您可以使用delete，例如

delete toppingsSelected[toppingName];

【讨论】：

行得通！我以前试过，但没有用。一定是使用了错误的语法，
请注意，这 - 与解构不同 - 将改变 toppingsSelected，这可能是处理状态的禁忌。
是的，如果要使用这种方法，最好这样做：const newToppingsSelected = { ...toppingsSelected }; delete newToppingsSelected[toppingName]; this.setState( { toppingsSelected: newToppingsSelected } )

【解决方案3】：

一种方法是使用Array.prototype.filter()

const _obj = {
  'Onion': true,
  'notOnion': false
};

const newObj = Object.keys(_obj)
  .filter(key => key !== 'Onion')
  .reduce((acc, cur) => ({ ...acc, cur }), {})

console.log(newObj); // { notOnion: false }

这将返回一个没有“洋葱”属性的新对象

【讨论】：