小程序：如何动态增加删除JSON对象数组「附代码」

1. 前言

小程序已经成为我们日常生活中使用频率很高的一种应用。在小程序的开发中，经常会涉及JSON对象数组增删的操作。如何动态增加和删除JSON对象数组，成为了初学者和开发者们必须掌握的操作之一。本文将以实践为主，讲解如何在小程序中实现动态增加和删除JSON对象数组。

2. 动态增加JSON对象数组

2.1 添加数据

增加JSON对象数组的基本操作就是往数组中添加数据了。下面我们来看一个示例代码，来实现JSON对象数组动态添加数据的功能。

Page({
  data: {
    productList: [
      {
        id: 1,
        name: '产品1',
        price: 10
      },
      {
        id: 2,
        name: '产品2',
        price: 20
      },
      {
        id: 3,
        name: '产品3',
        price: 30
      }
    ]
  },
  // 增加产品
  addProduct: function(){
    var productList = this.data.productList;
    // 模拟获取到新增产品数据
    var product = {
      id: productList.length + 1,
      name: '新增产品' + (productList.length + 1),
      price: 10 + productList.length
    };
    // 添加到产品列表末尾
    productList.push(product);
    this.setData({
      productList: productList
    });
  }
})  

以上示例代码中我们声明了一个数组`productList`，里面包含了三个对象。通过`addProduct`方法，在末尾增加了一个新的产品。新增的产品对象属性`id`为当前产品列表长度加1，名称为`新增产品x`，价格为10加上当前产品列表长度。页面渲染在使用渲染循环遍历数组的方式展示。渲染方式可以参考下面的示例：

// wxml代码
<view wx:for="{{productList}}" wx:key="id">
  <view>{{item.id}}-{{item.name}}-{{item.price}}元</view>
</view>

添加完成后，可以在页面中查看您新增的产品内容。

2.2 更新数据

更新数据是JSON对象数组的另一种重要操作。假设您的系统里面有一个产品列表，并且有一个列为状态，现在您需要修改其中一个产品的状态。在下面的示例代码中，我们将变更产品列表第二个产品的状态值，修改为“已下架”。

Page({
  data: {
    productList: [
      {
        id: 1,
        name: '产品1',
        status: '上架'
      },
      {
        id: 2,
        name: '产品2',
        status: '上架'
      },
      {
        id: 3,
        name: '产品3',
        status: '上架'
      }
    ]
  },
  // 修改产品状态
  updateStatus: function(){
    var productList = this.data.productList;
    for(var i = 0; i < productList.length; i++){
      if(productList[i].id === 2){
        productList[i].status = '已下架';
        break;
      }
    }
    this.setData({
      productList: productList
    });
  }
})  

以上示例代码中，我们通过循环数组找到ID为2的产品，并将其状态修改为“已下架”，页面会立即渲染出相应的变化。

3. 动态删除JSON对象数组

3.1 删除指定数据

删除JSON对象数组的另一种重要操作是删除指定的数据。在下面的示例代码中，我们将删除产品列表中ID为2的产品。

Page({
  data: {
    productList: [
      {
        id: 1,
        name: '产品1',
        price: 10
      },
      {
        id: 2,
        name: '产品2',
        price: 20
      },
      {
        id: 3,
        name: '产品3',
        price: 30
      }
    ]
  },
  // 删除指定产品
  deleteProduct: function(){
    var productList = this.data.productList;
    for(var i = 0; i < productList.length; i++){
      if(productList[i].id === 2){
        productList.splice(i,1);
        break;
      }
    }
    this.setData({
      productList: productList
    });
  }
}) 

以上示例代码中，我们通过循环数组找到ID为2的产品，并将其从数组中删除，页面会在渲染时去掉删除后的产品。该方法使用了JavaScript原生splice方法。数组splice方法：从数组中删除元素,参数1 加入或删除的起始位置,参数2删除的个数（可省略）,参数N可选，可替换加入的内容，N组数类型值。

3.2 删除多个数据

接下来是删除多个数据的场景，有时候我们需要批量删除产品。通过以下示例代码，可以删除选中的多个产品。

Page({
  data: {
    productList: [
      {
        id: 1,
        name: '产品1',
        price: 10,
        checked: false
      },
      {
        id: 2,
        name: '产品2',
        price: 20,
        checked: false
      },
      {
        id: 3,
        name: '产品3',
        price: 30,
        checked: false
      }
    ]
  },
  // 选中产品
  selectProduct: function(e){
    var productList = this.data.productList;
    var index = e.currentTarget.dataset.index;
    productList[index].checked = !productList[index].checked;
    this.setData({
      productList: productList
    });
  },
  // 删除选中产品
  deleteSelected: function(){
    var productList = this.data.productList;
    for(var i = productList.length - 1; i >= 0; i--){
      if(productList[i].checked){
        productList.splice(i, 1);
      }
    }
    this.setData({
      productList: productList
    });
  }
}) 

在以上示例代码中，我们添加了每个产品对象的属性`checked`，初始状态均为`false`。当我们选中某个产品，`checked`属性的状态会切换为`true`。在“删除选中产品”方法中，我们通过逆序循环的方式删除已选中了的产品。

4. 总结

JSON对象数组的动态增删操作，是小程序开发中非常重要的一个环节。我们通过以上示例代码，演示了如何在小程序中实现动态增加和删除JSON对象数组的操作。掌握了这些基础操作后，您就可以在实际开发中使用它们，让您的小程序功能更加强大和灵活。