如何从键值数组中删除元素？答案

【问题标题】：How to remove an element from a key value array?如何从键值数组中删除元素？
【发布时间】：2019-05-29 05:30:14
【问题描述】：

我想从数组中删除特定元素，我从输入中获取元素的键。我希望能够仅通过知道密钥来删除元素。

这是数组：

state ={
    splitAmount : [{
        "SplitAmount0": this.props.data.amount1
    }, {
        "SplitAmount1": this.props.data.amount2
    }, {
        "SplitAmount2": this.props.data.amount3
    }]
}

删除功能：

  removeSplitAmount(e) {
    console.log("remove",e.target.name)
    let array = [...this.state.splitAmount];
    let  index = this.state.splitAmount.IndexOf(p => p == e.target.name )
    if (index !== -1) {
        array.splice(index, 1);
        this.setState({splitAmount: array});
    }
}

【问题讨论】：

How do I remove objects from a javascript associative array?的可能重复

标签： javascript reactjs react-redux

【解决方案1】：

你可以使用数组上的.filter方法结合Object.keys来清理很多函数：

removeSplitAmount(e) {
    const newSplitAmount = this.state.splitAmount
      .filter(p => !Object.keys(p).includes(e.target.name));

    this.setState({ splitAmount: newSplitAmount });
}

【讨论】：

如果您需要支持 IE11 等旧版浏览器，请确保为“包含”功能添加 polyfill

【解决方案2】：

你可以使用hasOwnProperty到filter你需要的对象。

removeSplitAmount(e) {
  const newSplitAmount = this.state.splitAmount
    .filter(x => !x.hasOwnProperty(e.target.name));

  this.setState({ splitAmount: newSplitAmount });
}

【讨论】：

我认为这是最好的答案，即使“newSplitAmount”变量甚至不是必需的，如果你想要更少的代码可以删除

【解决方案3】：

正如 Dmitry 所说，您不能对对象数组执行 indexOf... 我感觉很糟糕，我没有意识到这一点。在这种情况下会很有用： var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

beasts.indexOf('bison')

在您的情况下，您最好使用上述答案中所述的 .filter 方法，因为您正在搜索和对象具有特定属性

【讨论】：

indexOf 不以 lmbda 作为参数。除非您想在 lambda 数组中找到 lambda 的索引。