setData如何修改对象、数组中的值

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

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

1
2
3
4

需要注意的是，如果是简单变量，这里的参数名可以不加引号。经过测试，可以使用3种方式对data中的对象、数组中的数据进行修改。

# 假设原数据为

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

1
2
3
4
5
6
7

# 方式一

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

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

1
2
3
4

# 方式二

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

    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
    })

1
2
3
4
5
6
7
8
9
10
11
12
13

# 方式三

直接使用字符串，此种方式之前不可以，现在可以了，估计小程序库升级了。注意和第一种方法的对比，推荐还是使用第一种方法。

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

1
2
3
4

# 完整代码

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)

  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

# 效果

!()[https://oss.megabit.co.nz/jifu/uploads/202312041812023.webp]

上次更新: 2024/07/25, 21:16:23

← 微信小程序介绍