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

Question

嗨，我正在尝试从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是一个键？

- ViktorMS

---

据我所知，在解构时无法使用动态键。因此，请选择提供的替代答案。 - devserkan

Answer 1

另一种选择是在toppingName周围加上方括号，并将其赋值给一个变量。正如评论中@Bergi所指出的，此选项不会改变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 })

- TFischer

---

哇，这是一种有趣的做法。我认为关键是将其定义为“未定义”。 - devserkan

在这个例子中，withoutOnion 中的 Onion 将未定义。 - TFischer

你能否更新一下你的示例，展示一下你是如何使用setState的？ - TFischer

它对我有效。deleteTopping = toppingName => { const { [toppingName]: topping, ...withoutOnion } = this.state.toppingsSelected; this.setState({toppingsSelected: withoutOnion}) } - devserkan

这个可以工作 @devserkan - 可能是我又搞混了JS语法。谢谢。 - ViktorMS

Answer 2

您可以使用delete进行操作。

delete toppingsSelected[toppingName];

- Murat Karagöz

---

可以了！我之前试过，但是没成功。可能是语法用错了。 - ViktorMS

请注意，这与解构不同，将更改 toppingsSelected，这可能对处理状态来说是不可行的。 - Bergi

是的，如果要使用此方法，最好这样做：const newToppingsSelected = { ...toppingsSelected }; delete newToppingsSelected[toppingName]; this.setState( { toppingsSelected: newToppingsSelected } )。 - devserkan

Answer 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 }

这将返回一个没有'Onion'属性的新对象

- Fabien Greard