时间戳

首页 > 解决方案 > JS 使用 Array.map() 和 Array.reduce() 简化数组到对象转换的重构

javascript - JS 使用 Array.map() 和 Array.reduce() 简化数组到对象转换的重构

问题描述

我有一个 API 调用，它以这种格式返回数据：

const testScheduleData = [
    {
        DATE: "2021-06-20",
        SELECTED: false,
        STARTINGDAY: true,
        ENDINGDAY: true,
        STATUS: "WORK",
        COLOR: "green",
    },
    {
        DATE: "2021-06-21",
        SELECTED: false,
        STARTINGDAY: true,
        ENDINGDAY: true,
        STATUS: "HALFDAY",
        COLOR: "green",
    },
];

我需要将其重组为object of objects这样的格式：

Object {
  "2021-06-20": Object {
    "color": "green",
    "endingDay": true,
    "selected": false,
    "startingDay": true,
  },
  "2021-06-21": Object {
    "color": "green",
    "endingDay": true,
    "selected": false,
    "startingDay": true,
  },

我这样做的方式是首先映射testScheduleData到数组（暂时忽略 item.STATUS）：

const datesArr = testScheduleData.map((item, index) => ({
    [item.DATE]: {
        startingDay: item.STARTINGDAY,
        endingDay: item.ENDINGDAY,
        color: item.COLOR,
        selected: item.SELECTED,
    },
}));

然后用于reduce从中创建一个对象：

var datesObj = datesArr(function (result, item) {
    var key = Object.keys(item)[0];
    result[key] = item[key];
    return result;
}, {});

它返回正确的结果，但似乎有点过头了。有没有办法简化这两个步骤？

标签： javascriptarraysreactjs

解决方案

试试下面的代码，你只需要映射并推入一个对象

let obj = {}

const testScheduleData = [
    {
        DATE: "2021-06-20",
        SELECTED: false,
        STARTINGDAY: true,
        ENDINGDAY: true,
        STATUS: "WORK",
        COLOR: "green",
    },
    {
        DATE: "2021-06-21",
        SELECTED: false,
        STARTINGDAY: true,
        ENDINGDAY: true,
        STATUS: "HALFDAY",
        COLOR: "green",
    },
];

testScheduleData.map(row => {
   obj[row.DATE] = row
})

console.log(obj)

推荐阅读