微信小程序开发系列(二十)·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;还能与智能物理…

计算机网络面经-UDP为什么比TCP要更快

先说结论&#xff1a; UDP没有流量控制、拥塞控制、没有握手、没有成功确认&#xff0c;一个数据包发过去就不管。TCP开销大一点 具体分析&#xff1a; 这句话准确地描述了UDP&#xff08;User Datagram Protocol&#xff09;和TCP&#xff08;Transmission Control Protoco…

Python Flask 打包成exe 心得体会

一、安装pyinstaller pip install pyinstaller 二、打包主文件 确认需要打包的py文件名&#xff0c; 如app.py在Pycharm输入如下指令&#xff0c;针对app.py进行打包 python -m pyInstaller -F app.py 三、整个项目的所有文件打包 确定主函数为app.py&#xff0c;然后在c…

Go语言中的slice:灵活且强大的数据结构

Go语言的slice是一个非常灵活且强大的数据结构&#xff0c;它提供了对数组的动态大小视图。在本文中&#xff0c;我们将探讨slice的基本概念、操作和一些常见的陷阱&#xff0c;以帮助你更好地理解和使用它。 基本概念 slice是对底层Go数组的抽象表示&#xff0c;它可以动态地…

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

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

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

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

自定义参数校验器(有用)

一、前言 因为我想对于参数的校验制定自己的规则&#xff0c;所以要自定义一个校验器。 好的&#xff0c;开始启动吧 二、元神启动&#xff01; 1. springboot项目引入相关依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId&…

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

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

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

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

SpringBoot集成Swagger3.0

一&#xff1a;前言   Swagger 是一个 RESTful API 的开源框架&#xff0c;它的主要目的是帮助开发者设计、构建、文档化和测试 Web API。Swagger 的核心思想是通过定义和描述 API 的规范、结构和交互方式&#xff0c;以提高 API 的可读性、可靠性和易用性&#xff0c;同时降…

AI推介-大语言模型LLMs论文速览(arXiv方向):2024.03.01-2024.03.05

文章目录~ 1.Language Guided Exploration for RL Agents in Text Environments2.Word Importance Explains How Prompts Affect Language Model Outputs3.Knowledge Graphs as Context Sources for LLM-Based Explanations of Learning Recommendations4.Data Augmentation us…

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;如果受害…