文章目录
前言
在微信小程序中，每一个页面都有一个独立的js文件，用来实现该页面的业务逻辑。这个js文件通常采用Page()方法来对页面进行注册。其中系统为页面设置了一个名为data的区域，用来存储页面的初始数据，我们将其称为小程序页面的数据区。
小程序页面的数据区是采用对象的形式来进行数据设定的。那么我们该如何操作数据区中的数据呢？
一、输出数据区中的数据：
由于在小程序页面中，关键字this指向这个页面利用Page()方法注册的页面实例，因此要想引用data数据区中的数据，可以采用如下所示的语法格式。
this.data.数据区变量名
例如：页面数据区data中有一个名为title的变量，在控制台中输出该变量的值。
console.log(this.data.title);
二、修改数据区中的数据：
修改小程序页面数据区data中的数据要采用this.setData()方法，该方法的语法格式如下所示。
this.setData({
数据区变量名1:数据,
数据区变量名2:数据,
…
});
1、修改数据区中的基本数据类型数据：
例如：data数据区有一个title数据，修改该变量的值为“商品标题”。
this.setData({
title:'商品标题' //将数据区中的title变量修改为"商品标题"
})
2、修改数据区中的数组数据：
例如：data数据区有一个arr数组，修改该数组中所有数组元素的内容。
this.setData({
arr:['a','b'] //将数据区中的arr数组的元素修改为字符"a"和字符"b"
})
3、修改数据区中的数组元素：
例如：data数据区有一个arr数组，修改该数组中索引值为0的数组元素为字符”A”。
this.setData({
'arr[0]':'A' //将数据区的arr数组中索引值为0的元素改为字符'A'
})
4、修改数据区中的对象成员：
例如：data数据区有一个obj对象，修改该对象中的成员x为3000。
this.setData({
'obj.x':3000 //将数据区的obj对象中的x成员改为3000
})
5、修改数据区中JSON数组中的成员：
例如：data数据区有一个JSON数组student，修改索引值为1的数组元素中的phone成员为”15912345678“。
this.setData({
'student[1].phone':'15912345678'
})
6、结合循环变量修改JSON数组：
例如：data数据区有一个JSON数组student，结合for循环，将该数组中每一个数组元素的sex成员均改为”女“。
for(let i=0;i<this.data.student.length;i++){
this.setData({
['student[' + i + '].sex']:'女'
})
}
总结
在微信小程序中操作数据区，要使用关键字this进行配合。读取数据要使用this.data来实现，修改数据要使用this.setData()方法来实现。
修改数据区中的基本数据类型数据，或者对数组中所有数组元素进行统一修改，都可以直接引用变量名或数组名；若要修改数组元素、对象成员、JSON数组中某个数组元素的成员，都要用引号将其扩住。
若要结合循环改变每一个数组元素中任意成员的值，还用使用 + 与循环变量进行拼接，此时整个拼接的字符串还需要用 [ ] 扩住。
