原生js实现深度克隆
总体思路:
- 判断对象当中的值为引用值还是原始值
- 如果是引用值,判断是数组还是对象,如果是原始值直接copy
- 递归
注意:不要忘了排除null,因为typeof null = 'object'
function deepClone (origin,target) {
var target = target || {};
var toStr = Object.prototype.toString;
var typeArr = '[object Array]';
for (var prop in origin) {
//判断是引用值还是原始值
if (origin[prop] != null && typeof origin[prop] == 'object') {
// 判断是数组还是对象
if (toStr.call(origin[prop]) == typeArr) {
target[prop] = [];
} else {
target[prop] = {};
}
deepCopy(origin[prop],target[prop])
} else {
target[prop] = origin[prop];
}
}
return target;
}
原生js实现深度克隆的更多相关文章
- JS的深度克隆,利用构造函数原型深度克隆
我爱撸码,撸码使我感到快乐!大家好,我是Counter.今天来写写,JS中的深度克隆,这个在笔面试中,考的还是比较多的,主要是对象与数组的赋值,如果直接赋值的话,那么得到的是对象或者数组在堆里的地址, ...
- js之深度克隆、简易克隆
一.js中的对象 谈到对象的克隆,必定要说一下对象的概念. js中的数据类型分为两大类:原始类型和对象类型. (1)原始类型包括:数值.字符串.布尔值.null.undefined(后两个是特殊的原始 ...
- JS对象深度克隆
首先看一个例子: var student = { name:"yxz", age:25 } var newStudent = student; newStudent.sex = & ...
- 原生JavaScript之深度克隆
先看一下克隆成功后的结果 深度克隆就是将obj的属性克隆到obj1上面,并且在obj上面修改属性不影响obj1上面的属性. 1.先把所有的值都遍历一遍(看是引用值和原始值)用for ( var pro ...
- js如何深度克隆
var json = {a:6,b:4,c:[1,2,3]}; var json2 = clone(json); function clone(obj){ var oNew = new obj.con ...
- js对象的深度克隆
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 深度克隆---js对象引用
首先,我们要知道,javascript中除了基本类型(number,string,boolean,null,undefined)之外就是引用类型了,也可以说就是js对象了. 引用类型的赋值其实是对象保 ...
- js深度克隆对象
js深度克隆对象 js深度克隆对象简单的记录一下,如下代码: var obj = { typeOf: function(obj) { const toString = Object.prototype ...
- js实现数组、对象深度克隆的两种办法
1.深度克隆的原理 JS中的深度克隆,指的是原对象改变了,克隆出来的新对象也不会改变,原对象与新对象是完全独立的关系. 实现深度克隆的原理得从对象是一种引用类型说起 众所周知,对象是一种引用类型,对象 ...
随机推荐
- Springboot 构建http服务,返回的http行是'HTTP/1.1 200' 无状态码描述 客户端解析错误
————————————————————————————————————————— *** 响应的数据格式 HTTP/1.1 200 OK Server: Apache-Coyote/1.1 A ...
- [THUSC2017]大魔法师:线段树
分析 在线段树上用\(4 \times 4\)的矩阵打标记. 代码 #include <bits/stdc++.h> #define rin(i,a,b) for(register int ...
- sqli-labs(35)
0X01 构造闭合 发现不需要闭合 ?id=- union ,database(), 0X02组合拳打法
- [CSP-S模拟测试]:maze(二分答案+最短路)
题目传送门(内部题88) 输入格式 第一行两个数$n,m$.第二行四个数$sx,sy,tx,ty$.分别表示起点所在行数.列数,终点所在行数.列数.接下来$n$行,每行$m$个数,描述迷宫.最后一行一 ...
- smartload跨浏览器极速缓存插件用法
smartload由39smart团队原创,主要实现前端css/js的一次加载请求,永久缓存的加速效果,在移动端效果非常明显. 插件特点: 支持平台: PC和移动端所有版本浏览器,ie6+,firef ...
- java.sql.SQLException: The server time zone value 'Öùú±ê׼ʱ¼ä' is unrecognized or repr
在数据库连接配置文件中加入以下: 解决办法为在application文件中添加serverTimezone=UTC spring.datasource.url=jdbc:mysql://localho ...
- React Native商城项目实战05 - 设置首页的导航条
1.Home.js /** * 首页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Te ...
- 【nginx】常用命令 启动|停止|重启|重新读取配置-centOS7
查看服务的当前状态 (flaskApi) [root@67 goTest]# systemctl status nginx.service ● nginx.service - The nginx H ...
- WPF中的WndProc
其实,在WPF中,要想利用WndProc来处理所有的事件,需要利用到SourceInitialized Event,首先需要创建一个HwndSource对象,然后利用其AddHook方法来将所有的w ...
- 在项目中配置PageHelper插件时遇到类型转换异常
PageHelper是一种常用的分页工具,按照常规方法在mybatis的配置文件中整合它: <?xml version="1.0" encoding="UTF-8& ...