微信小程序开发系列(二十)·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: {}},// 更新 numupdateNum(){// 获取数据// 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)},//更新 userInfoupdateUserInfo(){// 新增单个、多个属性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:

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/725661.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

搬运机器人助力制造业转型升级

随着传统制造业的转型升级&#xff0c;智能化和多样化成为行业发展的新趋势。在这个过程中&#xff0c;富唯智能搬运机器人作为智能工厂的重要搬运机器人&#xff0c;展现出了卓越的性能和适应性。 它不仅能够应对各种材料、形状和重量的搬运装卸需求&#xff0c;还能与智能物理…

跨链桥的类型总结/相关的名词解释

首先&#xff0c;这是一个会持续更新的文章&#xff0c;我会不断把自己了解到的跨链桥名词解释更新在这里。 跨链桥类型 基于传输方式分类&#xff1a; Lock and Mint&#xff1a;在一条链上锁定资产&#xff0c;在另一条链上铸造等价资产liqidity pool&#xff1a;在不同链…

数字化转型导师坚鹏:金融科技咨询方法论

金融科技咨询方法论 ——方法、做法、演法、心法 课程背景&#xff1a; 数字化转型背景下&#xff0c;很多机构存在以下问题&#xff1a; 不知道先进的金融科技咨询方法论&#xff1f; 不知道如何运作金融科技咨询项目&#xff1f; 不知道如何汇报咨询项目关键成果&…

第五十一回 李逵打死殷天赐 柴进失陷高唐州-AI发展历程和常用框架

朱仝说只要杀了李逵就上梁山&#xff0c;柴进就劝李逵先在庄上住一段时间&#xff0c;先让朱仝、雷横和吴用回了梁山。 李逵在柴进庄上住了一个月&#xff0c;碰到柴进的叔叔柴皇城病重来信叫他去一趟&#xff0c;于是李逵就随着柴进去了高唐州。 柴皇城被殷天锡气死&#xf…

世界级通讯社发稿-法新社海外发稿渠道-大舍传媒

世界级通讯社发稿-法新社海外发稿渠道-大舍传媒 美联社&#xff1a;全球最大的通讯社之一 美联社&#xff08;Associated Press&#xff09;是全球最大的通讯社之一&#xff0c;成立于1846年&#xff0c;总部位于美国纽约。该社拥有一支庞大的全球新闻团队&#xff0c;涵盖了…

mysql8安装配置(最新版)

目录 一、下载mysql8 二、安装mysql8 三、配置mysql 一、下载mysql8 下载链接&#xff1a;https://pan.quark.cn/s/58d9072e51c4 二、安装mysql8 双击msi文件 选择custom 根据所需选择组件 修改安装路径 选中execute&#xff0c;安装&#xff0c;弹出提示安装VS的提示框之后…

MYSQL5.7报1205 - Lock wait timeout exceeded; try restarting transaction

简介 今天使用navicate操作添加时&#xff0c;mysql报错误&#xff0c;错误如下 原因 这个问题的原因是在mysql中产生了事务A&#xff0c;执行了修改的语句&#xff0c;比如&#xff1a; update t1 set aget18 where id1;此时事务并未进行提交&#xff0c;事务B开始运行&am…

自学高效备考2024年AMC10:2000-2023年1250道AMC10真题解析

我们今天继续来随机看5道AMC10真题&#xff0c;以及详细解析&#xff0c;这些题目来自1250道完整的官方历年AMC10真题库。通过系统研究和吃透AMC10的历年真题&#xff0c;参加AMC10的竞赛就能拿到好名次。 即使不参加AMC10竞赛&#xff0c;初中和高中数学一定会学得比较轻松、…

PTA L2-001 紧急救援

作为一个城市的应急救援队伍的负责人&#xff0c;你有一张特殊的全国地图。在地图上显示有多个分散的城市和一些连接城市的快速道路。每个城市的救援队数量和每一条连接两个城市的快速道路长度都标在地图上。当其他城市有紧急求助电话给你的时候&#xff0c;你的任务是带领你的…

openGauss学习笔记-237 openGauss性能调优-SQL调优-SQL执行计划介绍-概述

文章目录 openGauss学习笔记-237 openGauss性能调优-SQL调优-SQL执行计划介绍-概述237.1 SQL执行计划概述237.1.1 执行计划显示信息 openGauss学习笔记-237 openGauss性能调优-SQL调优-SQL执行计划介绍-概述 237.1 SQL执行计划概述 SQL执行计划是一个节点树&#xff0c;显示o…

Redis核心数据结构之SDS和链表(三)

SDS与C字符串的区别 二进制安全 C字符串中的字符必须符合某种编码(比如ASCII),并且除了字符串的末尾之外&#xff0c;字符串里面不能包含空字符&#xff0c;否则最先被程序读入的空字符将被误认为是字符串结尾&#xff0c;这些限制使得C字符串只能保存文本数据&#xff0c;而…

Flyway 9.22.3 + springboot3 + MySQL8.0+,简单使用

文章目录 flyway的依赖配置ieda 启动&#xff01;&#xff01;&#xff01; 关于这篇文章主要是自己在使用flyway时遇到的一些问题以及最终的解决方法 当然包括所有的配置&#xff0c;主要目的是记录一下防止下次使用的时候忘记 flyway的依赖 这里 springboot 3 具体版本不再描…

#define MODIFY_REG(REG, CLEARMASK, SETMASK)

#define MODIFY_REG(REG, CLEARMASK, SETMASK) WRITE_REG((REG), (((READ_REG(REG)) & (~(CLEARMASK))) | (SETMASK))) 这个宏 MODIFY_REG 是在嵌入式编程中&#xff0c;它用于修改一个寄存器的特定位&#xff0c;而不影响其他位。这个宏接受三个参数&#xff…

中小企业如何降低网络攻击和数据泄露的风险?

德迅云安全收集了Bleeping Computer 网站消息&#xff0c; Arctic Wolf 表示 Akira 勒索软件组织的攻击目标瞄准了中小型企业&#xff0c;自 2023 年 3 月以来&#xff0c;该团伙成功入侵了多家组织&#xff0c;索要的赎金从 20 万美元到 400 多万美元不等&#xff0c;如果受害…

leetcode2

翻转链表 struct ListNode* reverseList(struct ListNode* head) {struct ListNode* prev NULL;struct ListNode* curr head;while (curr ! NULL) {struct ListNode* nextTemp curr->next;//nextTemp的作用是为了记录&#xff0c;以便再反转后可以curr->next prev; …

大数据开发-Hadoop之HDFS高级应用

文章目录 HDFS回收站HDFS的安全模式定时上传数据至HDFSHDFS的高可用和高扩展HDFS写数据过程源码剖析 HDFS回收站 HDFS会为每个用户创建一个回收站目录:/user/用户名/.Trash/回收站中的数据都会有一个默认的保存周期&#xff0c;过期未恢复则会被HDFS自动彻底删除默认情况下HDF…

数智驱动“坐商”变“行商”,安通控股迈向综合物流服务新高度

在全球经济增长放缓的大环境下&#xff0c;集装箱运输市场也面临供需双弱的新挑战。 国内内贸集装箱物流企业TOP3——安通控股股份有限公司&#xff08;以下简称“安通控股”&#xff09;激流勇进&#xff0c;积极推进营销理念从“业务操作型”向“客户营销型”转变、从传统的…

机器学习-启航

文章目录 原理分析机器学习的两种典型任务机器学习分类总结数据机器学习分类解读简单复杂 原理分析 马克思主义哲学-规律篇 规律客观存在&#xff0c;万事万物皆有规律。 机器学习则是多维角度拆解分析复杂事实数据&#xff0c;发现复杂事实背后的规律&#xff0c;然后将规律用…

C++小记 -链表

链表 文章目录 链表链表基础理论链表的类型单链表双链表循环链表 链表的存储方式链表的定义链表的操作添加节点删除节点 性能分析构建链表删除节点&#xff08;内存泄漏的坑&#xff09;1.直接移除2.使用虚拟头结点3.delete指针后&#xff0c;要将指针置为NULL&#xff01;&…

STM32第九课:ADC单通道模数转换

一、ADC简介 ADC是Analog-to-DigitalConverter的缩写。指模/数转换器或者模拟/数字转换器。是指将连续变量的模拟信号转换为离散的数字信号的器件。典型的模拟数字转换器将模拟信号转换为表示一定比例电压值的数字信号。 STM32f103 系列有3个ADC&#xff0c;精度为12位&#xf…