通过变量索引解构 JavaScript 数组

Question

据我了解，JavaScript 数组可以通过执行以下操作根据特定索引进行解构。

const { 3: selectedByIndex } = arr;

这会将索引 3 处的元素的值分配给变量

selectedByIndex

。

有没有办法传入变量索引值来解构数组？下面的不起作用，它似乎而是在

index

上寻找

arr

属性。

const index = 3;
const arr = [1, 2, 3, 4, 5]

const { index: selectedByIndex } = arr;

Answer 1

是的，您可以通过在方括号内设置

index

来实现。

const index = 3;
const arr = [1, 2, 3, 4, 5]

const { [index]: selectedByIndex } = arr;

console.log(selectedByIndex)

Answer 2

虽然这有效

const a = [1, 2, 3];
const index = 2;

const [,,v1] = a;
// v1 = 3
const { [index]: v2 } = a;
// v2 = 3

第二个解决方案（

v2

）是一种糟糕的设计实践，因为数组不是对象，但您将其作为一个对象进行访问。

更好的解决方案是

const v3 = a[index]; 
const v4 = a?.[index];

换句话说，解构就是当你知道数据结构的格式时。如果不是，JavaScript 数组不会关心您是否尝试获取越界值，除非该值不是数组，在这种情况下您需要可选的链接（例如

v4

）。

---

编辑2022年

为了澄清我所说的第二个解决方案是“糟糕的设计实践”的含义，请考虑这个基准：

// tested on                      Chrome 105       Firefox 105
let value = list[index];       // fastest, base    fastest, base
let value = list?.[index];     // 2.52% slower     3.74% slower
let { [index]: value } = list; // 47.72% slower    30.76% slower

并不是因为某个功能存在并且有效，1）它很高效，或者 2）它是一个很好的设计选择。毕竟，我当然可以用管钳敲钉子，但还有更好的工具来完成这项工作。

---

编辑2024年

添加之前的编辑后，Array.at仍未被普遍采用，但现在已被广泛采用。

const v5 = a.at(index);

这是首选方式，因为它消除了访问对象属性的歧义。

例如：

const i = 1;
const p = 'find';

// old
const v6 = a[i];  // 2
const v7 = a[p];  // 'find() [native code]' (same as a.find)

// new
const v8 = a.at(i);  // 2
const v9 = a.at(p);  // 1 (same as a.at(0)

新的 API 通过访问不需要的属性来防止返回不需要的值。

奖励：

a.at(-2)

与

a[a.length - 2]

相同

Answer 3

与创建对象时传递变量键的方式相同 - 将其放入

[]

。

const index = 3;
const arr = [1, 2, 3, 4, 5]

const { [index]: selectedByIndex } = arr;
console.log(selectedByIndex);

但除非这只是更复杂的解构模式的一部分，否则

arr[index]

显然更简单。