手写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读取apk、ipa包名、版本名、版本号等信息
package com.gymexpress.exerciseservice.controller;import com.gymexpress.commonmodel.controller.BaseC ...
- page-break-after:always 打印分页
在实现打印功能时候,可以完整分页,需要配合二维数组来使用,避免下一页数据展示到上一页
- PS设计非常漂亮酷炫的金色字体效果
方法/步骤 1.在PS里面新建一个黑色背景 2.在图层上 写上比较粗一点的字. 3.鼠标右击图层,选择混合模式,进行调整. 选择颜色叠加,注意颜色是深黄色. 4.转移到混合模式里面的渐变叠加,渐变的颜 ...
- jdk 1.8 处理 map和list
1.map 的 key 和 value 反转 2. list<Object> 取两列转成 map<String,String> map 3. list<Object&g ...
- Delphi获取程序版本号
参考: http://www.delphitop.com/html/hanshu/4627.html procedure GetVersionInfo(const FileName:string; v ...
- java方法的笔记
方法 方法的概念 方法(method)是将具有独立功能的代码块组织成为一个整体,使其具有特殊功能的代码集 注意: 方法必须先创建才可以使用,该过程成为方法定义 方法创建后并不是直接可以运行的,需要手动 ...
- python打包生成exe报错
如图所示 如果出现的是这个问题可以可以考虑以下方法 首先卸载原先下载的 Pyinstaller pip uninstall pyinstaller 再执行以下代码,去github上下载 pip ...
- uniapp打包h5
1. 找到项目中 manifest.json --- H5 配置---运行时的基础路径, 将路径修改为 相对路径(./ ) 注意: 1.运行的基础路径系统默认打包路径为绝对路径,如不改,打包时找不到对 ...
- matlab算符合集
1.逻辑算符 1)且 : A & B -- 两个逻辑数组之间 逐个元素 进行逻辑"与"操作 AB可为矩阵. 首先判断表达式A的逻辑值,然后判断B,继而进行逻辑"与 ...
- android系统签名文件路径及签名方法
在系统源码路径下 签名文件路径:android/build/target/product/security/ 准备好签名工具:"signapk.jar" 位置:android/pr ...