Angular中移除数组转对象后的索引键，提取内部对象求助

问题详情 #

我有如下TypeScript数组：

let deletedItemsArrays: any[] = [
  {"product-id": 1, name: "Margherita", price: 92},
  {"product-id": 2, name: "Farm House", price: 138},
  {"product-id": 3, name: "CHEESE N CORN", price: 200}
];

使用Angular中的扩展运算符转换为对象：

this.convertObject = {...deletedItemsArrays};

转换后得到带索引键的对象：

{
  0 : {"product-id": 1, name: "Margherita", price: 92},
  1 : {"product-id": 2, name: "Farm House", price: 138},
  2 : {"product-id": 3, name: "CHEESE N CORN", price: 200}
}

希望得到移除索引键的结果，直接输出数组中的每个对象：

{"product-id": 1, name: "Margherita", price: 92}
{"product-id": 2, name: "Farm House", price: 138}
{"product-id": 3, name: "CHEESE N CORN", price: 200}

解决方案 #

1. 直接使用原数组遍历处理 #

数组本身就是你需要的对象集合，无需转成带索引的对象。直接遍历数组即可获取每个对象：

// 遍历数组，逐个处理每个元素
deletedItemsArrays.forEach(item => {
  console.log(item); // 输出单个对象，符合预期格式
  // 此处可添加业务逻辑，比如渲染到页面或存储数据
});

2. 生成格式化字符串输出 #

如果需要将对象集合转为示例中的字符串形式输出，可结合map和JSON.stringify实现：

const formattedResult = deletedItemsArrays
  .map(item => JSON.stringify(item))
  .join('\n');

console.log(formattedResult);

执行后输出：

{"product-id":1,"name":"Margherita","price":92}
{"product-id":2,"name":"Farm House","price":138}
{"product-id":3,"name":"CHEESE N CORN","price":200}

3. 错误转换的原因 #

使用{...deletedItemsArrays}将数组转为对象时，JavaScript会把数组的索引作为对象的键，数组元素作为对应的值，因此会生成带0、1、2索引键的对象。这是数组转对象的默认行为，并非Angular特有的问题。

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