JS将字符串数组转为含label、id的对象数组时解构报错如何解决

你当前代码的问题出在对数组解构、数组转换逻辑的理解偏差：

• 你写的const [label, id] = arrayOfStrings是解构提取数组的前两位元素，执行后label值为'One'、id值为'Two'，完全不符合生成结构的需求
• 你遇到的TypeError: Invalid attempt to destructure non-iterable instance报错，是因为参考方案时写错了解构位置：数组解构只能作用在数组、Set这类可迭代对象上，你大概率是把遍历过程中拿到的字符串值（非可迭代）直接做了解构，才触发这个错误。
• 后续给原数组重新赋值为[label, id]的操作，和你要的外层带items键的对象结构没有任何关系。

要得到目标结构只需要两步：

1. 遍历原字符串数组，为每个元素生成包含label、id属性的子对象：用数组的map方法遍历最方便，回调的第二个参数是元素的索引（从0开始计数），索引值加1就是你需要的从1递增的id
2. 把生成的子对象数组作为items属性的值，放到外层对象里即可。

const arrayOfStrings = ['One', 'Two', 'Three'];

const targetObj = {
  items: arrayOfStrings.map((currentStr, index) => {
    return {
      label: currentStr,
      id: index + 1
    }
  })
};

// 控制台打印验证结构
console.log(targetObj);
// 如果需要在页面展示结构，用下面这行即可
// document.write('<pre>' + JSON.stringify(targetObj, null, 2) + '</pre>');

运行后targetObj的结构和你给出的目标完全一致：

{
  items: [
    { label: 'One', id: 1 },
    { label: 'Two', id: 2 },
    { label: 'Three', id: 3 }
  ]
}

注意：这个写法不会修改原数组arrayOfStrings的值，不需要对原数组做重新赋值操作。

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