javascript - 如何根据第三个数组从另一个数组创建一个新数组?

标签 javascript

我有一个包含以下值的 structuralFormData 数组:

[
  {
    "season": "autumn",
    "firstContactPersonName": "John",
    "firstContactPersonPhone": "46442644",
    "secondContactPersonName": "Jhonny",
    "secondContactPersonPhone": "46442644",
  },
  {
    "season": "christmas",
    "firstContactPersonName": "Tommy",
    "firstContactPersonPhone": "46442644",
    "secondContactPersonPhone": "Thomas",
  },
]

我有另一个数组保存日期,selectedDate数组:["autumn=2020-08-28", "christmas=2020-12-28"]

我的函数创建一个新数组updatedStructuredFormData,并用数据填充新数组以发送到后端。或者也许只是更新现有数组structuralFormData

let updatedStructuredFormData = structuredFormData.map(x => {
            let season = x.season;
            x.date = selectedDate.find(e => e.indexOf(season) > -1).split("=")[1];
            return x;
        });

问题是,如果我只选择一个日期,并且 dates 数组如下所示:["autumn=2020-08-28"] 我只想将这些值填充到新数组中:

{
"season": "autumn",
"firstContactPersonName": "John",
"firstContactPersonPhone": "46442644",
"secondContactPersonName": "Jhonny",
"secondContactPersonPhone": "46442644",
}

我是 JavaScript 新手,需要帮助如何仅过滤 dates 数组中的选定值。

预期结果应该是:

[
    {
      "season": "autumn",
      "firstContactPersonName": "John",
      "firstContactPersonPhone": "46442644",
      "secondContactPersonName": "Jhonny",
      "secondContactPersonPhone": "46442644",
      "date": "2020-08-28"
    }
]

如果 selectedDate 数组也有圣诞节日期 ["autumn=28-08-28", "christmas=2020-12-28"],则预期结果将是:

[
    {
      "season": "autumn",
      "firstContactPersonName": "John",
      "firstContactPersonPhone": "46442644",
      "secondContactPersonName": "Jhonny",
      "secondContactPersonPhone": "46442644",
      "date": "2020-08-28"
    },
    {
      "season": "christmas",
      "firstContactPersonName": "Tommy",
      "firstContactPersonPhone": "46442644",
      "date": "2020-12-28"
     }
]

谢谢:)

最佳答案

下面是使用 .reduce() 执行此操作的一种方法:

// Array to filter
const arr = [
  {
    season: "autumn",
    firstContactPersonName: "John",
    firstContactPersonPhone: "46442644",
    secondContactPersonName: "Jhonny",
    secondContactPersonPhone: "46442644"
  },
  {
    season: "christmas",
    firstContactPersonName: "Tommy",
    firstContactPersonPhone: "46442644",
    secondContactPersonPhone: "Thomas"
  }
];

// date to filter for
const selectedDates = ["autumn=28-08-28", "christmas=2020-12-28"];

// loop over each item and filter for season that is in "selectedDate"
const filtered = arr.reduce((acc, curr) => {
  // looping over dates to see if current items date is in the selected dates.  We also save the result to a const as we will use it to add to our final array
  const maybeDate = selectedDates.filter(date => date.includes(curr.season));

  // check if we have a date
  if (maybeDate.length > 0) {
    // extract date
    const date = maybeDate[0].split("=")[1];
    // update accumulator
    acc = [...acc, { ...curr, date }];
  }

  return acc;
}, []);

console.log({ filtered });

// results
{
  filtered:
  [{
    season: 'autumn',
    firstContactPersonName: 'John',
    firstContactPersonPhone: '46442644',
    secondContactPersonName: 'Jhonny',
    secondContactPersonPhone: '46442644',
    date: '28-08-28'
  },
  {
    season: 'christmas',
    firstContactPersonName: 'Tommy',
    firstContactPersonPhone: '46442644',
    secondContactPersonPhone: 'Thomas',
    date: '2020-12-28'
  }]
}

关于javascript - 如何根据第三个数组从另一个数组创建一个新数组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60932420/

相关文章:

javascript - Typescript - 将所有源文件与 node_modules 中所需的外部模块捆绑在单个输出中

javascript - 我使用 jquery 访问列表项的 innerHTML 但它返回未定义

javascript - 这在 JavaScript 中可能吗?

javascript - 使用弹出窗口在 "contenteditable"div 中插入图像

javascript - 如何获取用户的键盘输入并将其显示在他们键入的屏幕上

javascript - 使用javascript将js值传递给另一个php页面并接收值

javascript - IE9 createTreeWalker - 不支持这样的接口(interface)

javascript - Firefox onclick html5 视频事件

javascript - 如何将自定义指令属性值绑定(bind)到 Angular 中的隔离范围

javascript - Sequelize 和 Express 模型和关联设置