小程序setData动态key的写法-即速应用

小程序setData动态key的写法

浏览量：2738 时间：2020-01-10 来源：黄河爱浪

setData 是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。
本篇文章主要说一说 setData 的正确使用和动态 key 的使用。

Page.prototype.setData(Object data, Function callback)

#1 什么时候应该使用 setData 函数？

#2 常用的 setData 函数使用方法

（1）修改数组的指定项值

（2）修改对象的指定属性值

（3）callback 函数的使用

#3 动态 key 的写法

Page.prototype.setData(Object data, Function callback)
说明：setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。
setData 函数参数说明：
字段类型必填描述
data Object 是这次要改变的数据
callback Function 否 setData引起的界面更新渲染完毕后的回调函数

#1 什么时候应该使用 setData 函数？

有需要更新视图时才使用。若无需修改视图，可直接写 this.data.xxx='xx'；

#2 常用的 setData 函数使用方法

先上一段默认的数据

Page({  data: {    basic:{      name:'helang',      email:'helang.love@qq.com',      age:24    },    hobby: ['爬山', '游泳', '阅读'],    job:'web前端工程师'  },  onLoad: function () {       }})

（1）修改数组的指定项值

/*    方法一：先修改数组，后更新视图    ps:如果数组中有大量值修改时推荐使用该方法*/this.data.hobby[0]="写代码";this.setData({    "hobby": this.data.hobby});/*    方法二：指定数组项更新    ps:如果只有某一项发生改变时推荐使用该方法*/this.setData({    "hobby[0]":'写代码'});

（2）修改对象的指定属性值

/*    方法一：先修改对象的值，后更新视图    ps:如果对象中有大量值修改时推荐使用该方法*/this.data.basic.email="1846492969@qq.com";this.setData({    "basic":this.data.basic})/*    方法二：指定数组项更新    ps:如果只有某一项发生改变时推荐使用该方法*/this.setData({    "basic.email": "1846492969@qq.com"})

（3）callback 函数的使用

/*    常规写法*/this.setData({    "job": "web前端"})console.log(this.data.job);/*     使用 callback 函数写法。    如果有需要在更新视图之后运行的代码，推荐使用该方法。功能表现上与 上述 写法一致。*/this.setData({    "job": "web前端"},()={    console.log(this.data.job);})

#3 动态 key 的写法

有些时候，使用动态 key 的要求可能是因为后端，也有可能是为使代码美观。

小编在遇到该需求时，写下了如下代码：

let key ="basic.name";this.setData({    key: "河浪"})

结果悲剧了，没能成功的更新视图上的 {{basic.name}} 值，结果是在 this.data 属性中新增加了一个 key:"河浪" 的值。

NO NO NO，这不是我想要的。但当时也没多想，通过一个个写 key 的方式完成了功能需求。

正确的写法应该是这样的！

let key ="basic.name";this.setData({    [key]: "河浪"})

那么，现在用动态 key 的方式来一波实际点的骚操作吧。

let { keys,values} = {    keys:["basic.name", "hobby[1]", "job"],    values:["河浪", "写代码", "web前端"]};keys.forEach((item,index)={      this.setData({        [item]: values[index]    })});

当然，上面的代码只是为了演示动态 key 的使用，如果知道要修改那些 key 的情况下，推荐使用在 setData 函数中传入多个 key。

在文章的结尾附上与本篇文章有关的官方文档地址：