this.setData({id})和this.setData({id:id})有什么区别？ - Web前端

作者：98wpeu发布时间：2026-10-19分类：网页前端技术浏览：2

导读：在微信小程序中，这两种写法在功能上是完全等价的，都会将id变量的值设置到data中的id属性。详细解释：1. this.setData({id})// es6+ 的对象简写语法/...

this.setData({id})和this.setData({id:id})有什么区别？

在微信小程序中，这两种写法在功能上是完全等价的，都会将id变量的值设置到data中的id属性。

详细解释：

1. `this.setData({id})`

// es6+ 的对象简写语法
// 等价于 {id: id}
this.setData({id})

这是ES6的对象属性简写写法，当属性名和变量名相同时可以这样简写。

2. `this.setData({id:id})`

// 传统的对象写法
this.setData({id:id})

这是标准的对象字面量写法。

实际示例：

Page({
  data: {},
  
  onload() {
    const id = 123;
    
    // 两种写法效果完全相同
    this.setData({id});        // ES6简写
    this.setData({id: id});    // 传统写法
    
    // 最终都会得到：data: {id: 123}
  }
})

区别总结：

特性	`{id}`	`{id:id}`
语法版本	ES6+	es5+
可读性	更简洁	更明确
功能	完全一样	完全一样
编译后	会被转译为`{id:id}`	保持不变

使用建议：

简洁场景：变量名和data属性名一致时，推荐使用{id}（更简洁）
清晰场景：如果想让代码更易读，或者团队习惯，可以使用{id:id}
不同名场景：当变量名和属性名不同时，必须使用完整写法：

const UserId = 123;
this.setData({id: userId});  // 必须完整写法

在性能、功能、效果上两者没有任何区别，选择哪种主要取决于个人或团队的编码风格偏好。

标签：有什么区别 Web id setData