深度克隆---js对象引用
首先,我们要知道,javascript中除了基本类型(number,string,boolean,null,undefined)之外就是引用类型了,也可以说就是js对象了。
引用类型的赋值其实是对象保存在栈区地址指针的赋值,因此两个变量指向同一个对象,任何的操作都会相互影响。
在探讨到深度克隆之前,我们先来看一下下面的例子:
example01:
var a = [1,2,3];
var b = a; // a b共用一个引用
b.push(4);
alert(b); // [1,2,3,4]
alert(a); // [1,2,3,4]
example02:
var a = [1,2,3];
var b = a;
b = [1,2,3,4]; // b新开了一个引用
alert(b); // [1,2,3,4]
alert(a); // [1,2,3]
example03:
var obj = {
a: 10
};
var obj2 = obj;
obj2.a = 20;
alert(obj.a); //
example04:
var obj = {
a: 10
};
function copy(obj){ // 浅拷贝, 只拷贝的一层
var newObj = {};
for(var attr in obj){
newObj[attr] = obj[attr];
}
return newObj;
}
var obj2 = copy(obj);
obj2.a = 20;
alert(obj.a); //
example05:
var obj = {
a: {
b: 10
}
}
function copy(obj){ //浅拷贝, 只拷贝了一层
var newObj = {};
for(var attr in obj){
newObj[attr] = obj[attr];
}
return newObj;
}
var obj2 = copy(obj);
obj2.a.b = 20;
alert(obj.a.b); //
看完上面几个例子之后,想必对js对象引用有了一定的认识。接下来,我们来看js里面另外一个重要的应用---递归。
递归定义可以分为两点:(1).函数调用函数自身,执行递的动作;(2).最后一次判断一个终止条件,可以执行归的动作。
example06:
//求nX(n-1)X(n-2)X...X2X1
function test(n){
if(n == 1){
return 1;
}
return n*test(n-1);
}
alert(test(5)); //
所以,深拷贝也用到了递归。
对象的子对象也是引用,所以遍历赋值的时候要判断,子元素是否是对象,如果子元素是对象,则继续对子元素进行遍历赋值。
example07:
//深拷贝
function deepClone(obj){
var newObj = {};
if(typeof obj != 'object'){
return obj;
}
for(var attr in obj){
newObj[attr] = deepClone(obj[attr]);
}
return newObj;
}
var obj = {
a: {
b: 10
}
};
var obj2 = deepClone(obj);
obj2.a.b = 20;
alert(obj.a.b); //
深度克隆---js对象引用的更多相关文章
- js对象的深度克隆
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS的深度克隆,利用构造函数原型深度克隆
我爱撸码,撸码使我感到快乐!大家好,我是Counter.今天来写写,JS中的深度克隆,这个在笔面试中,考的还是比较多的,主要是对象与数组的赋值,如果直接赋值的话,那么得到的是对象或者数组在堆里的地址, ...
- js深度克隆对象
js深度克隆对象 js深度克隆对象简单的记录一下,如下代码: var obj = { typeOf: function(obj) { const toString = Object.prototype ...
- js实现数组、对象深度克隆的两种办法
1.深度克隆的原理 JS中的深度克隆,指的是原对象改变了,克隆出来的新对象也不会改变,原对象与新对象是完全独立的关系. 实现深度克隆的原理得从对象是一种引用类型说起 众所周知,对象是一种引用类型,对象 ...
- js之深度克隆、简易克隆
一.js中的对象 谈到对象的克隆,必定要说一下对象的概念. js中的数据类型分为两大类:原始类型和对象类型. (1)原始类型包括:数值.字符串.布尔值.null.undefined(后两个是特殊的原始 ...
- JS对象深度克隆
首先看一个例子: var student = { name:"yxz", age:25 } var newStudent = student; newStudent.sex = & ...
- js对象简单、深度克隆(复制)
javascript的一切实例都是对象,只是对象之间稍有不同,分为原始类型和合成类型.原始类型对象指的是字符串(String).数值(Number).布尔值(Boolean),合成类型对象指的是数组( ...
- js浅度克隆/深度克隆
首先弄明白几个概念: 一. 具体数据类型分为两种: 1.原始数据类型 2.引用数据类型 原始数据类型存储的是对象的实际地址,包括: number.string.boolean.还有两个特殊的nul ...
- js里的深度克隆
ES6 数组克隆 let arr = [1,2,3,4,5]; let arr1 = [...a]; arr1 = ["a","b","c" ...
随机推荐
- [转]mysql导入导出数据中文乱码解决方法小结
本文章总结了mysql导入导出数据中文乱码解决方法,出现中文乱码一般情况是导入导入时编码的设置问题,我们只要把编码调整一致即可解决此方法,下面是搜索到的一些方法总结,方便需要的朋友. linux系统中 ...
- Eclipse启动Tomcat报错,系统缺少本地apr库
Eclipse启动Tomcat报错,系统缺少本地apr库. Tomcat中service.xml中的设置情况. 默认情况是HTTP协议的值:protocol="HTTP/1.1" ...
- 基于jQuery 的图片瀑布流实现
解题思路: 第1步 分析问题:我这边的处理方式是以列为单位.每次滚动条滚到底部,把需要加的新的内容放在高度最小的列.如下图所示 加载后的显示 如果在继续往下滚动.新图片就会在1下边显示,如此类推. ...
- zTree异步生成数据时无法获取到子节点的选中状态
最近在项目中遇到一个问题,需求如下: 根据选中不同的人员(ID)向后台发送ajax请求,通过返回的数据来生成该人员的权限访问树,该树目录最少为3级目录,在生成的时候会自动勾选上次保存过的选中状态,点击 ...
- Web控件
Web控件可分三类 HTML控件 html服务器控件是在HTML控件的基础上,额外增加了一个在当前页面唯一的ID属性值和一个runat = "server" 属性html服务器控件 ...
- Bootstrap_Javascript_滚动监视器
滚动监控器是Bootstrap提供的非常实用的JavaScript插件,被广泛应用到Web开发中.其表现形式是: 1.当用户鼠标滚动时,滚动条的位置会自动更新导航条中相应的导航项. 2.用户拖动滚动条 ...
- bootstrap学习--什么是bootstrap
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...
- 汇总前端最最常用的JS代码片段
html5选择器 //参数均接收一个合法的css选择器 element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素 ele ...
- javascript实现ajax
什么是 ajax ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 htt ...
- C# 当double数值较大且小数位过多时转化成字符串并保留小数位
今天在C#中碰到了一个问题,需要将double转换成字符串显示,要求保留小数位. 在网上查询了一下相关的文章 具体如下: double temp=3.1415926; (F)Fixed point:s ...