铁雪资源网 Design By www.gsvan.com

这篇文章主要介绍了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,复制,变量

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

评论“JavaScript复制变量三种方法实例详解”

暂无JavaScript复制变量三种方法实例详解的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?