【微信小程序】修改变量的各种方法

本文详细介绍了在前端开发中如何使用JavaScript进行数据的前置处理以及对象和数组的修改操作,包括直接赋值、通过索引或变量修改数组元素,以及状态管理的最佳实践。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前置数据

假设存在如下数据

data: {
  name: '小明',
  detail: {
    age: 20,
    skill: ['Java', 'C']
  },
  hobby: ['唱跳', '篮球', 'Rap']
}

修改普通变量

this.setData({
  name: '小蔡'
})

对象

修改对象
this.setData({
  'detail.age': 18,
  'detail.skill[0]': 'Go'
})

// 如果下标是个变量,KEY需要使用中括号包裹起来
let index = 1;
this.setData({
  ['detail.skill[' + index + ']']: 'Rust'
})
删除对象中的元素
delete this.data.detail.age
this.setData({
	'detail': this.data.detail
})

数组

修改数组
let index = 0;
this.setData({
  'hobby['+ index +']': '唱',
  [`hobby[${index}]`]: '跳舞'
})
向数组中添加元素
data: {
	brightData: [
		{id: 1, data: 10},
		{id: 2, data: 20},
	]
}

this.setData({
	'brightData': this.data.brightData.concat({id: 3, data: 30})
})
删除数组中的元素
// 元素索引
let index = 1;
this.data.arr.splice(index, 1);
this.setData({
	arr: this.data.arr
})
### 微信小程序全局变量 `globalData` 的设置与使用 #### 设置全局变量微信小程序中,可以通过 `app.js` 文件中的 `App()` 函数实例化对象来定义全局变量 `globalData`。此对象可以包含任意数量的属性,并在整个小程序范围内可用。 以下是具体的实现方式: ```javascript // app.js App({ onLaunch: function() { // 小程序启动时执行的初始化操作 console.log('App Launch'); // 动态设置 globalData 属性 this.globalData.token = 'abc123'; this.globalData.isLogin = true; }, globalData: { userInfo: null, token: null, isLogin: false } }); ``` 上述代码展示了如何在 `app.js` 中初始化并动态修改 `globalData` 的属性[^1]。 --- #### 访问全局变量 要在页面或其他模块中访问 `globalData`,需先调用 `getApp()` 方法获取应用实例,然后通过该实例访问 `globalData` 对象及其属性。 以下是一个完整的示例: ```javascript // pages/index/index.js Page({ onLoad: function() { const app = getApp(); // 输出全局数据到控制台 console.log('全局数据:', app.globalData); console.log('用户信息:', app.globalData.userInfo); // 判断登录状态 if (app.globalData.isLogin) { console.log('当前用户已登录'); } else { console.log('当前用户未登录'); } } }); ``` 以上代码演示了如何在一个页面加载时读取 `globalData` 并判断用户的登录状态[^3]。 --- #### 修改全局变量 如果需要在某个页面或逻辑中更新 `globalData` 的,则同样需要通过 `getApp()` 获取应用实例后再对其进行赋。 下面展示了一个修改 `globalData` 的例子: ```javascript // pages/userInfo/userInfo.js Page({ setUserInfo: function(userInfo) { const app = getApp(); // 更新 globalData 中的 userInfo 属性 app.globalData.userInfo = userInfo; // 打印确认更新成功 console.log('用户信息已更新为:', app.globalData.userInfo); } }); ``` 这段代码说明了如何在特定场景下(如用户授权后)更新 `globalData` 中存储的信息[^5]。 --- #### 解决异步问题 需要注意的是,由于 `onLaunch` 生命周期函数可能涉及网络请求等耗时操作,因此可能导致某些页面无法及时获取最新的 `globalData` 数据。此时可通过监听事件等方式延迟页面逻辑执行时间,直到所需的数据准备完毕为止。 一种常见的解决方案是在 `onLaunch` 完成所有必要的初始化工作后触发自定义事件通知各页面继续后续流程。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值