JavaScript的深拷贝和浅拷贝总结
深拷贝和浅拷贝
深拷贝:拷贝实例;浅拷贝:拷贝引用(原对象)。
说深拷贝和浅拷贝之前,我先去了解了下高程书上的JavaScript的变量类型:
基本类型:undefined、null、Boolean、number、string。变量直接按指存放在栈区内,可以直接访问,所以我们平时把字符串、数字的值赋值给新变量,相当于把值完全复制过去,新变量的改变不会影响旧变量。
引用类型:存放在堆区的对象,变量在栈区中保存的是一个指针地址。
例子
let a = 123;
let b = a;
b = 456;
console.log(a);//123
console.log(b);//456
深拷贝和浅拷贝图解
浅拷贝实现方式
函数实现
function shallowClone (source){
if(!source || typeof source != 'object'){
throw new Error ('error');
}
var targetObj = source.constructor === Array ? [] : {};
for(var keys in source) {
if(source.hasOwnProperty(keys)){
targetObj[keys] = source[keys];
}
}
return targetObj;
}
最简单的浅拷贝:变量复制
let a = 123;
let b = a;
b = 456;
console.log(a);
console.log(b);
通过es6新增的Object.assign来复制对象
let obj = { name: '程序狗', age:{child: 12} }
let copy = Object.assign({}, obj);
copy.name = '单身狗';
copy.age.child = 24;
console.log(obj);// { name: '程序狗', age:{child: 24} }
jquey中的$.extend({}, obj); Array.prototype.slice()和Array.prototype.concat()都会返回一个数组或者对象的浅拷贝。(看起来像深拷贝)
- 深拷贝实现
函数实现
function cloneDeep(obj){
if(typeof obj !== 'object' || Object.keys(obj).length === 0 ){
return obj;
}
let resultData = {};
return recurison(obj, resultData);
} function recurison(obj, data = {}){
for(key in obj){
if(typeof obj[key] == 'object' && Object.keys(obj[key].length > 0 )){
data[key] = recurison(obj[key]);
}else{
data[key] = obj[key];
}
}
return data;
} var o1 = {
arr: [1, 2, 3],
obj: {
key: 'value'
},
func: function(){
return 1;
}
}; var o3 = cloneDeep(o1);
console.log(o3 === o1);//false
console.log(o3.obj === 01.obj);//false
console.log(o3.func === o1.func);//true
JSON对象中的parse和stringify,JOSN对象中的stringify可以把一个js对象序列化为一个JSON字符串,parse可以把JSON字符串反序列化为一个js对象,通过这两个方法,也可以实现对象的深复制。
JavaScript的深拷贝和浅拷贝总结的更多相关文章
- javascript对象深拷贝,浅拷贝 ,支持数组
javascript对象深拷贝,浅拷贝 ,支持数组 经常看到讨论c#深拷贝,浅拷贝的博客,最近js写的比较多, 所以也来玩玩js的对象拷贝. 下面是维基百科对深浅拷贝的解释: 浅拷贝 One meth ...
- 也来玩玩 javascript对象深拷贝,浅拷贝
经常看到讨论c#深拷贝,浅拷贝的博客,最近js写的比较多, 所以也来玩玩js的对象拷贝. 下面是维基百科对深浅拷贝的解释: 浅拷贝 One method of copying an object is ...
- JavaScript的深拷贝和浅拷贝
一.数据类型 数据分为基本数据类型(String, Number, Boolean, Null, Undefined,Symbol)和对象数据类型.. 1.基本数据类型的特点:直接存储在栈(stack ...
- JavaScript的深拷贝与浅拷贝
深拷贝和浅拷贝是在面试中经常遇到的问题.今天在这里总结一下. 深拷贝与浅拷贝的问题,涉及到JavaScript的变量类型,先来说说变量的类型,变量类型包括基本类型和引用类型. 基本类型:Undefin ...
- 详解javascript的深拷贝与浅拷贝
1. 认识深拷贝和浅拷贝 javascript中一般有按值传递和按引用传递两种复制,按值传递的是基本数据类型(Number,String,Boolean,Null,Undefined),一般存放于内存 ...
- JavaScript 的 深拷贝和浅拷贝
深拷贝和浅拷贝都是针对的引用类型, JS中的变量类型分为值类型(基本类型)和引用类型: 对值类型进行复制操作会对值进行一份拷贝,而对引用类型赋值,则会对地址进行拷贝,最终两个变量指向同一份数据 一.先 ...
- JavaScript之深拷贝和浅拷贝
前言 工作中会经常遇到操作数组.对象的情况,你肯定会将原数组.对象进行‘备份’当真正对其操作时发现备份的也发生改变,此时你一脸懵逼,到时是为啥,不是已经备份了么,怎么备份的数组.对象也会发生变化.如果 ...
- javaScript深拷贝和浅拷贝简单梳理
在了解深拷贝和浅拷贝之前,我们先梳理一下: JavaScript中,分为基本数据类型(原始值)和复杂类型(对象),同时它们各自的数据类型细分下又有好几种数据类型 基本数据类型 数字Number 字符串 ...
- 读懂javascript深拷贝与浅拷贝
1. 认识深拷贝和浅拷贝 javascript中一般有按值传递和按引用传递两种复制,按值传递的是基本数据类型(Number,String,Boolean,Null,Undefined),一般存放于内存 ...
随机推荐
- linux常用命令:sudo 命令
sudo命令用来以其他身份来执行命令,预设的身份为root. 1.命令格式: sudo [参数] [命令] 2.命令功能: 功能: sudo可以针对单个命令授予临时权限.用户也可以通过su切换到 ...
- Linux基础命令---last
last 显示以前登录过的用户信息,last指令会搜索/var/log/wtmp文件(或者是经过-f选项指定的文件),然后列出文件中所有的用户信息.如果执行last指令时提示“last /var/lo ...
- hue, saturation, and brightness:色调、饱和度和亮度
色调.饱和度和亮度(hue, saturation, and brightness)以人对红.绿.蓝(RGB)三色组合的感觉为基础.在描述阴极射线管显示器参数时,经常提到这三个专有名词.所有的颜色可以 ...
- Django框架----基础
一个小问题: 什么是根目录:就是没有路径,只有域名..url(r'^$') 补充一张关于wsgiref模块的图片 一.MTV模型 Django的MTV分别代表: Model(模型):和数据库相关的,负 ...
- shell中参数及带色彩打印
shell脚本中的一些函数参数说明如下: #!/bin/bash echo 显示参数的个数: $# echo 以单个字符串把每个参数连接起来: $* echo 显示脚本当前运行的进程id: $$ ec ...
- c++继承、多态以及与java的行为差异之处
对于面向对象而言,多态是最有用的基本特性之一,相对于函数指针,易用得多.下面看下c++继承和多态行为的基本特性,最后说明下和java的基本差别. 首先定义父类和子类. base.h #pragma o ...
- c++性能之map实现性能比较
http://www.cnblogs.com/zhjh256/p/6346501.html讲述了基本的map操作,在测试的时候,发现map的性能极为低下,与java相比相差了接近200倍.测试的逻辑如 ...
- http://bugs.mysql.com/bug.php?id=72123
今天某个环境发生了这个bug. http://bugs.mysql.com/bug.php?id=72123
- vijos 1360 八数码问题 - 启发式搜索
背景 Yours和zero在研究A*启发式算法.拿到一道经典的A*问题,但是他们不会做,请你帮他们. 描述 在3×3的棋盘上,摆有八个棋子,每个棋子上标有1至8的某一数字.棋盘中留有一个空格,空格用0 ...
- 打开vi后提示The ycmd server SHUT DOWN (restart with :YcmRestartServer)该如何处理
答:进入YouCompleteMe的安装目录安装一些必要的依赖 比如:笔者将YouCompleteMe安装到了~/.vim/bundle目录下,那么执行以下操作: cd ~/.vim/bundle/Y ...