手写JS深拷贝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS深拷贝</title>
</head>
<body> </body>
<script>
let obj = {
name: '张三',
age:22,
arr: [1,2,'dadas'],
where: {
country1: '中国',
country2: '府谷',
}
} function deepClone(obj) {
if(obj === null || typeof obj !== 'object') {
return obj;
}
let result;
if(obj instanceof Array) {
result = []
} else {
result = {}
}
for(let key in obj) {
if(obj.hasOwnProperty(key)) {
result[key] = deepClone(obj[key])
}
}
return result
} let newObj = deepClone(obj);
console.log(newObj);
newObj.name = 999;
console.log(newObj);
console.log(obj); </script>
</html>
方法二：
- 函数 正则 日期 ES6新对象 等不是直接返回其地址，而是重新创建
- 需要避免出现循环引用的情况
const _completeDeepClone = (target, map = new WeakMap()) => {
// 基本数据类型，直接返回
if (typeof target !== 'object' || target === null) return target
// 函数 正则 日期 ES6新对象,执行构造题，返回新的对象
const constructor = target.constructor
if (/^(Function|RegExp|Date|Map|Set)$/i.test(constructor.name)) return new constructor(target)
// map标记每一个出现过的属性，避免循环引用
if (map.get(target)) return map.get(target)
map.set(target, true)
const cloneTarget = Array.isArray(target) ? [] : {}
for (prop in target) {
if (target.hasOwnProperty(prop)) {
cloneTarget[prop] = _completeDeepClone(target[prop], map)
}
}
return cloneTarget
}
手写JS深拷贝的更多相关文章
- 手写js面向对象选项卡插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 手写JS无缝滚动插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- cocos2dx手写js绑定C++
这两天连续查阅了js绑定c++的非常多文章 , 有手动与自己主动两种方式 . 本来想用自己主动绑定的 , 可是NDK一直下载不下来.....就给算了 . 以下总结一下手动绑定的实现过程 : 一共三步 ...
- 手写js代码（一）javascript数组循环遍历之forEach
注:原文地址http://blog.csdn.net/oscar999/article/details/8671546 我这里是仿照学习! 1.js的数组循环遍历 ①数组的遍历首先想到的是for()循 ...
- 前端小插件之手写js循环滚动特效
很多前端都离不开滚动的特效,调用插件繁琐,后期更改麻烦,考虑到这些因素,自己写了一套无限循环滚动的小特效. 首先滚动特效很好写,用css就可以完成,下面写一个基础css向上循环滚动特效 html &l ...
- js深拷贝你还不会吗
js深拷贝 在讲正题之前我们要先了解数据存储的方式 数据存储方式 在讲之前我们要先知道值类型和引用类型的存储方式. 在JavaScript数据类型中有两种数据类型. 值类型:字符串(String).数 ...
- 2019前端面试系列——JS高频手写代码题
实现 new 方法 /* * 1.创建一个空对象 * 2.链接到原型 * 3.绑定this值 * 4.返回新对象 */ // 第一种实现 function createNew() { let obj ...
- 常见的JS手写函数汇总（代码注释、持续更新）
最近在复习面试中常见的JS手写函数,顺便进行代码注释和总结,方便自己回顾也加深记,内容也会陆陆续续进行补充和改善. 一.手写深拷贝 <script> const obj1 = { name ...
- 原生html、js手写 radio与checkbox 美化
原生html.js手写 radio与checkbox 美化 html <!DOCTYPE html> <html> <head> <meta charse ...
随机推荐
- centos7安装php8
原文: http://www.manongjc.com/detail/25-qpyxndyogppmfdf.html 前言 centos7默认源的php版本只有5.4,版本太老,而mediawiki需 ...
- 5. nginx跨域配置
1.跨域问题处理:在nginx相关接口上配置如下: 如接口有自己的请求头,则加上:如接口自带请求头pubacc-buid if ($request_method = "OPTIONS&quo ...
- Win11 win10系统分区时出现defrag事件怎么解决？
Win11系统分区时出现defrag事件怎么解决?最近有用户反映这个问题,在重新整理磁盘分区的时候,遇到出现了defrag事件,不知道怎么解决,针对这一问题,本篇带来了详细的Win11系统分区时出现d ...
- nodejs mongoose连接mongodb报错，command find requires authentication
MongoError: command find requires authentication at Connection.<anonymous> (/home/Map/node_mod ...
- Java基础学习：6、方法的重载和可变参数
一.方法重载: 基本介绍: Java中允许在一个类中,多个同名方法的存在,到要求形参列表不一致. 注意事项: 1.方法名:必须一致. 2.形参列表:必须不同(形参类型或个数或顺序至少有一样不同,参数名 ...
- docker登录Ubuntu出现error storing credentials - err: exit status 1, out: `Cannot autolaunch D-Bus without X11 $DISPLAY`的解决方法
命令行登录docker时,在Ubuntu 18.04下可能会出现 error storing credentials - err: exit status 1, out: `Cannot autola ...
- vscore 中 vim 常用快捷键
谷歌浏览器 ctrl + T 新建一个页面 ctrl + J 查看下载界面 F6 直接搜索 vscore 在 vscore 中使用 vim 建议去掉 ctrl 键的功能捆绑,不然会覆盖掉很多的 vsc ...
- 日常遇到bug小记
archery查询后显示缺少空格: https://github.com/hhyo/Archery/pull/1449 archery-mongo数据库查询skip不生效: https://githu ...
- 【笔记】IDEA中maven导入依赖提示证书错误解决方法
先是提示:一定要备份配置文件!!! 一定要备份配置文件!!! 一定要备份配置文件!!! 先说原因:idea内置了jre,与你开发用的jre不是同一个软件,你通过命令修改的是开发用的jre的证书库,导入 ...
- docker0 flannel.1不在同一网段
现象: docker0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST> mtu 1500 inet 172.17.0.1 netmask 255.2 ...