微信小程序开发系列(二十)·wxml语法·setData()修改对象类型数据、ES6 提供的展开运算符、delete和rest的用法

目录

1.  新增单个、多个属性

1.1  新增单个属性 

1.2  新增多个属性

2.  修改单个、多个属性

2.1  修改单个属性

2.2  修改多个属性

3.  优化

3.1  ES6 提供的展开运算符

3.2  Object.assign()将多个对象合并为一个对象

4.  删除单个、多个属性

4.1  删除单个属性

4.2  删除多个属性


1.  新增单个、多个属性

        找到cate.js文件,在其中创建一个空对象“userInfo”:

  data:{
    num: 1,
    userInfo: {}
  },

1.1  新增单个属性 

      找到cate.wxml文件,创建一个路径并且创建一个按钮,用于修改对象类型数据:

//创建一条线用于区分
<view class="line"></view>

<view>{{ userInfo.name }}</view>

<button type="warn" bind:tap="updateUserInfo">修改对象类型数据</button>

        找到cate.js文件,定义事件处理函数,首先给对象新增一个属性:

    // 新增单个
    this.setData({
      // 如果给对象新增属性,可以将Key写成数据路径的方式 a.b.c 
      'userInfo.name':'tom'
    })

        此时点击“修改对象类型数据”按钮,会弹出“tom”属性:

1.2  新增多个属性

        找到cate.wxml文件,在创建一个路径:


<view>{{ num }}</view>
<button bind:tap="updateNum">更新 num</button>

<view class="line"></view>

<view>{{ userInfo.name }}</view>
<view>{{ userInfo.age }}</view>
<button type="warn" bind:tap="updateUserInfo">修改对象类型数据</button>

         找到cate.js文件,定义事件处理函数,要想新增多个属性,创建多个路径就可以:


Page({

  data:{
    num: 1,
    userInfo: {}
  },

  // 更新 num
  updateNum(){

  // 获取数据
  // console.log(this.data.num)

  // 通过赋值的方式直接修改数据
  // this.data.num += 1
  // console.log(this.data.num)
  //能够修改数据,但是不能改变页面上的数据

  // setData()方法有两个作用:
  // 1.  更新数据
  // 2.  驱动视图更新
  this.setData({
    // key:是需要更新的数据
    // value:是最新的值
    num: this.data.num + 1   
  })
  console.log(this.data.num)
  },

  //更新 userInfo
  updateUserInfo(){

    // 新增单个、多个属性
    this.setData({
      // 如果给对象新增属性,可以将Key写成数据路径的方式 a.b.c 
      'userInfo.name':'tom',
      'userInfo.age':10
    })
  }
}) 

        此时点击“修改对象类型数据”按钮,会弹出“tom”和“10”的属性: 

2.  修改单个、多个属性

2.1  修改单个属性

        找到cate.js文件,在data中给userInfo赋初始属性:

  data:{
    num: 1,
    userInfo: {
      name:'tom',
      age:'10'
    }
  },

        修改属性仍可以使用this.setData进行修改:

    // 修改单个
    this.setData({
      // 如果需要修改对象属性,可以将Key写成数据路径的方式 a.b.c 
      'userInfo.name':'jerry'
    })

         此时点击“修改对象类型数据”按钮,会发现“tom”属性修改为“jerry”:

2.2  修改多个属性

        修改多个属性和新增多个属性相似,也是需要创建多个路径,对路径进行修改:

    // 修改单个、多个属性
    this.setData({
      // 如果需要修改对象属性,可以将Key写成数据路径的方式 a.b.c 
      'userInfo.name':'jerry',
      'userInfo.age':20
    })

        此时点击“修改对象类型数据”按钮,会发现“tom”属性修改为“jerry”,“10”属性修改为“20”:

3.  优化

        根据以上我们可以发现,如果新增和修改都是用数据路径,要是新增和修改的数据量比较小的时候还能一个个敲上去,但是如果新增和修改的数据过多,每次都写数据路径就太过麻烦。

3.1  ES6 提供的展开运算符

        ES6 提供的展开运算符,通过展开运算符能够将对象中的属性复制给另一个对象,后面的属性会覆盖前面的属性:

    // ES6 提供的展开运算符
    // 通过展开运算符能够将对象中的属性复制给另一个对象
    // 后面的属性会覆盖前面的属性
    const userInfo = {
      ...this.data.userInfo,
      name:'jerry',
      age:18
    }

    this.setData({
      userInfo
    })

        通过在const对userInfo的值进行修改覆盖,在通过this操作使const中的userInfo复制给data里的userInfo实现属性的修改:

        此时点击“修改对象类型数据”按钮,会发现“tom”属性修改为“jerry”,“10”属性修改为“18”:

3.2  Object.assign()将多个对象合并为一个对象

        从后往前合并,若是遇到相同属性,以后面的为准:

    // Object.assign()将多个对象合并为一个对象
    // 从后往前合并,若是遇到相同属性,以后面的为准
    const userInfo = Object.assign(this.data.userInfo, { name:'jerry'},{ name:'Lihua'},{ age:18 })
    this.setData({
      userInfo
    })

        例如:我们创建两个“name”,属性:

        此时点击“修改对象类型数据”按钮,会发现“tom”属性修改为“Lihua”,“10”属性修改为“18”:

4.  删除单个、多个属性

4.1  删除单个属性

        使用“delete”进行删除属性:

    delete this.data.userInfo.age

         不过,此时点击“修改对象类型数据”按钮,会发现页面数据并没有消失:

        我们可以使用:

    console.log(this.data.userInfo)

        来打印输出数据,会发现此时已将“age”属性删除,但是页面上未进行更改:

        根据以上我们可以发现此时数据只有“name”的属性,那么我们可以将删除完的数据直接复制给userIfo,让其进行显示:

    delete this.data.userInfo.age
    // console.log(this.data.userInfo)
    this.setData({
      userInfo: this.data.userInfo
    })

        此时点击“修改对象类型数据”按钮,会发现页面数据“age”已经删除:

4.2  删除多个属性

        删除多个属性可以采用 rest 剩余参数。

        此时数据有些少,我们可以先找到“data”在其中在加入一个属性:

  data:{
    num: 1,
    userInfo: {
      name:'tom',
      age:10,
      test:111
    }
  },

         要想使其在页面显示,需要再找到cate.wxml文件,编写代码:

<view>{{ userInfo.test }}</view>

      使用rest:

    // 删除多个属性
    // 剩余属性保存在rest
    const { age,test, ...rest  } = this.data.userInfo
    this.setData({
      userInfo: rest
    })  

        此时点击“修改对象类型数据”按钮,会发现此时只有“name”保留:

微信小程序开发_时光の尘的博客-CSDN博客

最近更新

  1. TCP协议是安全的吗?

    2024-03-11 23:12:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-11 23:12:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-11 23:12:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-11 23:12:02       18 阅读

热门阅读

  1. RocketMQ消息堆积问题

    2024-03-11 23:12:02       22 阅读
  2. Android获取图片缩略图尺寸问题

    2024-03-11 23:12:02       24 阅读
  3. CentOS上安装JDK的详细教程

    2024-03-11 23:12:02       25 阅读
  4. python Plotly可视化

    2024-03-11 23:12:02       22 阅读
  5. Android FTPServer监听摄像机文件上传处理

    2024-03-11 23:12:02       24 阅读
  6. 最短路dp,LeetCode 1976. 到达目的地的方案数

    2024-03-11 23:12:02       18 阅读
  7. python界面开发 - filedialog 文件选择对话框

    2024-03-11 23:12:02       21 阅读