当前位置: 首页 > news >正文

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方法-浅拷贝 使用分析 创建一个原数组的浅拷贝&#xff0c;对新数组的修改不会影响到原数组slice() 方法创建了一个原数组的浅拷贝&#xff0c;这意味着新数组和原数组中的对象引用是相同的。因此&#xff0c;当你修改新数组中的对象时&#xff0c;原数组中相应位置的…...

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&#xff08; Printed Circuit Board&#xff09;&#xff0c;中文名称为印制电路板&#xff0c;又称印刷线路板&#xff0c;是重要的电子部件&#xff0c;是电子元器件的支撑体&#xff0c;是电子…...

国际腾讯云:云服务器疑似被病毒入侵问题解决方案!!!

云服务器可能由于弱密码、开源组件漏洞的问题被黑客入侵&#xff0c;本文介绍如何判断云服务器是否被病毒入侵&#xff0c;及其解决方法。 问题定位 使用 SSH 方式 或 使用 VNC 方式 登录实例后&#xff0c;通过以下方式进行判断云服务器是否被病毒入侵&#xff1a; rc.loca…...

Perl语言用多线程爬取商品信息并做可视化处理

首先&#xff0c;我们需要使用Perl的LWP::UserAgent模块来发送HTTP请求。然后&#xff0c;我们可以使用HTML::TreeBuilder模块来解析HTML文档。在这个例子中&#xff0c;我们将使用BeautifulSoup模块来解析HTML文档。 #!/usr/bin/perl use strict; use warnings; use LWP::User…...

认识计算机-JavaEE初阶

文章目录 一、计算机的发展史二、冯诺依曼体系&#xff08;Von Neumann Architecture&#xff09;三、CPU基本工作流程3.1 算术逻辑单元&#xff08;ALU&#xff09;3.2 寄存器&#xff08;Register)和内存&#xff08;RAM&#xff09;3.3 控制单元&#xff08;CU&#xff09;3…...

you-get - 使用代码下载视频

文章目录 关于 you-get代码调用报错处理 源码简单分析 关于 you-get github : https://github.com/soimort/you-get you-get 是一个有名的开源视频下载工具包&#xff0c;这里不赘述。 代码调用 you-get 提供了命令行的方式下载视频&#xff0c;这里介绍使用 Python 调用源代…...

【Proteus仿真】【51单片机】汽车尾灯控制设计

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真51单片机控制器&#xff0c;使用按键、LED模块等。 主要功能&#xff1a; 系统运行后&#xff0c;系统运行后&#xff0c;系统开始运行&#xff0c;K1键控制左转向灯&#xff1b;…...

浙大恩特客户资源管理系统任意文件上传漏洞复现

0x01 产品简介 浙大恩特客户资源管理系统是一款针对企业客户资源管理的软件产品。该系统旨在帮助企业高效地管理和利用客户资源&#xff0c;提升销售和市场营销的效果。 0x02 漏洞概述 浙大恩特客户资源管理系统中fileupload.jsp接口处存在文件上传漏洞&#xff0c;未经身份认…...

史上第一款AOSP开发的IDE (支持Java/Kotlin/C++/Jni/Native/Shell/Python)

ASFP Study 史上第一款AOSP开发的IDE &#xff08;支持Java/Kotlin/C/Jni/Native/Shell/Python&#xff09; 类似于Android Studio&#xff0c;可用于开发Android系统源码。 Android studio for platform&#xff0c;简称asfp(爱上富婆)。 背景&下载&使用 背景 由…...

GCC + Vscode 搭建 nRF52xxx 开发环境

在 Windows 下使用 GCC Vscode 搭建 nRF52xxx 开发环境 ...... by 矜辰所致前言 最近有遇到项目需求&#xff0c;需要使用到 Nordic 的 nRF52xxx 芯片&#xff0c;还记得当初刚开始写博文的时候的写的 nRF52832 学习笔记&#xff0c;现在看当时笔记毫无逻辑可言&#xff0c…...

Linux应用开发基础知识——Framebuffer 应用编程(四)

前言&#xff1a; 在 Linux 系统中通过 Framebuffer 驱动程序来控制 LCD。Frame 是帧的意 思&#xff0c;buffer 是缓冲的意思&#xff0c;这意味着 Framebuffer 就是一块内存&#xff0c;里面保存着 一帧图像。Framebuffer 中保存着一帧图像的每一个像素颜色值&#xff0c;假设…...

智安网络|数据库入门秘籍:通俗易懂,轻松掌握与实践

在现代信息化时代&#xff0c;数据库已成为我们日常生活和工作中不可或缺的一部分。然而&#xff0c;对于非专业人士来说&#xff0c;数据库这个概念可能很抽象&#xff0c;难以理解。 一、什么是数据库&#xff1f; 简单来说&#xff0c;数据库是一个存储和管理数据的系统。它…...

EXCEL中安装多个vsto插件,插件之间互相影响功能,怎么解决

在 Excel 中安装多个 VSTO 插件&#xff0c;并且这些插件之间存在互相影响的情况下&#xff0c;可以采取以下措施来解决问题&#xff1a; 1. **隔离插件功能&#xff1a;** - 确保每个 VSTO 插件都有清晰的功能和责任范围&#xff0c;避免不同插件之间的功能重叠。这可以通…...

Java枚举

枚举类 概念 Java中的枚举&#xff08;Enumeration&#xff09;是一种特殊的数据类型&#xff0c;它是一种包含固定常量的类型。枚举是一种更加类型安全和更易维护的方式来定义常量&#xff0c;它包含了一组命名的值。 enum Weekday {MONDAY, TUESDAY, WEDNESDAY, THURSDAY,…...

基于MATLAB的关节型六轴机械臂轨迹规划仿真

笛卡尔空间下的轨迹规划&#xff0c;分为直线轨迹规划和圆弧轨迹规划&#xff0c;本文为笛卡尔空间下圆弧插值法的matlab仿真分析 目录 1 实验目的 2 实验内容 2.1标准D-H参数法 2.2实验中使用的Matlab函数 3 全部代码 4 仿真结果 1 实验目的 基于机器人学理论知识&…...

双11狂欢最后一天

大家好&#xff0c;本年度双11即将到来&#xff0c;为了答谢大家多年来的支持及更广泛的推广VBA的应用&#xff0c;“VBA语言専功”在此期间推出巨大优惠&#xff1a;此期间打包购买VBA技术资料实行半价优惠。 1&#xff1a;面向对象&#xff1a;学员及非学员 2&#xff1a;打…...

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官网 安装最新的正式版&#xff0c;或者点击历史版本查看更多版本&#xff1b;【ps&#xff1a;Alpha版本为开发版&#xff0c;功能更多&#xff0c;但是也不稳定&#xff0c;属于测试版本】 直接将压缩包解压&#xff0c;运行HBuildeX即可。 二…...

Java进阶(JVM调优)——阿里云的Arthas的使用 安装和使用 死锁查找案例,重新加载案例,慢调用分析

前言 JVM作为Java进阶的知识&#xff0c;是需要Java程序员不断深度和理解的。 本篇博客介绍JVM调优的工具阿里云的Arthas的使用&#xff0c;安装和使用&#xff0c;命令的使用案例&#xff1b;死锁查询的案例&#xff1b;重新加载一个类信息的案例&#xff1b;调用慢的分析案…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...