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对象数组的操作。掌握了这些基础操作后，您就可以在实际开发中使用它们，让您的小程序功能更加强大和灵活。