如何按索引为JavaScript数组中的对象添加属性

你不需要用splice处理这个需求——splice的作用是增删数组的元素项，而你现在的需求是修改数组内已存在的某个对象的属性，直接通过数组索引拿到对应对象赋值即可，写法更简单性能也更好。

推荐写法（直接修改对象属性） #

数组中存储的是对象的引用，直接访问索引位置的对象新增属性，会直接作用在原对象上：

test = [];

ngOnInit() {
  this.test.push({ "start": 0.1 });
  this.test.push({ "start": 0.2, "end": 0.5 });

  // 直接给0索引位置的对象添加end属性
  this.test[0].end = 0.15;

  this.test.forEach((res, index) => {
    console.log(index + "=" + res.start)
  })

  console.log(this.test);
}

如果一定要用splice的实现方式 #

如果你有特殊场景必须用splice，可以通过splice删除索引0的旧对象，再传入新增了属性的新对象作为替换项：

// splice参数说明：起始索引、要删除的元素个数、要插入的新元素
this.test.splice(0, 1, {
  ...this.test[0], // 展开原对象的所有属性
  end: 0.15 // 新增/覆盖end属性
});

这种写法会生成一个全新的对象替换原位置的元素，不会修改原来的0索引对象，适合有不可变数据要求的场景（比如配合NgRx状态管理时使用）。

运行结果 #

两种写法最终打印的test数组都完全符合你的预期：

[
  {
    "start": 0.1,
    "end": 0.15
  },
  {
    "start": 0.2,
    "end": 0.5
  }
]

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