vue深拷贝的几种实现方式

1、通过递归方式实现深拷贝
比较全面的深拷贝,缺点是较为繁琐

function deepClone(obj) {var target = {};for (var key in obj) {if (Object.prototype.hasOwnProperty.call(obj, key)) {if (typeof obj[key] === 'object') {target[key] = deepClone(obj[key]);} else {target[key] = obj[key];}}}return target;
}

2、JSON.parse(JSON.stringify(obj))
满足一般使用场景,但无法实现对象中方法(function)的深拷贝

let obj = {id: 1,name: '张三',age: 10,
}
let newObj = JSON.parse(JSON.stringify(obj))

3、jQuery的extend方法实现深拷贝

var array = [1,2,3,4];
var newArray = $.extend(true,[],array); // true为深拷贝,false为浅拷贝

4、Object.assign(obj1, obj2)
只有一级属性为深拷贝,二级属性后就是浅拷贝

let obj = {id: 1,name: '张三',age: 10,
}
let newObj = Object.assign({}, obj)

5、扩展运算符
只有一级属性为深拷贝,二级属性后就是浅拷贝

var obj = {a: 1,b: 2
}var obj1 = {…obj}

6、数组使用数组方法进行深拷贝(concat、slice)
只有一级属性为深拷贝,二级属性后就是浅拷贝,如[1,2,3,[1,2,3]]

var arr1 = [1, 2, 3, 4]
var arr2 = arr1.concat()
var arr3 = arr1.slice(1)

7、使用Vue提供的观察者模式实现数组深度复制
//需要复制的数组

let arr1 = [{name: "小明", age: 18}, {name: "小芳", age: 20}];
let arr2 = Vue.util.extend([], arr1);

8、使用ES6提供的扩展运算符实现数组深度复制

//需要复制的数组
let arr1 = [{name: "小明", age: 18}, {name: "小芳", age: 20}];
//使用ES6的扩展运算符实现数组深度复制
let arr2 = [...arr1];

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

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

相关文章

链表例题小总结:

链表: 第一种题型:双指针 力扣203:移除链表元素 力扣题目链接 题意:删除链表中等于给定值 val 的所有节点。示例 1: 输入:head [1,2,6,3,4,5,6], val 6 输出:[1,2,3,4,5]示例 2&#xff1…

MySQL——数据类型以及对表结构的修改

MySQL的数据类型 刚才我们在创建表的时候,说到了一个字段类型,所谓的字段类型就是这个字段能存放的数据的数据类型,在MySQL中有以下几种数据类型: 数据类型 大小(字节) 用途 格式 INT 4 整数 FLOAT…

Unity控制程序退出

大家好,我是阿赵。   最近把公司的游戏发布到各种PC的游戏大厅,遇到了挺多奇怪的需求。之前介绍了一些Unity发布PC端控制窗口最大最小化、修改exe信息等问题,这次来探讨一下退出游戏的问题。 一、收到奇怪的需求 某游戏大厅要求&#xff0…

RabbitMQ从入门到精通之安装、通讯方式详解

文章目录 RabbitMQ一、RabbitMQ介绍1.1 现存问题 一、RabbitMQ介绍二、RabbitMQ安装三、RabbitMQ架构四、RabbitMQ通信方式4.1 RabbitMQ提供的通讯方式4.2 Helloworld 方式4.2Work queues4.3 Publish/Subscribe4.4 Routing4.5 Topics4.6 RPC (了解) 五、Springboot 操作RabbitM…

【MyBatisⅡ】动态 SQL

目录 🎒1 if 标签 🫖2 trim 标签 👠3 where 标签 🦺4 set 标签 🎨5 foreach 标签 动态 sql 是Mybatis的强⼤特性之⼀,能够完成不同条件下不同的 sql 拼接。 在 xml 里面写判断条件。 动态SQL 在数据库里…

LeetCode 202 快乐数

题目链接 力扣(LeetCode)官网 - 全球极客挚爱的技术成长平台 法一:哈希 使用哈希表循环判断每次经过平方和的数,如果为1则直接返回true,若之前存在过但不为1则直接返回false 代码 class Solution { public:// 计算…

pytorch中squeeze函数用法

squeeze的中文意思是“挤压”,顾名思义,该函数的作用是压缩维度 squeeze(input, dimNone) -> Tensor input一个高维张量,如果各个维度中存在大小为1的维度,squeeze才起作用,下面举例说明 x torch.arange(6).res…

Http Content-type 对照表

文件扩展名Content-Type(Mime-Type)文件扩展名Content-Type(Mime-Type).*( 二进制流,不知道下载文件类型)application/octet-stream.tifimage/tiff.001application/x-001.301application/x-301.323text/h323.906application/x-906.907drawing…

MySql 游标 触发器

游标 1.什么是游标 MySQL游标是一种数据库对象,它用于在数据库查询过程中迭代访问结果集中的每一行。游标可以被看作是一个指向查询结果集的指针,通过移动游标,可以按行读取和处理结果集的数据。在MySQL中,游标可以用于在存储过程…

【MySQL基础|第一篇】——谈谈SQL中的DDL语句

个人主页:兜里有颗棉花糖 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 兜里有颗棉花糖 原创 收录于专栏【MySQL学习专栏】🎈 本专栏旨在分享学习MySQL的一点学习心得,欢迎大家在评论区讨论💌 前言&#xff…

力扣(LeetCode)算法_C++——有效的数独

请你判断一个 9 x 9 的数独是否有效。只需要 根据以下规则 ,验证已经填入的数字是否有效即可。 数字 1-9 在每一行只能出现一次。 数字 1-9 在每一列只能出现一次。 数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。(请参考示例图) …

ChatGPT AIGC 完成多维分析雷达图

我们先让ChatGPT来帮我们总结一下多维分析雷达图的功能与作用。 同样ChatGPT AIGC完成的动态雷达图效果如下; 这样的一个多维分析动态雷达图是用HTML,JS,Echarts 来完成的。 将完整代码复制如下: <!DOCTYPE html> <html style="height: 100%"><h…

等保测评 —— 安全控制点

等保测评 —— 安全控制点 技术 第1章 安全物理环境 物理位置的选择 物理访问控制 防盗窃和防破坏 防雷击 防火 防水和防潮 防静电 温湿度控制 电力供应 电磁防护 第2章 安全通信网络 网络架构 通信传输 可信验证 第3章 安全区域边界 访问控制 入侵防范 恶…

Golang综合项目实战(一)

Golang综合项目实战&#xff08;一&#xff09; 01-项目简介02-项目架构、术语、运行结果03-创建并初始化项目04-创建用户模型和错误处理05-创建密码加密工具类06-保存密码之前的hooks07-创建用户名密码验证工具类08-用户数据库操作逻辑09-操作用户service10-创建商品分类模型…

PHP8内置函数中的变量函数-PHP8知识详解

在php8中&#xff0c;与变量相关的内置函数比较多&#xff0c;本文说一些比较重要的、常见的内置函数。今日着重讲解了5个&#xff0c;分别是&#xff1a;检测变量是否为空的函数empty()、判断变量是否定义过的函数isset()、销毁指定的变量的函数unset()、获取变量的类型的函数…

通过Siri打造智能爬虫助手:捕获与解析结构化数据

在信息时代&#xff0c;我们经常需要从互联网上获取大量的结构化数据。然而&#xff0c;传统的网络爬虫往往需要编写复杂代码和规则来实现数据采集和解析。如今&#xff0c;在苹果公司提供的语音助手Siri中有一个强大功能可以帮助我们轻松完成这项任务——通过使用自定义指令、…

ChatGPT在机器人护理和老年人支持中的潜在角色如何?

机器人在护理和老年人支持领域有着巨大的潜力&#xff0c;可以提供多种服务和支持&#xff0c;改善老年人的生活质量&#xff0c;并减轻护理工作者和家庭成员的负担。在这篇文章中&#xff0c;我将探讨机器人在这一领域的潜在角色&#xff0c;包括其应用、优势和挑战。 ## 1. …

MySQL表的CURD

CRUD : Create(创建), Retrieve(读取)&#xff0c;Update(更新)&#xff0c;Delete&#xff08;删除&#xff09; Create 语法 INSERT [INTO] table_name [(column [, column] ...)] VALUES (value_list) [, (value_list)] ... value_list: value, [, value] ... 示例&#x…

鸿鹄工程项目管理系统 Spring Cloud+Spring Boot+前后端分离构建工程项目管理系统

工程项目管理软件&#xff08;工程项目管理系统&#xff09;对建设工程项目管理组织建设、项目策划决策、规划设计、施工建设到竣工交付、总结评估、运维运营&#xff0c;全过程、全方位的对项目进行综合管理 工程项目各模块及其功能点清单 一、系统管理 1、数据字典&am…

React18 新特性

React18 新特性 自动批量更新State 定义 import { useState } from reactconst [x, setX] useState(0)渲染赋值 setX(5)并发CM模式 同步不可中断更新机制 -> 异步可中断并行 状态更新 机制 React18 默认开启并发模式 详见代码 ReactDOM 的引入 import ReactDOM fr…