如何通过JavaScript解构赋值通用获取数组首尾元素？

JavaScript 目前不支持在数组解构的中间位置放置剩余元素，因此无法直接复刻 Python first, *mid, last 的写法，不过有几种通用方案可以适配任意长度的数组，完成首尾元素的提取：

方案1：对象解构（无中间变量的纯解构实现） #

数组本质是以数字下标为属性名的特殊对象，结合对象解构的计算属性能力，可以不写死空位直接提取首尾元素，对任意长度≥1的数组都生效：

const array = [2, 4, 6, 8, 10];
// 提取下标0的值命名为first，提取数组length属性，再提取下标为length-1的值命名为last
const { 0: first, length, [length - 1]: last } = array;
console.log(first, last); // 2 10

// 测试其他长度的数组
const shortArr = [99];
const { 0: f, length: len, [len-1]: l } = shortArr;
console.log(f, l); // 99 99

这个写法不会生成额外的中间数组，性能最优。

方案2：数组解构配合取值方法（语义更直观） #

如果更习惯数组解构的语义，可以先提取第一个元素，把剩余元素放入临时数组后取最后一位：

const array = [2, 4, 6, 8, 10];
const [first, ...rest] = array;
// 兼容数组长度为1的场景，此时rest为空数组，last取first即可
const last = rest.at(-1) ?? first;
console.log(first, last); // 2 10

其中at(-1)是ES2022标准新增的数组方法，现代浏览器和Node.js 16+均已支持；如果需要兼容更老旧的运行环境，可以替换为rest[rest.length - 1]。

方案3：直接下标取值（兼容性最强） #

如果不需要严格使用解构语法，直接通过下标取值是最稳妥、无任何兼容问题的写法：

const array = [2, 4, 6, 8, 10];
const first = array[0];
const last = array[array.length - 1];

注意：JS 语法明确规定剩余元素必须是解构模式的最后一项，类似const [first, *mid, last] = array的写法会直接抛出语法错误，无法运行。

内容的提问来源于stack exchange，提问作者mockuser