手写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 ...
随机推荐
- 2- 用户登录表单拦截 UsernamePasswordAuthenticationFilter
/* * Copyright 2004, 2005, 2006 Acegi Technology Pty Limited * * Licensed under the Apache License, ...
- ASP.NET Core实现自定义中间件的三种方式
一.什么是中间件 请求处理管道由一系列中间件组件组成.每个组件在 HttpContext 上执行操作,调用管道中的下一个中间件或终止请求. 详情请看另外一篇文章:白话管道中间件 下图是中间件的管道模型 ...
- （已解决）为什么最新版本（v4.3.1）的bootstrap不能使用center-block?
最新版本4.3.1已经用mx-auto替换center-block,如果仍然想要使用,可以引用3.3.7版本的,https://cdn.staticfile.org/twitter-bootstrap ...
- Go--解析yaml文件
yaml 文件是目前最常用的配置文件,使用go语言编写代码和工具时,也会用到yaml文件,将服务配置及中间件等信息定义到yaml文件中,后续可根据实际场景来选用. //先下载外部包 go get -u ...
- npm ERR! Failed at the node-sass@4.14.1 postinstall script.
我们后台要了前端源代码,启动Vue项目后出现了这几行出错信息 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! node-sass@4.14.1 p ...
- (原创)odoo15(master)下，列表导出权限控制
列表导出增加一个内置用户组"base.group_allow_export"以增强权限控制.
- K8S群集调度器
目录: 调度约束 Pod启动典型创建过程 调度过程 Predicate常见的算法 常见的优先级选项 指定调度节点 亲和性 键值运算关系 Pod亲和性和反亲和性 污点和容忍 污点 容忍 其他注意事项 c ...
- Codeforces Round #776 (Div
Codeforces Round #776 (Div. 3) CodeForces - 1650D Twist the Permutation 给定你数组a:1 2 3 ... n,一共有n次操作,每 ...
- mysql常用语句操作
概述: 1.通过表结构介绍.来操作mysql常用的语法&语句: 2.现在学习下几个基本的sql语句,万变不离其宗,把基础弄扎实了其它的就很容易了 一.表结构&建表: 1.学生基础信息表 ...
- 实验1task5
<实验结论> #include <stdio.h> #include <stdlib.h> int main() { float a,b,c; printf(&qu ...