uView 对象操作

注意

由于JS对象包括的范围非常广,加上ES6又有众多的新特性,很难、也没必要做到囊括所有的类型和情况,这里说的"对象",指的是普通的对象,不包括修改对象原型链, 或者为"Function","Promise"等的情况,请留意。

#对象深度克隆

场景:

  • 我们平时可能会遇到需要通过console.log打印一个对象,至执行打印的时刻,此对象为空,后面的逻辑中对此对象进行了修改赋值,但是我们在控制台直接看到的打印结果 却是修改后的值,这让人匪夷所思,虽然我们可以通过console.log(JSON.parse(JSON.stringify(object)))的形式处理,但是需要写这长长的一串,难免让人心生抵触。

  • 当我们将一个对象(变量A)赋值给另一个变量(变量B)时,修改变量B,因为对象引用的特性,导致A也同时被修改,所以有时候我们需要将A克隆给B,这样修改B的时候,就不会 导致A也被修改。

#deepClone(object = {})

  • object <Object> 需要被克隆的对象
let a = {name: 'mary'
};// 直接赋值,为对象引用,即修改b等于修改a,因为a和b为同一个值
let b = a;b.name = 'juli';
console.log(b); // 结果为 {name: 'juli'}
console.log(a); // 结果为 {name: 'juli'}// 深度克隆
let b = uni.$u.deepClone(a);b.name = 'juli';
console.log(b); // 结果为 {name: 'juli'}
console.log(a); // 结果为 {name: 'mary'}

copy

#对象深度合并

在ES6中,我们可以很方便的使用Object.assign进行对象合并,但这只是浅层的合并,如果对象的属性为数组或者对象的时候,会导致属性内部的值丢失。

注意: 此处合并不同于Object.assign,因为Object.assign(a, b)会修改a的值为最终的结果(这往往不是我们所期望的),但是deepMerge(a, b)并不会修改a的值。

#deepMerge(target = {}, source = {})

  • target <Object> 目标对象
  • source <Object> 源对象

Object.assign浅合并示例:

let a = {info: {name: 'mary'}
}let b = {info: {age: '22'}
}// 使用Object.assign进行合并,注意此时a被修改了
let c = Object.assign(a, b);// 我们期望的结果为:
c = {info: {name: 'mary',age: '22'}
}// 事实上,我们得到的结果却为:
c = {info: {age: '22'}
}

copy

深度合并示例:

let a = {info: {name: 'mary'}
}let b = {info: {age: '22'}
}let c = uni.$u.deepMerge(a, b);// c为我们期望的结果
c = {info: {age: '22',name: 'mary'}
}

copy

#链式读取对象属性

读取属性时,我们需要从一个对象中进行操作,否则就会引起报错,因此uView提供了一个链式属性的读取方式。
当然,我们也可以使用可选链操作符的形式去获取,但是此方式在Vue2template中不适用。

#getProperty(object, key)

// 假设有如下一个对象
const object = {userInfo: {address: {province: '深圳'}}
}// 可以通过如下写法获取province属性
uni.$u.getProperty(object, 'userInfo.address.province')// 可选链操作符形式
console.log(object?.userInfo?.address?.province)

copy

#链式设置对象属性

设置属性时,我们需要从一个对象中进行操作,否则就会引起报错,因此uView提供了一个链式属性的设置方式。

// 设置一个空对象
const object = {}// 链式设置属性
uni.$u.setProperty(object, 'userInfo.address.province')// object将会变成如下对象:
{userInfo: {address: {province: '深圳'}}
}

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

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

相关文章

java每日一题——输出9x9乘法表(答案及编程思路)

前言&#xff1a; 打好基础&#xff0c;daydayup! 题目&#xff1a;输出下图9x9乘法表 编程思路&#xff1a;java只能输出行&#xff0c;不能输出列&#xff0c;所以考虑好每一行输出的内容即可 public class demo {public static void main(String[] args) {for (int i 1; i…

文档审阅批注的合并和对比

#创作灵感# 最近在改论文&#xff0c;Feedback返回的时候&#xff0c;把之前的批注都删了&#xff0c;这就增加了工作量&#xff0c;看起来不方便&#xff0c;所以就需要将删掉的批注全部复原。 那在原来的文档重新在修改一遍&#xff0c;工作量还是很大的&#xff0c;所以这里…

数字新生态:低代码开发的实践应用

低代码开发是一种快速构建软件应用程序的方法&#xff0c;极大地简化了传统编码的流程。本文将探讨数字新生态中低代码开发的实践应用&#xff0c;以及它如何推动业务创新和提高开发效率。 引言 随着信息技术的飞速发展&#xff0c;数字化转型已成为企业和组织的当务之急。但是…

两种方式实现mysql截取年月日

select date_format(now(), %Y-%m-%d) select substring(now(), 1, 10)

三剑客前端教程

前端教程 结构层&#xff08;html&#xff09;表现层&#xff08;css&#xff09;行为层&#xff08;javascript&#xff09; HTML 超文本标记语言&#xff09; HTML&#xff08;超文本标记语言——HyperText Markup Language&#xff09;是构成 Web 世界的一砖一瓦。它定义…

探索PyTorch优化和剪枝技术相关的api函数

torch.nn子模块Utilities解析 clip_grad_norm_ torch.nn.utils.clip_grad_norm_ 是 PyTorch 深度学习框架中的一个函数&#xff0c;它主要用于控制神经网络训练过程中的梯度爆炸问题。这个函数通过裁剪梯度的范数来防止梯度过大&#xff0c;有助于稳定训练过程。 用途 防止…

Dockerfile基本结构及编写详解

文章目录 1 Dockerfile1.1 Dockerfile的基本结构1.2 Dockerfile文件说明1.3 Dockerfile常见命令1.4 build命令1.5 部署微服务1.6 docker-compose部署 1 Dockerfile ​ Dockerfile其实就是我们用来构建Docker镜像的源码&#xff0c;当然这不是所谓的编程源码&#xff0c;而是一…

LeetCode 0447.回旋镖的数量:哈希表

【LetMeFly】447.回旋镖的数量&#xff1a;哈希表 力扣题目链接&#xff1a;https://leetcode.cn/problems/number-of-boomerangs/ 给定平面上 n 对 互不相同 的点 points &#xff0c;其中 points[i] [xi, yi] 。回旋镖 是由点 (i, j, k) 表示的元组 &#xff0c;其中 i 和…

算法-大数相乘

解决算法; * 1. 模拟小学乘法&#xff1a;最简单的乘法竖式手算的累加型&#xff1b; * 2. 分治乘法&#xff1a;最简单的是Karatsuba乘法&#xff0c;一般化以后有Toom-Cook乘法&#xff1b; * 3. 快速傅里叶变换FFT&#xff1a;&#xff08;为了避免精度问题&#xff0c;可…

汽车雷达:实时SAR成像的实现

摘要: 众所周知,点云成像是目前实现汽车雷达感知最流行的方案,尤其是采用多级联实现的4D点云成像雷达,这是目前最有希望实现产品落地的技术方案之一。 今天重点分享关于汽车雷达SAR成像相关技术内容,这也证实了4D点云成像雷达并不一定就是汽车雷达成像唯一的方案,在业内…

CompletableFuture超详解与实践

0.背景 一个接口可能需要调用 N 个其他服务的接口&#xff0c;这在项目开发中还是挺常见的。举个例子&#xff1a;用户请求获取订单信息&#xff0c;可能需要调用用户信息、商品详情、物流信息、商品推荐等接口&#xff0c;最后再汇总数据统一返回。 如果是串行&#xff08;按…

React本地开发时,组件为啥会渲染两次

原因是因为使用了StrictMode &#xff0c; StrictMode 是一个用来突出显示应用程序中潜在问题的工具。与 Fragment 一样&#xff0c;StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。 StrictMode 目前有助于&#xff1a; 识别不安全的生命周期 {#id…

前端如何结合数据库查看本地头像文件,配置静态资源

由于oss过期了&#xff0c;项目中又需要一个上传头像功能&#xff0c;于是研究了一下上传文件至本地&#xff0c;用java将文件存储到本地的代码好写&#xff0c;但是如何利用前端Vue把我难住了&#xff0c;因为之前存在OSS服务器直接查看就可以了&#xff0c;于是记录本文。 后…

数据结构-测试4

一、判断题 1.队列结构的顺序存储会产生假溢出现象。 &#xff08;T&#xff09; 2.度为二的树就是二叉树。(F) 二叉树的度可以小于等于2 3. 栈是插入和删除只能在一端进行的线性表&#xff1b;队列是插入在一端进行&#xff0c;删除在另一端进行的线性表。&#xff08;T&…

如何彻底卸载Microsoft Edge浏览器

一、引语 随着微软推出全新的Edge浏览器&#xff0c;许多用户可能想要尝试或完全切换到其他浏览器。在这篇文章中&#xff0c;我们将向您介绍如何彻底卸载Microsoft Edge浏览器&#xff0c;以确保您的系统干净整洁。 二、通过系统设置卸载 1、首先&#xff0c;右键单击桌面上…

C //练习 1-11 你准备如何测试单词计数程序?如果程序中存在某种错误,那么什么样的输入最可能发现这类错误呢?

C程序设计语言 &#xff08;第二版&#xff09; 练习1-11 练习 1-11 你准备如何测试单词计数程序&#xff1f;如果程序中存在某种错误&#xff0c;那么什么样的输入最可能发现这类错误呢&#xff1f; 注意&#xff1a;代码在win32控制台运行&#xff0c;在不同的IDE环境下&am…

C++模板——(2)函数模板的声明和使用

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 勤奋&#xff0c;机会&#xff0c;&am…

Linux文件系统与日志管理

目录 一、Linux文件系统 1、inode 与 block 详解 1.1 inode 和 block 概述 1.2 inode表的内容 1.3 查看文件的inode号码 1.4 模拟innode号耗尽故障处理 2、访问文件的流程 3、文件恢复 3.1 恢复误删除的ext3格式文件 3.2 恢复误删除的 xfs 格式文件 二、Linux日志…

《BackTrader量化交易图解》第8章:plot 绘制金融图

文章目录 8. plot 绘制金融图8.1 金融分析曲线8.2 多曲线金融指标8.3 Observers 观测子模块8.4 plot 绘图函数的常用参数8.5 买卖点符号和色彩风格 8. plot 绘制金融图 8.1 金融分析曲线 BackTrader内置的plot绘图函数&#xff0c; 通过style参数变量控制不同风格的K线图&…

因为热Key和大Key,Redis终于被压崩了

大家好&#xff0c;我是洋子&#xff0c;今天分享一下在做压测时遇到的很有意思的性能问题以及对应的排查解决方案。这个性能问题的现象为&#xff0c;Redis线上实例不可用&#xff0c;Redis读写均超时 性能问题排查过程 先来看一下问题代码&#xff08;Go语言实现&#xff0…