JavaScript复制变量三种方法实例详解


Posted in Javascript onJanuary 09, 2020

这篇文章主要介绍了JavaScript复制变量三种方法实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

直接将一个变量赋给另一个变量时,系统并不会创造一个新的变量,而是将原变量的地址赋给了新变量名。举个栗子:
复制代码
复制代码
let obj = {
a: 1,
b: 2,
};
let copy = obj;

obj.a = 5;
console.log(copy.a);
// Result
// a = 5; // 更改obj的值,copy变量的值也会改变
复制代码
复制代码
文章中提到了很多种办法,本文只选择了三种普遍的用法并分析了各自的优缺点,以及什么情况下使用哪种是最好的。

1. 原生方法解决
最简单的办法就是一个一个循环复制给新的变量。举栗:

复制代码
复制代码
function copy(mainObj) {
let objCopy = {}; // objCopy will store a copy of the mainObj
let key;

for (key in mainObj) {
objCopy[key] = mainObj[key]; // copies each property to the objCopy object
}
return objCopy;
}

const mainObj = {
a: 2,
b: 5,
c: {
x: 7,
y: 4,
},
}

console.log(copy(mainObj));
复制代码
复制代码
缺点:

1. objCopy 的Object.prototype 方法与mainObj 会不一样,通常情况下我们需要完全一样的副本时,这个办法并不适用。

2. 麻烦而且费时费事,代码无法重用。

3. 如果原来的变量中包含Object类型,复制时还是会把这个子变量的索引交给新的变量,并不是创建了新的副本。

2. 深度复制
利用JSON转换来复制变量。先将原先的变量转换为String然后再重新组装成JSON,这样会产生一个不一样的副本。

复制代码
复制代码
let obj = {
a: 1,
b: {
c: 2,
},
}

let newObj = JSON.parse(JSON.stringify(obj));

obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 2 } } (New Object Intact!)
复制代码
复制代码
缺点:

1. 变量很多的时候非常耗时耗内存。

3. 使用Object.assign()
使用举例:

复制代码
复制代码
// circular object
let obj = {
a: 'a',
b: {
c: 'c',
d: 'd',
},
}

obj.c = obj.b;
obj.e = obj.a;
obj.b.c = obj.c;
obj.b.d = obj.b;
obj.b.e = obj.b.c;

let newObj2 = Object.assign({}, obj);

console.log(newObj2);
复制代码
复制代码
可以把它封装成一个方法:

复制代码
// 封装成方法
// 返回一个新的变量副本
// get a copy of an object
function getNewObjectOf(src) {
return Object.assign({}, src);
}
复制代码
缺点:

1. 这个也是浅复制(仅复制顶层的属性,底层属性并不复制)。深层属性会同样返回索引,与原变量分享一个地址。(看下面栗子)

复制代码
复制代码
let obj = {
a: 1,
b: {
c: 2,
},
}
let newObj = Object.assign({}, obj);
console.log(newObj); // { a: 1, b: { c: 2} }

obj.a = 10;
console.log(obj); // { a: 10, b: { c: 2} }
console.log(newObj); // { a: 1, b: { c: 2} }

newObj.a = 20;
console.log(obj); // { a: 10, b: { c: 2} }
console.log(newObj); // { a: 20, b: { c: 2} }

newObj.b.c = 30;
console.log(obj); // { a: 10, b: { c: 30} }
console.log(newObj); // { a: 20, b: { c: 30} }

// 注意: 所有变量 的 *。b.c 都等于30; 原因看上面解释。
复制代码
复制代码

结论:
原文中还有很多其他的办法,但此文仅摘抄出最有用的几个。一般不会用到第一种办法,如需要复制的变量有很多层的话,需要用第二种办法来复制,如果变量仅仅包含一层(如json格式的配置信息变量),第三种是最高效的。

再次给出封装好的方法:

// 封装成方法// 返回一个新的变量副本
// get a copy of an object
function getNewObjectOf(src) {
 return Object.assign({}, src);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用cssText批量修改样式
Aug 29 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
AngularJS基础 ng-keyup 指令简单示例
Aug 02 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
微信小程序之页面拦截器的示例代码
Sep 07 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
js实现左右轮播图
Jan 09 #Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 #Javascript
一看就会的vuex实现登录验证(附案例)
Jan 09 #Javascript
Websocket 向指定用户发消息的方法
Jan 09 #Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 #Javascript
JS实现商品橱窗特效
Jan 09 #Javascript
微信小程序实现页面浮动导航
Jan 08 #Javascript
You might like
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
2017/04/27 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
[01:04:14]OG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python中将字典转换成其json字符串
2014/07/16 Python
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
Python 实现两个列表里元素对应相乘的方法
2018/11/14 Python
python版大富翁源代码分享
2018/11/19 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
代码中finally中的代码会不会执行
2012/02/06 面试题
早餐连锁店计划书
2014/01/08 职场文书
经典促销广告词大全
2014/03/19 职场文书
促销活动计划书
2014/05/02 职场文书
化工专业自荐书
2014/06/16 职场文书
公司委托书格式范本
2014/09/16 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
导游词之吉林花园山
2019/10/17 职场文书
Golang 实现超大文件读取的两种方法
2021/04/27 Golang