javascript 可重用函数答案

【问题标题】：javascript reusable functionjavascript 可重用函数
【发布时间】：2021-10-23 22:44:00
【问题描述】：

各位，我有一个问题。我有两个做同样事情的 javascript 函数。请注意，它只会更改“让选定”变量。我认为这不是在 js 中使用函数的最佳方式，我该如何重用它们？

第一个函数：

onChange(id) {
    let selected = this.state.selectedDevice
    let find = selected.indexOf(id)

            if(find > -1) {
                selected.splice(find, 1)
            } else {
                selected.push(id)
            }

            this.setState({ selected })
        }

第二个功能：

onChangeSec(id) {
            let selected = this.state.selectedSection
            let find = selected.indexOf(id)

            if(find > -1) {
                selected.splice(find, 1)
            } else {
                selected.push(id)
            }

            this.setState({ selected })
        }

谢谢！！！

【问题讨论】：

让selected 成为另一个你可以传入的参数...？
您也可以将相关属性的name作为字符串传入并访问this.state[name]

标签： javascript reactjs jsx

【解决方案1】：

您可以将 key 作为另一个函数参数传递

onChange(id, key) {
        let selected = this.state[key]
        let find = selected.indexOf(id)

        if(find > -1) {
            selected.splice(find, 1)
        } else {
            selected.push(id)
        }

        this.setState({ selected })
}

在您的情况下，键将是“selectedDevice”或“selectedSection”作为字符串传递。

【讨论】：

我将如何传递这个字符串？就我而言，我有这两个数组。感谢您的回答
例如 onChange(5, 'selectedDevice') 怎么样？

【解决方案2】：

似乎this.state.selectedDevice 和this.state.selectedSection 都是数组，并且由于您使用的是基于索引的数组检索，因此无法从函数内部确定应该使用哪个。相反，您应该将该信息传递给函数。例如：

onChange(id, data) {
  const position = data.indexOf(id)
  
  this.setState({
    selected: position > -1
      ? [...data.slice(0, position), ...data.slice(position + 1)]
      : [...data, 1]
  })
}

注意：这也适用于您对状态对象的突变，这会导致错误。

您可能还想考虑改用Set：

constructor() {
  this.state = {
    selected: new Set()
  }
}

onChange(value) {
  const newSelected = new Set(this.state.selected)

  if (newSelected.has(value)) {
    newSelected.delete(value)
  } else {
    newSelected.add(value)
  }

  this.setState({ selected: newSelected })
}

这比可以有多个相同值条目的数组更安全。

【讨论】：