uni-app:js实现数组中的相关处理-数组复制
一、slice方法-浅拷贝
使用分析
- 创建一个原数组的浅拷贝,对新数组的修改不会影响到原数组
slice()方法创建了一个原数组的浅拷贝,这意味着新数组和原数组中的对象引用是相同的。因此,当你修改新数组中的对象时,原数组中相应位置的对象也会受到影响。
原始数据

①对数组的项直接进行修改,不会影响原数组
效果展示
复制原数组,对新数组的第一项进行替换
修改首项输出数据

核心代码
const newArray = array.slice();
newArray[0] = {id: -1,name: '被修改项',age: 18}; //对新数组进行修改
完整代码
<template><view></view>
</template>
<script>export default {data() {return {}},methods: {},onLoad() {const array = [{id: 0,name: '张三',age: 18},{id: 1,name: '李四',age: 28},{id: 2,name: '王五',age: 38},{id: 3,name: '赵六',age: 48}]; const newArray = array.slice();newArray[0] = {id: -1,name: '被修改项',age: 18}; //对新数组进行修改console.log("原数组",array); // 原数组console.log("新数组",newArray); // 打印数组,可以看到新的对象被成功添加}};
</script>
<style></style>
②对数组项中的对象进行修改,会影响原数组
效果展示
复制原数组,对新数组的第一项对象的name值进行修改
修改数组中第一个对象的name输出值

核心代码
const newArray = array.slice();
newArray[0].name = '修改具体对象值的name'; //对新数组的对象进行修改
完整代码
<template><view></view>
</template>
<script>export default {data() {return {}},methods: {},onLoad() {const array = [{id: 0,name: '张三',age: 18},{id: 1,name: '李四',age: 28},{id: 2,name: '王五',age: 38},{id: 3,name: '赵六',age: 48}]; const newArray = array.slice();newArray[0].name = '修改具体对象值的name';//对新数组的对象进行修改console.log("原数组",array); // 原数组console.log("新数组",newArray); // 打印数组,可以看到新的对象被成功添加 }};
</script>
<style></style>
二、concat方法-浅拷贝
使用分析
- 同slice的使用类似
- 创建一个原数组的浅拷贝,并返回一个新数组,对新数组的修改不会影响到原数组。
- concat
()方法创建了一个原数组的浅拷贝,这意味着新数组和原数组中的对象引用是相同的。因此,当你修改新数组中的对象时,原数组中相应位置的对象也会受到影响。
原始数据

①对数组的项直接进行修改,不会影响原数组
效果展示
复制原数组,对新数组的第一项进行替换
修改首项输出数据

核心代码
const newArray = array.concat();
newArray[0] = {id: -1,name: 'concat被修改项',age: 18}; //对新数组进行修改
完整代码
<template><view></view>
</template>
<script>export default {data() {return {}},methods: {},onLoad() {const array = [{id: 0,name: '张三',age: 18},{id: 1,name: '李四',age: 28},{id: 2,name: '王五',age: 38},{id: 3,name: '赵六',age: 48}]; const newArray = array.concat();newArray[0] = {id: -1,name: 'concat被修改项',age: 18}; //对新数组进行修改console.log("原数组",array); // 原数组console.log("新数组",newArray); // 打印数组,可以看到新的对象被成功添加}};
</script>
<style></style>
②对数组项中的对象进行修改,会影响原数组
效果展示
复制原数组,对新数组的第一项对象的name值进行修改
修改数组中第一个对象的name输出值

核心代码
const newArray = array.concat();
newArray[0].name = 'concat修改具体对象值的name'; //对新数组的对象进行修改
完整代码
<template><view></view>
</template>
<script>export default {data() {return {}},methods: {},onLoad() {const array = [{id: 0,name: '张三',age: 18},{id: 1,name: '李四',age: 28},{id: 2,name: '王五',age: 38},{id: 3,name: '赵六',age: 48}]; const newArray = array.concat();newArray[0].name = 'concat修改具体对象值的name';//对新数组的对象进行修改console.log("原数组",array); // 原数组console.log("新数组",newArray); // 打印数组,可以看到新的对象被成功添加}};
</script>
<style></style>
三、使用展开运算符(Spread Operator)-浅拷贝
使用分析
- 同前面几种浅拷贝的使用类似
- 创建一个原数组的浅拷贝,并返回一个新数组,对新数组的修改不会影响到原数组。
- 展开运算符 方法创建了一个原数组的浅拷贝,这意味着新数组和原数组中的对象引用是相同的。因此,当你修改新数组中的对象时,原数组中相应位置的对象也会受到影响。
语法
const newArray = [...array];
使用方法完全同上,不再举例
四、使用Array.from-浅拷贝
使用分析
- 同前面几种浅拷贝的使用类似
- 创建一个原数组的浅拷贝,并返回一个新数组,对新数组的修改不会影响到原数组。
- Array.from方法创建了一个原数组的浅拷贝,这意味着新数组和原数组中的对象引用是相同的。因此,当你修改新数组中的对象时,原数组中相应位置的对象也会受到影响。
语法
const newArray = Array.from(array);
使用方法完全同上,不再举例
五、解决修改对象时原数组修改的问题-深拷贝(这里使用JSON 序列化和反序列化)
解决这种问题可以采用深拷贝,在 JavaScript 中,实现深拷贝最简单的方法是使用JSON.parse(JSON.stringify(array))
效果展示
复制原数组,对新数组的第一项对象的name值进行修改
修改数组中第一个对象的name输出值

核心代码
const newArray = JSON.parse(JSON.stringify(array));
newArray[0].name = '修改具体对象值的name';//对新数组的对象进行修改
完整代码
<template><view></view>
</template>
<script>export default {data() {return {}},methods: {},onLoad() {const array = [{id: 0,name: '张三',age: 18},{id: 1,name: '李四',age: 28},{id: 2,name: '王五',age: 38},{id: 3,name: '赵六',age: 48}]; const newArray = JSON.parse(JSON.stringify(array));newArray[0].name = '修改具体对象值的name';//对新数组的对象进行修改console.log("原数组",array); // 原数组console.log("新数组",newArray); // 打印数组,可以看到新的对象被成功添加}};
</script>
<style></style>
相关文章:
uni-app:js实现数组中的相关处理-数组复制
一、slice方法-浅拷贝 使用分析 创建一个原数组的浅拷贝,对新数组的修改不会影响到原数组slice() 方法创建了一个原数组的浅拷贝,这意味着新数组和原数组中的对象引用是相同的。因此,当你修改新数组中的对象时,原数组中相应位置的…...
8 STM32标准库函数 之 实时时钟(RTC)所有函数的介绍及使用
8 STM32标准库函数 之 实时时钟(RTC)所有函数的介绍及使用 1. 图片有格式2 文字无格式二、RTC库函数固件库函数预览2.1 函数RTC_ITConfig2.2 函数RTC_EnterConfigMode2.3 函数RTC_ExitConfigMode2.4 函数RTC_GetCounter.2.5 函数RTC_SetCounter2.6 函数RTC_SetPrescaler2.7 函…...
ARMday04(开发版简介、LED点灯)
开发版简介 开发板为stm32MP157AAA,附加一个拓展版 硬件相关基础知识 PCB PCB( Printed Circuit Board),中文名称为印制电路板,又称印刷线路板,是重要的电子部件,是电子元器件的支撑体,是电子…...
国际腾讯云:云服务器疑似被病毒入侵问题解决方案!!!
云服务器可能由于弱密码、开源组件漏洞的问题被黑客入侵,本文介绍如何判断云服务器是否被病毒入侵,及其解决方法。 问题定位 使用 SSH 方式 或 使用 VNC 方式 登录实例后,通过以下方式进行判断云服务器是否被病毒入侵: rc.loca…...
Perl语言用多线程爬取商品信息并做可视化处理
首先,我们需要使用Perl的LWP::UserAgent模块来发送HTTP请求。然后,我们可以使用HTML::TreeBuilder模块来解析HTML文档。在这个例子中,我们将使用BeautifulSoup模块来解析HTML文档。 #!/usr/bin/perl use strict; use warnings; use LWP::User…...
认识计算机-JavaEE初阶
文章目录 一、计算机的发展史二、冯诺依曼体系(Von Neumann Architecture)三、CPU基本工作流程3.1 算术逻辑单元(ALU)3.2 寄存器(Register)和内存(RAM)3.3 控制单元(CU)3…...
you-get - 使用代码下载视频
文章目录 关于 you-get代码调用报错处理 源码简单分析 关于 you-get github : https://github.com/soimort/you-get you-get 是一个有名的开源视频下载工具包,这里不赘述。 代码调用 you-get 提供了命令行的方式下载视频,这里介绍使用 Python 调用源代…...
【Proteus仿真】【51单片机】汽车尾灯控制设计
文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真51单片机控制器,使用按键、LED模块等。 主要功能: 系统运行后,系统运行后,系统开始运行,K1键控制左转向灯;…...
浙大恩特客户资源管理系统任意文件上传漏洞复现
0x01 产品简介 浙大恩特客户资源管理系统是一款针对企业客户资源管理的软件产品。该系统旨在帮助企业高效地管理和利用客户资源,提升销售和市场营销的效果。 0x02 漏洞概述 浙大恩特客户资源管理系统中fileupload.jsp接口处存在文件上传漏洞,未经身份认…...
史上第一款AOSP开发的IDE (支持Java/Kotlin/C++/Jni/Native/Shell/Python)
ASFP Study 史上第一款AOSP开发的IDE (支持Java/Kotlin/C/Jni/Native/Shell/Python) 类似于Android Studio,可用于开发Android系统源码。 Android studio for platform,简称asfp(爱上富婆)。 背景&下载&使用 背景 由…...
GCC + Vscode 搭建 nRF52xxx 开发环境
在 Windows 下使用 GCC Vscode 搭建 nRF52xxx 开发环境 ...... by 矜辰所致前言 最近有遇到项目需求,需要使用到 Nordic 的 nRF52xxx 芯片,还记得当初刚开始写博文的时候的写的 nRF52832 学习笔记,现在看当时笔记毫无逻辑可言,…...
Linux应用开发基础知识——Framebuffer 应用编程(四)
前言: 在 Linux 系统中通过 Framebuffer 驱动程序来控制 LCD。Frame 是帧的意 思,buffer 是缓冲的意思,这意味着 Framebuffer 就是一块内存,里面保存着 一帧图像。Framebuffer 中保存着一帧图像的每一个像素颜色值,假设…...
智安网络|数据库入门秘籍:通俗易懂,轻松掌握与实践
在现代信息化时代,数据库已成为我们日常生活和工作中不可或缺的一部分。然而,对于非专业人士来说,数据库这个概念可能很抽象,难以理解。 一、什么是数据库? 简单来说,数据库是一个存储和管理数据的系统。它…...
EXCEL中安装多个vsto插件,插件之间互相影响功能,怎么解决
在 Excel 中安装多个 VSTO 插件,并且这些插件之间存在互相影响的情况下,可以采取以下措施来解决问题: 1. **隔离插件功能:** - 确保每个 VSTO 插件都有清晰的功能和责任范围,避免不同插件之间的功能重叠。这可以通…...
Java枚举
枚举类 概念 Java中的枚举(Enumeration)是一种特殊的数据类型,它是一种包含固定常量的类型。枚举是一种更加类型安全和更易维护的方式来定义常量,它包含了一组命名的值。 enum Weekday {MONDAY, TUESDAY, WEDNESDAY, THURSDAY,…...
基于MATLAB的关节型六轴机械臂轨迹规划仿真
笛卡尔空间下的轨迹规划,分为直线轨迹规划和圆弧轨迹规划,本文为笛卡尔空间下圆弧插值法的matlab仿真分析 目录 1 实验目的 2 实验内容 2.1标准D-H参数法 2.2实验中使用的Matlab函数 3 全部代码 4 仿真结果 1 实验目的 基于机器人学理论知识&…...
双11狂欢最后一天
大家好,本年度双11即将到来,为了答谢大家多年来的支持及更广泛的推广VBA的应用,“VBA语言専功”在此期间推出巨大优惠:此期间打包购买VBA技术资料实行半价优惠。 1:面向对象:学员及非学员 2:打…...
YOLOX: Exceeding YOLO Series in 2021(2021.8)
文章目录 AbstractIntroduction介绍前人的工作提出问题解决 YOLOXYOLOX-DarkNet53Implementation detailsYOLOv3 baselineDecoupled headStrong data augmentationAnchor-freeMulti positivesSimOTAEnd-to-end YOLOOther BackbonesModified CSPNet in YOLOv5Tiny and Nano dete…...
HBuilderX 运行Android App项目至雷电模拟器
一、下载安装HBuilderX HBuildeX官网 安装最新的正式版,或者点击历史版本查看更多版本;【ps:Alpha版本为开发版,功能更多,但是也不稳定,属于测试版本】 直接将压缩包解压,运行HBuildeX即可。 二…...
Java进阶(JVM调优)——阿里云的Arthas的使用 安装和使用 死锁查找案例,重新加载案例,慢调用分析
前言 JVM作为Java进阶的知识,是需要Java程序员不断深度和理解的。 本篇博客介绍JVM调优的工具阿里云的Arthas的使用,安装和使用,命令的使用案例;死锁查询的案例;重新加载一个类信息的案例;调用慢的分析案…...
UE5 学习系列(二)用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…...
智能在线客服平台:数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展,消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁,不仅优化了客户体验,还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用,并…...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...
USB Over IP专用硬件的5个特点
USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中,从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备(如专用硬件设备),从而消除了直接物理连接的需要。USB over IP的…...
Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?
在大数据处理领域,Hive 作为 Hadoop 生态中重要的数据仓库工具,其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式,很多开发者常常陷入选择困境。本文将从底…...
排序算法总结(C++)
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指:同样大小的样本 **(同样大小的数据)**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...
【Redis】笔记|第8节|大厂高并发缓存架构实战与优化
缓存架构 代码结构 代码详情 功能点: 多级缓存,先查本地缓存,再查Redis,最后才查数据库热点数据重建逻辑使用分布式锁,二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...
实战三:开发网页端界面完成黑白视频转为彩色视频
一、需求描述 设计一个简单的视频上色应用,用户可以通过网页界面上传黑白视频,系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观,不需要了解技术细节。 效果图 二、实现思路 总体思路: 用户通过Gradio界面上…...
6个月Python学习计划 Day 16 - 面向对象编程(OOP)基础
第三周 Day 3 🎯 今日目标 理解类(class)和对象(object)的关系学会定义类的属性、方法和构造函数(init)掌握对象的创建与使用初识封装、继承和多态的基本概念(预告) &a…...
C++实现分布式网络通信框架RPC(2)——rpc发布端
有了上篇文章的项目的基本知识的了解,现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...
