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

JS中常用的数组拷贝技巧

我们都知道,数组也是属于对象,在JS中对象的存储方式则是引用的方式。我们想要拷贝一个数组,就不能只是变量之前的赋值拷贝,这样他们将共享同一个引用,而数组又具有可变性,所以无法将原数组和拷贝的数组的数据分隔开。那么接下来将介绍如何对数据进行深层拷贝,使得原数组和拷贝数组的数据分隔开来。

浅拷贝

1.展开运算符

只支持简单结构的拷贝

    let number = [1, 2, 3, 4, 5]let copy = [...number]copy.push(0)console.log('copy', copy)//[1, 2, 3, 4, 5, 0]console.log('number', number)//[1, 2, 3, 4, 5]let arr = [{name: 'zhangsan',age: 18},{name: 'lisi',age: 19}]let copyArr = [...arr]copyArr[0].name = 'wangwu'console.log('copyArr', copyArr)//[ { name: 'wangwu', age: 18 }, { name: 'lisi', age: 19 } ]console.log('arr', arr)//[ { name: 'wangwu', age: 18 }, { name: 'lisi', age: 19 } ]

2.Array.concat方法

只支持简单结构的拷贝

  const number = [1, 2, 3, 4, 5]const copy = number.concat()copy.push(0)console.log('copy', copy)//[1, 2, 3, 4, 5, 0]console.log('number', number)//[1, 2, 3, 4, 5]const arr=[{name:'zhangsan',age:18},{name:'lisi',age:19}]let arrCopy=arr.concat()arrCopy[0].name='wangwu'console.log('arrCopy',arrCopy)//[ { name: 'wangwu', age: 18 }, { name: 'lisi', age: 19 } ]console.log('arr',arr)//[ { name: 'wangwu', age: 18 }, { name: 'lisi', age: 19 } ]

深拷贝

1.JSON.parse(JSON.stringify(arr))

支持简单结构和复杂结构的深层拷贝

  let number=[1,2,3,4,5]let copy=JSON.parse(JSON.stringify(number))copy.push(0)console.log('copy',copy)//[1, 2, 3, 4, 5, 0]console.log('number',number)//[1, 2, 3, 4, 5]const arr=[{name:'zhangsan',age:18},{name:'lisi',age:19}]let arrCopy=JSON.parse(JSON.stringify(arr))arrCopy[0].name='wangwu'console.log('arrCopy',arrCopy)//[ { name: 'wangwu', age: 18 }, { name: 'lisi', age: 19 } ]console.log('arr',arr)//[ { name: 'zhangsan', age: 18 }, { name: 'lisi', age: 19 } ]

2. Array.slice方法

支持简单结构和复杂结构的深层拷贝

    let numbers=[1,2,3,4,5]let numbersCopy=numbers.slice()numbersCopy.push(6)console.log('numbersCopy',numbersCopy)//[1, 2, 3, 4, 5, 6]console.log('numbers',numbers)//[1, 2, 3, 4, 5]let arr=[{name:'zhangsan',age:18},{name:'lisi',age:19}]let arrCopy=arr.slice()arrCopy.push({name:'wangwu',age:20})console.log('arrCopy',arrCopy)//[ { name: 'zhangsan', age: 18 }, { name: 'lisi', age: 19 }, { name: 'wangwu', age: 20 } ] console.log('arr',arr)//[ { name: 'zhangsan', age: 18 }, { name: 'lisi', age: 19 } ]

3.Array.map方法

支持简单结构和复杂结构的深层拷贝

    let numbers=[1,2,3,4,5,8]let copy=numbers.map(item=>item)copy.push(9)console.log('copy',copy)//[1, 2, 3, 4, 5, 8, 9]console.log('numbers',numbers)//[1, 2, 3, 4, 5, 8]const arr=[{name:'zhangsan',age:18},{name:'lisi',age:19}]const arrCopy=arr.map(item=>item)arrCopy.push({name:'wangwu',age:20})console.log('arrCopy--',arrCopy)//[ { name: 'zhangsan', age: 18 }, { name: 'lisi', age: 19 }, { name: 'wangwu', age: 20 } ]console.log('arr--',arr)//[ { name: 'zhangsan', age: 18 }, { name: 'lisi', age: 19 } ]

Array.from方法

支持简单结构和复杂结构的深层拷贝

    const number=[1,2,3,4,5]const copy=Array.from(number)copy.push(10)console.log('copy',copy)//[1, 2, 3, 4, 5, 10]console.log('number',number)//[1, 2, 3, 4, 5]let arr=[{hobby:'xxx',age:18},{hobby:'yyy',age:19}]const arrCopy=Array.from(arr)arrCopy.push({hobby:'zzz',age:20})console.log('arrCopy',arrCopy)//[ { hobby: 'xxx', age: 18 }, { hobby: 'yyy', age: 19 }, { hobby: 'zzz', age: 20 } ]console.log('arr',arr)//[ { hobby: 'xxx', age: 18 }, { hobby: 'yyy', age: 19 } ]

相关文章:

JS中常用的数组拷贝技巧

我们都知道,数组也是属于对象,在JS中对象的存储方式则是引用的方式。我们想要拷贝一个数组,就不能只是变量之前的赋值拷贝,这样他们将共享同一个引用,而数组又具有可变性,所以无法将原数组和拷贝的数组的数…...

SAP ABAP程序性能优化-养成良好的代码习惯

ABAP程序基本上都需要从数据库里面抓数,所以性能很重要,同时有一些基本的,和优秀的写法是我们必须要掌握的,不然就会造成程序性能很差。下面给予总结(这里包括有很基本的,也包括有比较少用到的)…...

SQL SERVER ip地址改别名

SQL server在使用链接服务器时必须使用别名,使用ip地址就会把192.188.0.2这种点也解析出来 解决方案: 1、物理机ip 192.168.0.66 虚拟机ip 192.168.0.115 2、在虚拟机上找到 C:\Windows\System32\drivers\etc 下的 (我选中的文件&a…...

数据结构-1

1.2 线性结构树状结构网状结构(表 数 图) 数据:数值型 非数值型 1.2.3数据类型和抽象数据类型 1.3抽象数据类型 概念小结: 线性表: 如果在独立函数实现的 .c 文件中需要包含 stdlib.h 头文件,而主函数也需要包含 st…...

Java自定义校验注解实现List、set集合字段唯一性校验

文章目录 一: 使用场景二: 定义FieldUniqueValid注解2.1 FieldUniqueValid2.2 注解说明2.3 Constraint 注解介绍2.4 FieldUniqueValid注解使用 三:自定义FieldUniqueValidator校验类3.1 实现ConstraintValidator3.2 重写initialize方法3.3 重…...

xiaoweirobot.chat

目录 1 xiaoweirobot.chat 1.1 DetailList 2 HttpData 2.1 doInBackground 2.2 onPostExecute xiaoweirobot.chatpackage com.shrimp.xiaoweirobot.chat; DetailList <...

【无公网IP】本地电脑搭建个人博客网站(并发布公网访问 )和web服务器

【无公网IP】本地电脑搭建个人博客网站&#xff08;并发布公网访问 &#xff09;和web服务器 文章目录 【无公网IP】本地电脑搭建个人博客网站&#xff08;并发布公网访问 &#xff09;和web服务器前言1. 安装套件软件2. 创建网页运行环境 指定网页输出的端口号3. 让WordPress在…...

SpringCloud(29):Nacos简介

1 什么是配置中心 1.1 什么是配置 应用程序在启动和运行的时候往往需要读取一些配置信息&#xff0c;配置基本上伴随着应用程序的整个生命周期&#xff0c;比如&#xff1a;数据库连接参数、启动参数等。 配置主要有以下几个特点&#xff1a; 配置是独立于程序的只读变量 …...

freeBSD - 笔记

1 介绍 FreeBSD&#xff1a; FreeBSD是由FreeBSD项目团队开发的&#xff0c;最早可以追溯到1993年。它专注于性能、稳定性和可靠性&#xff0c;并在服务器和高性能计算环境中广泛使用。FreeBSD有着强大的网络性能和高度优化的TCP/IP协议栈&#xff0c;因此在网络服务器领域表…...

【Linux】网络基础——宏观认识计算机网络

1 计算机网络背景 网络发展 独立模式: 计算机之间相互独立; 一开始&#xff0c;计算机发明出来之后&#xff0c;一台计算机处理完的数据&#xff0c;数据会保存在软盘&#xff08;物理&#xff09;&#xff0c;通过人之间的相互通信&#xff0c;把计算机A处理完的数据存储到软…...

数字人现身大运会,怎么以动作捕捉技术助推运动与文博相结合

中国移动动感地带数字人橙络络&#xff0c;作为数智体验官以元宇宙的视角&#xff0c;带领观众沉浸式体验大运会&#xff0c;以极具科技和未来的数字人&#xff0c;对外传递大运青春风采&#xff0c;并且数字人橙络络还对大运会的赛事、活动进行了科普、讲解以及表演当地特色才…...

WSL安装

WSL安装 1.Microsoft store 安装 1.1 启动WSL功能 在【程序和功能 -> 启用或关闭 Windows 功能】中勾选【适用于 Linux 的 Windows 子系统】 1.2 Store中下载安装 在 Microsoft Store 中下载并安装需要的 Linux 发行版 2.不使用Store安装WSL 注&#xff1a;1.1也要…...

MongoDB 入门

1.1 数据库管理系统 在了解MongoDB之前需要先了解先数据库管理系统 1.1.1 什么是数据&#xff1f; 数据&#xff08;英语&#xff1a;data&#xff09;&#xff0c;是指未经过处理的原始记录。 一般而言&#xff0c;数据缺乏组织及分类&#xff0c;无法明确的表达事物代表的意…...

使用uni-app的uniCloud 云数据库入门:实现一个简单的增删改查

官方云数据库文档 前置步骤使用uni-app新建一个uniCloud项目 [外链图片转存失败,源站可能有防盗官方云数据库文档]!链机制,建议将()https://uniapp.dcloud.net.cn/uniCloud/hellodb.html)] 新建表 这里我加了几个测试字段 createTime、remark、money // 文档教程: https://un…...

【MATLAB第64期】【保姆级教程】基于MATLAB的SOBOL全局敏感性分析模型运用(含无目标函数,考虑代理模型)

【MATLAB第64期】【保姆级教程】基于MATLAB的SOBOL全局敏感性分析模型运用&#xff08;含无目标函数&#xff0c;考虑代理模型&#xff09; 版本更新&#xff1a; 2023/8/5&#xff1a; 1.因BP作为代理模型不稳定&#xff0c;经过测试&#xff0c;libsvm比rf /bp 效果稳定且精…...

Python web实战之Django用户认证详解

关键词&#xff1a; Python Web 开发、Django、用户认证、实战案例 概要 今天来探讨一下 Django 的用户认证吧&#xff01;在这篇文章中&#xff0c;我将为大家带来一些有关 Django 用户认证的最佳实践。 1. Django 用户认证 在开发 Web 应用程序时&#xff0c;用户认证是一个…...

每天五分钟机器学习:梯度下降算法和正规方程的比较

本文重点 梯度下降算法和正规方程是两种常用的机器学习算法,用于求解线性回归问题。它们各自有一些优点和缺点,下面将分别对它们进行详细的讨论。 区别 1. 梯度下降算法是一种迭代的优化算法,通过不断迭代调整参数来逼近最优解。它的基本思想是根据目标函数的梯度方向,沿…...

生信学院|08月18日《基于Flow Simulation的冷链运输产品案例》

课程主题&#xff1a;基于Flow Simulation的冷链运输产品案例 课程时间&#xff1a;2023年08月18日 14:00-14:30 主讲人&#xff1a;江流洋 生信科技 CAE专家 1、达索仿真方案介绍 2、项目介绍 3、案例分析 请安装腾讯会议客户端或APP&#xff0c;微信扫描海报中的二维码…...

不可错过的家装服务预约小程序商城开发指南

在当今社会&#xff0c;家装行业发展迅速&#xff0c;越来越多的人开始寻求专业的家装预约和咨询服务。对于不懂技术的新手来说&#xff0c;创建一个自己的家装预约咨询平台可能听起来很困难&#xff0c;但实际上通过一些第三方制作平台和工具&#xff0c;这个过程可以变得简单…...

任务 13、MidJourney种子激发极致创作,绘制震撼连贯画作

13.1 任务概述 通过本次实验任务&#xff0c;学员将深入了解Midjourney种子的概念和重要性&#xff0c;以及种子对生成图像的影响。他们将学会在Midjourney平台中设置种子值并调整其参数&#xff0c;以达到所需的效果。此外&#xff0c;任务还详细介绍了Midjourney V4.0版本中…...

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...