带条件的箭头函数对象迭代

Question

这个问题是关于改进工作代码的。我有一个函数 showLabels，它接受一个值，遍历一个对象并通过将值与对象键进行比较来定义 return 的标签。

  showLabels = (value) => {
    Object.keys(this.state.labels).forEach( key => {
      if (value <= key) this.tooltip = this.state.labels[key];
    });
    return this.tooltip;
  }

问题：是否可以使它更简洁？尤其是将函数的值赋给 this.tooltip 然后在外部函数中 return 似乎不必要地冗长。

例子

根据这里的评论是一个例子：

this.state.labels = {0: "Smallest amount", 50: "In the middle", 100: "Top"}
value = 33
//showLabels(value=33) should return "In the middle"

Answer 1

showLabels = (value) => {
  let tooltip, { labels } = this.state
  Object.keys(labels).forEach( key => {
    if (value <= key) tooltip = labels[key];
  })
  return tooltip;
}

像这样更简洁。有什么理由需要在这里使用 Object.keys() 吗？比较慢。

不管怎样，我在开头添加了变量声明和解构。

Answer 2

你可以使用 Array.prototype.find on Object.entries

 showLabels = value => Object.entries(this.state.labels)
                             // sort pairs by key
                             .sort(([keyA], [keyB]) => keyA > keyB)
                             .find(([key]) => key > value)[1]

顺便说一句，请记住，不能保证键的迭代顺序。所以假设你想找到第一个大于值的标签，你需要对标签进行排序。

带条件的箭头函数对象迭代

Arrow function object iteration with condition

javascript

ecmascript-6

arrow-functions