JavaScript数组转换：提取events的value值重构数组

假设你的联系人数组结构如下（示例）：

const contacts = [
  {
    id: 1,
    name: '张三',
    events: [
      { selectedOptions: { value: '客户会议' } },
      { selectedOptions: { value: '需求跟进' } }
    ]
  },
  {
    id: 2,
    name: '李四',
    events: [
      { selectedOptions: { value: '上门拜访' } }
    ]
  }
];

可以使用Array.map()结合解构赋值来实现需求，代码如下：

// 转换数组，保留原字段仅修改events
const transformedContacts = contacts.map(contact => {
  // 提取events字段，其余字段存入rest
  const { events, ...rest } = contact;
  // 将events转换为仅包含value的数组
  const processedEvents = events.map(item => item.selectedOptions.value);
  // 返回合并后的新对象
  return { ...rest, events: processedEvents };
});

边界情况处理 #

如果存在selectedOptions或value可能缺失的情况，可以添加判断逻辑避免报错：

const transformedContacts = contacts.map(contact => {
  const { events, ...rest } = contact;
  const processedEvents = events
    .map(item => item?.selectedOptions?.value) // 可选链操作符避免报错
    .filter(value => value); // 过滤掉空值、undefined等无效项
  return { ...rest, events: processedEvents };
});

这个方法不会修改原数组，而是返回一个全新的转换后数组，符合数据不可变的最佳实践。

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