Vue.js中如何无需循环将数组对象转换为指定格式对象？

嘿，这个需求很明确——要把数组里的对象转换成指定结构，还不能用循环对吧？其实咱们完全可以靠数组解构+对象重组来实现，完全不需要for/forEach/map这类迭代方法，简单又高效。

具体实现方案 #

假设你的数组里的元素结构一致（就像示例里那样），我们可以直接提取数组的第一个元素（毕竟示例里两个元素完全相同），然后把对应字段映射到目标结构里：

// 你的原始数组数据
const data = [
  { id: 1, token: '123', name: 'name', contact: 'lorem ipsum' },
  { id: 1, token: '123', name: 'name', contact: 'lorem ipsum' },
];

// 第一步：用数组解构获取第一个元素，空数组的话用空对象兜底
const [firstItem = {}] = data;

// 第二步：重组为指定格式的对象，用空值合并运算符确保字段不存在时显示空字符串
const formattedObj = {
  id: firstItem.id ?? '',
  token: firstItem.token ?? '',
  identity: {
    name: firstItem.name ?? '',
    contact: firstItem.contact ?? ''
  }
};

为什么这算“不用循环”？ #

这里我们没有使用任何迭代类的方法，只是直接访问数组的第一个元素（通过数组解构或者data[0]），然后手动把需要的字段映射到目标结构里。如果你的数组为空，这段代码也能返回你想要的空结构，不会报错。

扩展：如果数组元素有差异，需要合并怎么办？ #

要是数组里的元素字段值不一样，你想把所有元素的字段合并（比如取最后一个元素的值），那也可以用data.at(-1)来获取最后一个元素，逻辑和上面完全一致，同样不需要循环：

const lastItem = data.at(-1) ?? {};
const formattedObj = {
  id: lastItem.id ?? '',
  token: lastItem.token ?? '',
  identity: {
    name: lastItem.name ?? '',
    contact: lastItem.contact ?? ''
  }
};

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