js 数组使用解构/剩余语法按值删除元素

Question

对我来说似乎很直观，但事实证明事情并不是这样的！目标是删除传递的元素（如果存在）并返回其余元素。我知道有很多方法可以实现这一目标 - 包括filter：const rest = selection.filter(i => i !== item)- 但是，正如我所说，我认为这种方法会是一件事 - 因为它是为了objects/key:value pairs.

if (selection.includes(item)) {
  // remove if available
  const [item, ...rest] = selection;
  
  setSelection(rest)
} else {
  // ...
}

工作方式是将的元素destructuring分配给 item 并将其余项目分配给- 一个数组。这是正确的——至少从我的理解来看，事情就是这样运作的。firstselectionrest

是否可以使用解构赋值从数组中提取特定项目并将其余元素解压到变量中？

Answer 1

这是一种奇怪的方法：

const item = 5
const selection = [3, 4, 5, 6]
const itemPos = selection.indexOf(item)

if (selection.includes(item)) {
  // remove if available
  const {[itemPos]: item, ...rest} = selection

  // `rest` is now an object, so convert back to an array:
  console.log(Object.values(rest)) // [3, 4, 6]
  setSelection(Object.values(rest))
} else {
  // ...
}

由于我const在两个地方都使用了，所以第二个item是不同的，但可以删除const表达式并将其括在括号中以重新分配item（正如我认为您最初要求的那样）：

let rest, item = 5
const selection = [3, 4, 5, 6]
const itemPos = selection.indexOf(item)

if (selection.includes(item)) {
  // remove if available
  ({[itemPos]: item, ...rest} = selection)
  console.log(Object.values(rest)) // [3, 4, 6]
  setSelection(Object.values(rest))
} else {
  // ...
}

但如果您想遵循类似的模式而不使用filter，您可以使用splice：

const item = 5
const selection = [3, 4, 5, 6]
const itemPos = selection.indexOf(item)

if (selection.includes(item)) {
  // remove if available
  const rest = [...selection] // Copy array if you still need `selection`; otherwise, we could just splice and pass `selection`
  rest.splice(itemPos, 1)
  console.log(rest)
  setSelection(rest)
} else {
  // ...
}

与 相比，这些都不是特别有吸引力filter，但它应该显示这些方法是如何工作的。