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

Question

对我来说似乎很直观，但事实证明事情并非如此！目标是在元素存在的情况下删除已传递的元素并返回其余部分。 我知道有许多实现这个目标的方法 - 包括filter: const rest = selection.filter(i => i !== item) - 但是，就像我说的那样，认为这种方法是一件事 - 正如对于对象/键：值对。

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

解构的工作方式是将selection的第一个元素赋值给item，并将其余的元素赋值给rest - 一个数组。这是正确的 - 至少从我的理解来看是这样的。

通过使用解构赋值，是否可以从数组中提取特定的项并将其余的元素解包到一个变量中？

- kawerewagaba

---

使用过滤器。你试图使用解构所做的事情是不可能的。 - Omkar76

你可以使用一个丑陋的 hack：https://jsfiddle.net/tfca7ow9/，但是不要使用它:P - Nick Parsons

事实证明是可能的，正如@NickParsons和Brett Zamir所展示的那样 - 缺点是更费力 - 至少在当前的实现中。 - kawerewagaba

@Omkar76 我肯定使用了 filter - 只是想知道是否有更“优雅”的方式。我也不想在听取社区意见之前就得出“不可能”的结论。 - kawerewagaba

@colinwagaba，我明白你的意思。我没有考虑将数组解构为对象。下次我会更小心地说“不可能”的话=） - Omkar76

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 相比，这些方法都不是特别吸引人，但它们可以展示这些方法的工作原理。

- Brett Zamir

Answer 2

首先，我们需要认识到JS中的数组可以被视为对象。

正如您在这里所看到的：

console.log(typeof [0,1,2])

好的，所以...现在如果我们阅读 解构赋值 的语法，我们可以看到有可能通过使用其 键 来提取对象中的特定元素。

const { [key]: a } = obj

例如：

const arr = ["", "", ""]

const { [0]: a } = arr

console.log(a)

通过使用 0 作为键来提取并分配 a，该键是该项在数组中的索引。

... 通过将上述语法与以下内容结合使用，可以将数组的其余元素解包到变量中

const { a, b, ...rest } = obj

const arr = ["", "", ""];

const {[2]: a, ...rest} = arr

console.log(Object.values(rest))

由于数组被视为对象，因此需要使用Object.values()将包含解压元素的rest对象转换回数组。

如果您的变量已经声明，请将变量名括在方括号中，以便JS可以正确解析：

let a, rest, arr = ["", "", ""];

({[1]: a, ...rest} = arr)

console.log(Object.values(rest))

- Gass