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

如何解决js数组使用解构/休息语法按值删除元素

对我来说似乎很直观，但事实证明事情并非如此！目标是删除传递的元素（如果存在）并返回余数。我知道有很多方法可以实现这一点 - 包括 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 的工作方式是将 first 的 selection 元素分配给 item，并将其余的 item 分配给 rest - 一个数组。这是正确的 - 至少从我的理解来看，事情就是这样运作的。 将 item 的值“注入”到解构赋值中的可能性有多大，而不必将其视为保存数组第一个元素的新变量？

解决方法

这是一种奇怪的方法：

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,6]
  setSelection(Object.values(rest))
} else {
  // ...
}

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

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

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

但如果您想在不使用 filter 的情况下遵循类似的模式，则可以使用 splice：

const item = 5
const selection = [3,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 相比，这些都没有特别吸引人，但它应该说明这些方法的工作原理。