手写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 ...
随机推荐
- java传递参数调用python完成剪切多个视频最终拼接成一个
需求如题,综合考虑之后我选择python去做视频处理,最终结果也让我非常满意. 我是windows 环境,安装的python3.8和moviepy模块 第一步:安装python3.8 第二步:修改py ...
- 4、Normal Equation 的向量投影解法与几何和直觉解释
参考:https://zhuanlan.zhihu.com/p/269232332 在线性回归的正交方程 ( Normal Equation )推导一文中提到使用 向量投影 的方法一步就能推导出 正交 ...
- Could not match supplied host pattern, ignoring: 192.168.0.101
[root@ansible ansible]# ansible 192.168.0.101 -m ping[WARNING]: Could not match supplied host patter ...
- Blockchain-enabled Access Control with Fog Nodes for Independent IoTs
摘要: 物联网设备能力有限且数量多,因此当前的传统物联网平台可能无法在可扩展性.可靠性和实时响应方面有效地处理访问控制.本文提出了一种基于区块链.雾节点和物的角色的分散式物联网访问控制系统,利用以太坊 ...
- Netty实战学习笔记
第一部分 Netty的概念及体系结构 1.Netty异步和事件驱动 2.你的第一款Netty应用程序 3.Netty的组件和设计 4.传输 5.ByteBuf 6.ChannelHandler和Cha ...
- flutter Slivers
一. Slivers 我们考虑一个这样的布局:一个滑动的视图中包括一个标题视图(HeaderView),一个列表视图(ListView),一个网格视图(GridView). 我们怎么可以让它们做到统一 ...
- 掌控安全学院SQL注入靶场-布尔盲注（二）
首页打开如下 判断注入 闭合报错 先判断数据库的长度....
- OSPF的安全认证
OSPF的安全认证 OSPF通过LSA报文同步状态信息,协议根据LSA提供的状态信息,快速实行全网路由的建立.也就是一通百通,一变则变.坏处就是有人搞破坏,一坏则百坏.为防止网络破坏活动,实行认证(明 ...
- ES bool查询
一.bool查询包含四种操作 1.must 2.must not 3.filter 4.should 二.功能 1.must 对应mysql的 and a= 2.must not 对应mysql的 a ...
- Ubuntu查看系统服务
Linux服务是Linux系统非常重要的一环,查看服务,需要用到chkconfig工具,然而在Ubuntu 12.0版本,却没有查找到此命令. 查询stackOverflow获取了正确答案,对于Ubu ...