ES6对象数组解构单元素场景失效及对象语法报错问题咨询

原有写法的理解偏差说明 #

你之前双元素数组的解构写法本身存在认知误区：

const [model, {speedStats: {topSpeed, zeroToSixty}}] = cars;

上述写法中，第一个变量model拿到的是数组第一个元素的完整汽车对象，并不是对象内的model属性，你可以运行原代码查看console.log(model)的输出验证该问题。 #

单元素数组解构失效解决方案 #

单元素数组时原写法报错的原因：你原写法的规则是同时提取数组的第1、第2个元素，当数组只有1个元素时，第2个元素的值为undefined，尝试从undefined上解构speedStats属性自然会抛出异常。
如果你要直接提取数组第一个元素的对应属性，将对象解构规则写在数组第一个位置的解构槽即可，正确写法如下：

const cars = [{
  model: "Honda Civic",
  colorsByPopularity: ["Red", "Blue"],
  speedStats: {
    topSpeed: 140,
    zeroToSixty: 8.5
  }
}]
// 解构数组第一个元素的对应属性
const [{model, speedStats: {topSpeed, zeroToSixty}}] = cars;
console.log(model); // 输出 Honda Civic
console.log(topSpeed); // 输出 140
console.log(zeroToSixty); // 输出 8.5

对象集合语法错误原因及修正 #

你编写的cars对象报错的原因：brands字段的值你用了大括号{}包裹，而JS中普通对象的大括号内必须是键: 值的键值对结构，你直接写两个无键的对象不符合语法规范，因此会报括号匹配错误。
如果要存储多个对象的集合，brands应该用数组方括号[]包裹，修正后的代码如下：

const cars =  {
  brands: [
    {
      model:"Honda Civic",
      colorsByPopularity:["Red","Blue"],
      speedStats: {
        topSpeed: 140,
        zeroToSixty: 8.5 
      }
    },
    {
      model:"Mitsubishi Outlander",
      colorsByPopularity:["Gold","Black"],
      speedStats: {
        topSpeed: 200,
        zeroToSixty: 10.5 
      }
    }
  ]
};

如果需要解构该结构中第一个品牌的属性，写法如下：

const { brands: [{model, speedStats: {topSpeed}}] } = cars;
console.log(model, topSpeed); // 输出 Honda Civic 140

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