【问题标题】:Can this be optimized even further using object methods or other way in javascript?可以使用对象方法或javascript中的其他方式进一步优化吗?
【发布时间】:2018-04-27 12:21:23
【问题描述】:

您好,我正在尝试从 react javascript 中的数组中删除用户文本被提供给需要删除的函数并通过下面的函数运行,this.state.users 包含具有以下属性的对象:

0: {user_id: "001" , first_name: "john", last_name: "doe", 电子邮件: “john@doe.com”}

1: {user_id: "002" , first_name: "mike", last_name: "ty", 电子邮件: "mike@ty.com"}

我想知道这是否可以针对大量数据进一步优化?还是已经优化了谢谢!

removeUser(text){
  var updatedUsers = this.state.users;
  var i = 0;
  for (i = 0; i< updatedUsers.length;i++)
  {
    if(updatedUsers[i].user_id == text)
      break;
    }
    updatedUsers.splice(i,1);
    this.setState({users: updatedUsers});
  }
}

【问题讨论】:

  • 旁注,您正在直接改变状态。您需要创建 users 数组的副本。例如:var updatedUsers = this.state.users.slice();
  • 除此问题之外的一般建议:在遍历数组元素的循环内删除数组元素是不好的。永远不要在您正在迭代的集合中添加或删除元素。
  • 这是一种不好的做法,你能告诉我更多@Chris
  • 它可能会导致错误? @莫雷?谢谢大家
  • 即使它可以工作,这也是一个几乎是哲学问题的难题:想想看,如果你删除了一个项目,这对迭代有何影响?它对停止条件有什么作用?下一个元素?对于长度变化的集合,对集合的迭代没有很好的定义,结果是模棱两可的,并且依赖于太多不明显的东西。因此,即使它碰巧起作用,阅读这样的结构也应该敲响所有警钟并竖起你的头发(如果有的话)。你如何剪掉一个在椅子上扭来扭去的人的头发?你不想要一个移动的目标。

标签: javascript reactjs


【解决方案1】:

你可以使用数组的filter:

removeUser (text) {
  this.setState({
    users: this.state.users.filter((u) => u.user_id !== text)
  })
}

【讨论】:

【解决方案2】:

您可以使用redux's 方法之一。

removeUser(text) {
  const { users } = this.state
  const index = users.findIndex(user => user.user_id === text)

  this.setState({
    users: [
      ...users.slice(0, index), // every user before index
      ...users.slice(index + 1), // every user after index
    ]
  })
}

【讨论】:

  • 我还在学习 react 并没有尝试过 redux,不是冒犯但我很好奇我如何测试这是否比@lilezek 更好的解决方案谢谢
  • 这不是一个更好的解决方案。这两个建议都在我发布的链接中:)
  • 这就是我写的原因:“你可以使用一种 redux 的方法
  • @Tommy 两种解决方案都是正确的,但我会说使用数组的过滤器(稍微)更短更快。
猜你喜欢
  • 1970-01-01
  • 2010-09-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-02-14
  • 2018-05-14
  • 1970-01-01
  • 2014-10-24
相关资源
最近更新 更多