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 相关文章推荐
学习并汇集javascript匿名函数
Nov 25 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
jquery获取节点名称
Apr 26 Javascript
详解javascript new的运行机制
Jan 26 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
浅析Angular19 自定义表单控件
Jan 31 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
JavaScript两种计时器的实例讲解
Jan 31 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 Javascript
js实现简单的点名器随机色实例代码
Sep 20 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
自己前几天写的无限分类类
2007/02/14 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
Laravel find in set排序实例
2019/10/09 PHP
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
Python的Flask框架中SQLAlchemy使用时的乱码问题解决
2015/11/07 Python
python迭代器与生成器详解
2016/03/10 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
基于Python实现简单学生管理系统
2020/07/24 Python
python实现按日期归档文件
2021/01/30 Python
电子商务应届生求职信
2013/11/16 职场文书
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
学校门卫管理制度
2014/01/30 职场文书
合伙购房协议样本
2014/10/06 职场文书
趣味运动会开幕词
2015/01/28 职场文书
综合素质自我评价评语
2015/03/06 职场文书
入党团支部推荐意见
2015/06/02 职场文书
理想国读书笔记
2015/06/25 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
浅谈怎么给Python添加类型标注
2021/06/08 Python