如何在JavaScript中一次性解构数组内对象中的数组元素？

JavaScript的解构赋值完全支持直接从单元素数组里嵌套解构目标属性，不用先单独提取数组里的对象。

具体写法示例 #

假设你的数组结构如下：

const myArr = [
  {
    places: {
      coffeeShops: ["First shop", "Second shop", "Third shop"]
    }
  }
];

一次性获取coffeeShops数组

// 直接从数组解构，嵌套提取places下的coffeeShops
const [{ places: { coffeeShops } }] = myArr;
console.log(coffeeShops); // 输出: ["First shop", "Second shop", "Third shop"]

甚至可以直接提取coffeeShops里的单个元素

如果只需要"First shop"这类具体元素，还能进一步简化：

const [{ places: { coffeeShops: [firstShop] } }] = myArr;
console.log(firstShop); // 输出: "First shop"

原理说明 #

外层的[]对应数组本身，里面的{}用来解构数组的第一个元素（也就是那个包含places属性的对象），然后通过嵌套的places: { coffeeShops }直接定位到深层的目标属性，全程一步完成，不需要额外的中间变量。

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