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

学习教程：微信小程序之加载更多（分页加载）实例 —— 微信小程序实战系列（2）_michael的博客-CSDN博客_微信小程序分页加载数据上拉加载（分页加载） 当用户打开一个页面时，假设后台数据量庞大时，一次性地返回所有数据给客户端，页面的打开速度就会有所下降，而且用户只看上面的内容而不需要看后面的内容时，也浪费用户流量，基于优化的角度来考虑，后台不要一次性返回所有数据，当用户有需要再往下翻的时候，再加载更加数据出来。 业务需求：列表滚动到底部时，继续往上拉，加载更多内容 必备参数：（1）pageinhttps://blog.csdn.net/michael_ouyang/article/details/56846185
在微信小程序的前端开发中，使用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)
  }
})

效果：