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 相关文章推荐
ext for eclipse插件安装方法
Apr 27 Javascript
jQuery实现点击标题输入详细信息
Apr 16 Javascript
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
jquery 检测元素是否存在的实例代码
Nov 19 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 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获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
JS实现跟随鼠标立体翻转图片的方法
2015/05/04 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
很棒的vue弹窗组件
2017/05/24 Javascript
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
Python3运算符常见用法分析
2020/02/14 Python
pytorch实现查看当前学习率
2020/06/24 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
员工自我鉴定范文
2013/10/06 职场文书
施工安全协议书
2013/12/11 职场文书
护士毕业自我鉴定
2014/02/07 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
见习报告的格式
2014/10/31 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
python自动化之如何利用allure生成测试报告
2021/05/02 Python
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers
windows系统搭建WEB服务器详细教程
2022/08/05 Servers