JavaScript中对象数组结构转换：将values数组转为独立键值对失败求助

当前数组结构 #

[
  {"name" : "john", "values" : ["first","second","third","four"]},
  {"name" : "sachin", "values" : ["five","six","seven","eight"]}
]

预期数组结构 #

[
  {"name" : "john","a" : "first", "b" :"second", "c":"third", "d" : "four"},
  {"name" : "sachin","a" : "five", "b" :"six", "c":"seven", "d" : "eight"} 
]

你的错误代码 #

const newArrayOfObj =  this.state.data.map(({
      values[0]: a,
      values[1]: b,
      values[2]: c,
      values[3]: d,
      ....
    }) => ({
      a, b, c, d,
      ....
    }));

问题原因 #

1. 对象解构语法错误：不能直接在对象解构中使用values[0]: a这种数组索引赋值的写法
2. 丢失了name属性，转换后的对象没有保留原数据中的name字段

正确实现方式 #

方式一：直接索引赋值（适合固定长度的values数组） #

const newArrayOfObj = this.state.data.map(({ name, values }) => ({
  name,
  a: values[0],
  b: values[1],
  c: values[2],
  d: values[3]
}));

方式二：数组解构后赋值（更简洁的写法） #

const newArrayOfObj = this.state.data.map(({ name, values }) => {
  const [a, b, c, d] = values;
  return { name, a, b, c, d };
});

方式三：动态生成键（适合values长度不固定的场景） #

如果values数组长度不确定，需要按顺序生成a、b、c...这类键，可以用reduce实现：

const newArrayOfObj = this.state.data.map(({ name, values }) => {
  const valueMap = values.reduce((result, val, index) => {
    // 从ASCII码97（对应a）开始生成键
    const key = String.fromCharCode(97 + index);
    result[key] = val;
    return result;
  }, {});
  return { name, ...valueMap };
});

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