如何点击按钮新增数组对象并自增其id与content属性的数值

你可以通过在Truck类的构造函数中维护自增计数器、绑定按钮点击事件来实现需求，完整代码如下：

完整Truck类实现 #

class Truck {
  constructor(initialList) {
    // 存储初始列表数据
    this.list = initialList;
    // 计算初始计数器值：取现有列表最大id+1，无初始数据则默认从1开始
    this.nextId = initialList.length ? Math.max(...initialList.map(item => item.id)) + 1 : 1;
    // 绑定新增按钮点击事件，#addBtn替换为你实际的按钮DOM选择器
    document.querySelector('#addBtn').addEventListener('click', () => this.addNewItem());
  }

  // 新增元素逻辑
  addNewItem() {
    this.list.push({
      id: this.nextId,
      content: `Truck ${this.nextId}`
    });
    // 计数器自增为下一次新增做准备
    this.nextId++;
    // 此处可添加你自己的视图更新逻辑，触发页面重渲染
    console.log('当前列表数据：', this.list);
  }
}

初始化调用 #

// 初始传入第一个元素即可
var groups = new Truck([
  {id: 1, content: `Truck 1`}
]);

效果验证 #

每次点击绑定的新增按钮，就会自动向groups.list中追加一个id和content数值依次自增的对象，点击3次后就能得到你给出的最终数组效果。

注意事项 #

• 代码中的#addBtn需要替换为你页面中实际触发新增的按钮选择器
• 如果你不需要初始默认的第一个元素，初始化时直接传入空数组new Truck([])即可，第一次点击会自动生成id为1的对象
• 新增元素后如果需要同步更新页面视图，直接在addNewItem方法末尾调用你的视图渲染函数即可

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