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

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

的工作方式是将

first

的

selection

元素分配给 item，并将其余项目分配给

rest

- 一个数组。哪个是正确的 - 至少从我的理解来看，这就是事情的运作方式。

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

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

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

Answer 2

首先，我们需要知道JS中的arrays可以被视为objects。

如您所见：

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

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

const { [key]: a } = obj

例如：

const arr = ["🤖", "🧩", "🚗"]

const { [0]: a } = arr

console.log(a)

🤖通过使用

0

作为key来提取，这是数组中此项的index。

...通过将预览语法与以下组合，可以将数组的其余元素解压缩到变量

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))