微信小程序this.setData如何修改对象、数组中的值

原创

软件工程小施同学 2022-03-27 18:20:32 博主文章分类：微信小程序 ©著作权

©著作权归作者所有：来自51CTO博客作者软件工程小施同学的原创作品，请联系作者获取转载授权，否则将追究法律责任

在微信小程序的前端开发中，使用this.setData方法修改data中的值，其格式为

this.setData({   '参数名1': 值1,   '参数名2': 值2)}

需要注意的是，如果是简单变量，这里的参数名可以不加引号。

经过测试，可以使用3种方式对data中的对象、数组中的数据进行修改。

假设原数据为：

data: {    user_info:{      name: 'li',      age: 10    },    cars:['nio', 'bmw', 'wolks']},

方式一：

使用['字符串']，例如

this.setData({      ['user_info.age']: 20,      ['cars[0]']: 'tesla'})

方式二：

构造变量，重新赋值，例如

    var temp = this.data.user_info    temp.age = 30        this.setData({      user_info: temp    })

    var temp = this.data.cars    temp[0] = 'volvo'        this.setData({      cars: temp    })

方式三：

直接使用字符串，此种方式之前不可以，现在可以了，估计小程序库升级了。

注意和第一种方法的对比，推荐还是使用第一种方法。

this.setData({      'user_info.age': 40,      'cars[0]': 'ford'})

完整代码：

Page({
  /**   * 页面的初始数据   */  data: {
    user_info:{      name: 'li',      age: 10    },
    cars:['nio', 'bmw', 'wolks']
  },
  change_data: function(){
    console.log('对象-修改前：', this.data.user_info)        this.setData({      ['user_info.age']: 20    })    console.log('对象-修改后1：', this.data.user_info)

    var temp = this.data.user_info    temp.age = 30    this.setData({      user_info: temp    })    console.log('对象-修改后2：', this.data.user_info)

    this.setData({      'user_info.age': 40    })    console.log('对象-修改后3：', this.data.user_info)


    console.log('数组-修改前：', this.data.cars)        this.setData({      ['cars[0]']: 'tesla'    })    console.log('数组-修改后1：', this.data.cars)
    var temp = this.data.cars    temp[0] = 'volvo'    this.setData({      cars: temp    })    console.log('数组-修改后2：', this.data.cars)
    this.setData({      'cars[0]': 'ford'    })    console.log('数组-修改后3：', this.data.cars)
  }})