【javascript】浅谈javaScript的深拷贝
浅谈深拷贝和浅拷贝
深拷贝和浅拷贝的区别
为什么要使用深拷贝?
深拷贝的要求程度
怎么检验深拷贝成功
只对第一层级做拷贝
深拷贝数组(只拷贝第一级数组元素)
var array = [, , , ];
function copy (array) {
let newArray = []
for(let item of array) {
newArray.push(item);
}
return newArray;
}
var copyArray = copy(array);
copyArray[] = ;
console.log(array); // [1, 2, 3, 4]
console.log(copyArray); // [100, 2, 3, 4]
var array = [, , , ];
var copyArray = array.slice();
copyArray[] = ;
console.log(array); // [1, 2, 3, 4]
console.log(copyArray); // [100, 2, 3, 4]
var array = [, , , ];
var copyArray = array.concat();
copyArray[] = ;
console.log(array); // [1, 2, 3, 4]
console.log(copyArray); // [100, 2, 3, 4]
var array = [
{ number: },
{ number: },
{ number: }
];
var copyArray = array.slice();
copyArray[].number = ;
console.log(array); // [{number: 100}, { number: 2 }, { number: 3 }]
console.log(copyArray); // [{number: 100}, { number: 2 }, { number: 3 }]
深拷贝对象
var obj = {
name: '彭湖湾',
job: '学生'
}
function copy (obj) {
let newObj = {};
for (let item in obj ){
newObj[item] = obj
}
return newObj;
}
var copyObj = copy(obj);
copyObj.name = '我才不是彭湖湾呢! 哼 (。・`ω´・)';
console.log(obj); // {name: "彭湖湾", job: "学生"}
console.log(copyObj); // {name: "我才不是彭湖湾呢! 哼 (。・`ω´・)", job: Object}
该方法不做解释(逃...)
var obj = {
name: '彭湖湾',
job: '学生'
}
var copyObj = Object.assign({}, obj);
copyObj.name = '我才不叫彭湖湾呢! 哼 (。・`ω´・)';
console.log(obj); // {name: "彭湖湾", job: "学生"}
console.log(copyObj); // {name: "我才不叫彭湖湾呢! 哼 (。・`ω´・)", job: "学生"}
Object.assign:用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target),并返回合并后的target
var obj = {
name: '彭湖湾',
job: '学生'
}
var copyObj = { ...obj }
copyObj.name = '我才不叫彭湖湾呢! 哼 (。・`ω´・)'
console.log(obj.name) // 彭湖湾
console.log(copyObj.name) // 我才不叫彭湖湾呢! 哼 (。・`ω´・)
扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中
var obj = {
name: {
firstName: '彭',
lastName: '湖湾'
},
job: '学生'
}
var copyObj = Object.assign({}, obj)
copyObj.name.lastName = '湖水的小浅湾';
console.log(obj.name.lastName); // 湖水的小浅湾
console.log(copyObj.name.lastName); // 湖水的小浅湾
拷贝所有层级
1.JSON.parse(JSON.stringify(XXXX))
var array = [
{ number: },
{ number: },
{ number: }
];
var copyArray = JSON.parse(JSON.stringify(array))
copyArray[].number = ;
console.log(array); // [{number: 1}, { number: 2 }, { number: 3 }]
console.log(copyArray); // [{number: 100}, { number: 2 }, { number: 3 }]
能用大招杀的就不要用q杀嘛!!
2.手动写递归
var array = [
{ number: },
{ number: },
{ number: }
];
function copy (obj) {
var newobj = obj.constructor === Array ? [] : {};
if(typeof obj !== 'object'){
return;
}
for(var i in obj){
newobj[i] = typeof obj[i] === 'object' ?
copy(obj[i]) : obj[i];
}
return newobj
}
var copyArray = copy(array)
copyArray[].number = ;
console.log(array); // [{number: 1}, { number: 2 }, { number: 3 }]
console.log(copyArray); // [{number: 100}, { number: 2 }, { number: 3 }]
【注意】:上文的所有的示例都忽略了一些特殊的情况: 对对象/数组中的Function,正则表达式等特殊类型的拷贝
存在大量深拷贝需求的代码——immutable提供的解决方案
const { Map } = require('immutable')
const map1 = Map({ a: , b: , c: })
const map2 = map1.set('b', )
map1.get('b') //
map2.get('b') //
参考资料:

【javascript】浅谈javaScript的深拷贝的更多相关文章
- javascript——浅谈javascript模版(自定义)
/** * Created by Administrator on 15-1-19. */ function functionUtil() { } functionUtil = { //某个DOM节点 ...
- 浅谈javascript函数节流
浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...
- 浅谈JavaScript中的闭包
浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...
- 浅谈JavaScript浮点数及其运算
原文:浅谈JavaScript浮点数及其运算 JavaScript 只有一种数字类型 Number,而且在Javascript中所有的数字都是以IEEE-754标准格式表示的.浮点数的精度问题 ...
- 浅谈 JavaScript 编程语言的编码规范
对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编 ...
- 浅谈javascript的原型及原型链
浅谈javascript的原型及原型链 这里,我们列出原型的几个概念,如下: prototype属性 [[prototype]] __proto__ prototype属性 只要创建了一个函数,就会为 ...
- 浅谈JavaScript中的null和undefined
浅谈JavaScript中的null和undefined null null是JavaScript中的关键字,表示一个特殊值,常用来描述"空值". 对null进行typeof类型运 ...
- 浅谈JavaScript中的正则表达式(适用初学者观看)
浅谈JavaScript中的正则表达式 1.什么是正则表达式(RegExp)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...
- [转载]浅谈JavaScript函数重载
原文地址:浅谈JavaScript函数重载 作者:ChessZhang 上个星期四下午,接到了网易的视频面试(前端实习生第二轮技术面试).面了一个多小时,自我感觉面试得很糟糕的,因为问到的很多问题都 ...
随机推荐
- 2.如何使用matlab拟合曲线
输入数据 做数据曲线拟合,当然该有数据,本经验从以如下数据作为案例. 添加数据到curve fitting程序 这一步就是将你要拟合的数据添加到curve fitting程序中,同时给你拟合的曲线 ...
- JAVAEE——SSH项目实战01:SVN介绍、安装和使用方法
1 学习目标 1.掌握svn服务端.svn客户端.svn eclipse插件安装方法 2.掌握svn的基本使用方法 2 svn介绍 2.1 项目管理中的版本控制问题 通常软件开发由多人协作开发,如果对 ...
- ubuntu输入某个目录测试该目录里.C文件里代码行数shell脚本
#!/bin/bash echo "★☆ ★☆ ★☆ ★☆ ★☆★☆★☆ ★☆ ★☆ ★☆ ★☆★" echo "★☆ 统计代码行数 ☆★&qu ...
- js验证表单密码、用户名是否输入--JS的简单应用
在登录.注册时,我们经常会遇到下面这种情况,如果我们没有输入用户名.密码时,系统会弹出提示框.提示框信息提示内容是我们密码没有输入密码或者用户名等.那么这样的弹出框效果是如何实现的呢?文章标题既然与j ...
- java 邮件发送工具类
首先需要下载mail.jar文件,我个人通常是使用maven中心库的那个: <dependency> <groupId>javax.mail</groupId> & ...
- Kinect 常用识别手势
以下手势能被流畅的识别: ◎RaiseRightHand / RaiseLeftHand – 左手或右手举起过肩并保持至少一秒 ◎Psi –双手举起过肩并保持至少一秒 ◎Stop – 双手下垂. ◎W ...
- Interlocked原子函数陷阱
一.问题 windows api函数中提供了InterlockedExchange.InterlockedDecrement, InterlockedIncrement, ExInterlockedA ...
- Luogu 1060 开心的金明 / NOIP 2006 (动态规划)
Luogu 1060 开心的金明 / NOIP 2006 (动态规划) Description 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间他自己专用的很宽敞的房间.更让他高兴的是,妈妈昨 ...
- CJOJ 1943 【重庆八中模拟赛】寻找代表元(二分图最大匹配)
CJOJ 1943 [重庆八中模拟赛]寻找代表元(二分图最大匹配) Description 八中一共有n个社团,分别用1到n编号. 八中一共有m个人,分别用1到m编号.每个人可以参加一个或多个社团,也 ...
- vue+webpack项目实际工作中需要生成一个配置文件供生产环境使用
大家都知道webpack打包十分方便,但是在工作中,前端写好的项目需要后端进行部署,就需要有一个配置文件. 使用插件 : GenerateAssetPlugin , 使用方法 : 1 在项目中安装 ...