JavaScript复制变量的三种常用方法详解

本文主要介绍JavaScript中复制变量的三种常用方法，并通过具体示例进行详细解析，旨在为读者的学习与工作提供具有参考价值的技术指南。

直接赋值的引用问题

在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类型，复制时还是会把这个子变量的索引交给新的变量，并不是创建了新的副本。

JSON序列化实现深拷贝

2. 深度复制 利用JSON序列化与反序列化来实现变量复制。先将原变量转换为字符串，再重新解析为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. 变量很多的时候非常耗时耗内存。

Object.assign浅拷贝应用

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);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。