参考:Copying Objects in JavaScript - Orinami Olatunji(@orinamio_) October 23, 2017

 
 直接将一个变量赋给另一个变量时,系统并不会创造一个新的变量,而是将原变量的地址赋给了新变量名。举个栗子:
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 复制变量的三种方法的更多相关文章

  1. [转]Javascript定义类的三种方法

    作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html 将近2 ...

  2. javascript生成对象的三种方法

    /** js生成对象的三种方法*/ // 1.通过new Object,然后添加属性 示例如下: var people1 = new Object(); people1.name = 'xiaohai ...

  3. [转]SharePoint 2010/2013 使用Javascript来判断权限的三种方法

    本文讲述SharePoint 2010/2013 使用Javascript来判断权限的三种方法的实现方式及其优缺点. 1. 根据用户所在的SharePoint组(比如用户在Leader 组才可以使用审 ...

  4. JavaScript去除空格的三种方法(正则/传参函数/trim)

    方法一: 个人认为最好的方法.采用的是正则表达式,这是最核心的原理. 其次.这个方法使用了JavaScript 的prototype 属性 其实你不使用这个属性一样可以用函数实现.但这样做后用起来比较 ...

  5. linux修改环境变量的三种方法【转】

    [环境变量配置的三个方法] 如想将一个路径加入到$PATH中,可以像下面这样做:  1. 控制台中,不赞成使用这种方法,因为换个shell,你的设置就无效了,因此这种方法仅仅是临时使用,以后要使用的时 ...

  6. 交换两个变量的值,不借助第三个变量的 三种方法(JS实现)

    第一种:算术运算法 var a = 10; var b = 12; a = b - a; b = b - a; a = b + a; 它的原理是:把a.b看做数轴上的点,围绕两点间的距离来进行计算.具 ...

  7. JavaScript RegExp 对象的三种方法

    JavaScript RegExp 对象有 3 个方法:test().exec() 和 compile().(1) test() 方法用来检测一个字符串是否匹配某个正则表达式,如果匹配成功,返回 tr ...

  8. JavaScript调用后台的三种方法实例(包含两种Ajax)

    方法一:直接使用<%=%>调用(ASPX页面) 前台JS,代码如下: <script type="text/javascript"> var methodS ...

  9. ubuntu下设置环境变量的三种方法【转】

    转自:http://blog.chinaunix.net/uid-26916352-id-3208366.html 通常设置环境变量有三种方法: 一.临时设置 export PATH=/home/ya ...

随机推荐

  1. C基础知识(5):指针--传递指针给函数&返回指针的函数

    下面从3个代码例子分别讲述以下2个知识点: (1) 传递指针给函数(参数类型为指针) (2) 返回指针的函数(返回类型为指针) #include <stdio.h> // 传递指针给函数& ...

  2. SecureCRT配置华为S5700交换机

    我准备从交换机中监控某台设备的流量,所以要配置交换机的某个口作为镜像口,用来下载另外一个指定端口的流量. 第一步:华为5700交换机 简而言之网口部分除了最后四个都是用来连接下级网络设备的,最后四个端 ...

  3. 解决网页ICON图标无法显示的问题

    第一步:检查下“<link rel="shortcut icon" href="http://www.bhcode.net/favicon.ico" ty ...

  4. C语言 俄罗斯方块的实现1 全局变量

    目录 全局变量 程序的模块化之MVC 关于俄罗斯方块的代码实现要点 使用数组表示背景和方块 方块表示及其初始化 要让游戏动起来 方块自动下落 全局变量 简而言之,定义在函数外的变量,就是全局变量. 所 ...

  5. SpringBoot上传文件

    1.pom文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w ...

  6. 编写java 程序与Linux进行远程连接并运行linux下的脚本

    我这里是通过连接到centos6.5的大数据集群的主节点,并通过运行hadoop的启动脚本来启动hadoop 本人采用的是SSH的方式连接 通过创建maven项目来编写代码,在编写代码之前需要先导入架 ...

  7. 使用feign上传图片

    1.添加依赖,支持SpringEncoder <dependency> <groupId>io.github.openfeign.form</groupId> &l ...

  8. node项目自动化部署--基于Jenkins,Docker,Github(3)自动化部署

    GitHub仓库 由于现在的代码基本上都是多人合作开发,所以肯定会用到像 git 这样的版本控制工具 所以这里使用 GitHub 来做一个演示 首先我们需要在github上新建一个仓库 点击New来新 ...

  9. 什么是数据传输服务DTS

    数据传输服务(Data Transmission Service) DTS支持关系型数据库.NoSQL.大数据(OLAP)等数据源间的数据传输. 它是一种集数据迁移.数据订阅及数据实时同步于一体的数据 ...

  10. golang 组装返回json数据,提供api接口

    model里 package model type Setting struct { Key string `gorm:"primary_key" json:"key&q ...