如何使用array destructuring重构该JavaScript数据处理函数？

你的linter报数组解构的提示，是因为Object.entries()返回的每一项都是[键名, 对应值]格式的数组，规则要求优先用数组解构代替数组[下标]的取值方式，代码可读性更好。

符合规范的重构代码 #

export const organiceData = async () => {
  const data = await getData();
  const entryList = Object.entries(data);
  const resultArr = [];
  entryList.forEach(([bookId, bookGroup]) => {
    const currentBook = bookGroup[0];
    currentBook.id = bookId;
    resultArr.push(currentBook);
  });
  return resultArr;
};

核心改动点 #

• 遍历Object.entries生成的列表时，直接在回调参数位置做数组解构：([bookId, bookGroup])，直接拿到原代码里的book[0]（对象键）和book[1]（对应值），完全符合linter要求的数组解构语法
• 删除了冗余的中间变量newBook，逻辑链路更短
• 变量名做了语义化调整，不用靠下标猜变量存储的内容

如果想要更精简的写法，可以直接用数组map方法替代forEach手动push的逻辑，代码更短：

export const organiceData = async () => {
  const data = await getData();
  return Object.entries(data).map(([bookId, bookGroup]) => {
    const currentBook = bookGroup[0];
    currentBook.id = bookId;
    return currentBook;
  });
};

补充说明：上面两种写法都会直接修改接口返回的原始对象，如果业务场景不允许修改原数据，可以在处理时做一层浅拷贝，把逻辑改成const currentBook = { ...bookGroup[0], id: bookId }再返回即可，不会改动原始响应数据。

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