JS的拷贝可分为浅拷贝和深拷贝:

浅拷贝:如果数组元素是基本类型,就会拷贝一份,互不影响,而如果是对象或者数组,就会只拷贝对象和数组的引用,这样我们无论在新旧数组进行了修改,两者都会发生变化。

深拷贝:就是指完全的拷贝一个对象,即使嵌套了对象,两者也相互分离,修改一个对象的属性,也不会影响另一个。

通常我们用的slice(截取)、concat(拼接)函数,都是浅拷贝。

// 可用concat、slice返回一个新数组的特性来实现拷贝
var arr = ['old', 1, true, null, undefined];
var new_arr = arr.concat(); // 或者var new_arr = arr.slice()也是一样的效果;
new_arr[0] = 'new';
console.log(arr); // ["old", 1, true, null, undefined]
console.log(new_arr); // ["new", 1, true, null, undefined] // 数组嵌套了对象或者数组的话用concat、slice拷贝只要有修改会引起新旧数组都一起改变
var arr = [{old: 'old'}, ['old']];
var new_arr = arr.concat(); // 或者var new_arr = arr.slice()也是一样的效果;
arr[0].old = 'new';
new_arr[1][0] = 'new';
console.log(arr); // [{old: 'new'}, ['new']]
console.log(new_arr); // [{old: 'new'}, ['new']]

如果需要深拷贝,有如下2种方法:

1:可拷贝数组和对象(但不能拷贝函数)

var arr = ['old', 1, true, ['old1', 'old2'], {old: 1}]
var new_arr = JSON.parse(JSON.stringify(arr))
console.log(new_arr);

2.函数实现,拷贝的时候判断属性值的类型,如果是对象,继续递归调用深拷贝函数

function(obj) {
// 只拷贝对象
if (typeof obj !== 'object') return;
// 根据obj的类型判断是新建一个数组还是一个对象
var newObj = obj instanceof Array ? [] : {};
for (var key in obj) {
// 遍历obj,并且判断是obj的属性才拷贝
if (obj.hasOwnProperty(key)) {
// 判断属性值的类型,如果是对象递归调用深拷贝
newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
//改成下面的代码,就是浅拷贝
//newObj[key] = obj[key];
}
}
return newObj;
}

参考文章:https://blog.csdn.net/qq_37268201/article/details/80448848  

JS数据拷贝的更多相关文章

  1. JS深浅拷贝及其实现

    基本数据类型和引用数据类型 JS数据分为基本数据类型和引用数据类型.基本数据类型的变量存储在栈中,引用数据类型则存储在堆中,引用数据类型的存储地址则保存在栈中. 下面来看一个小例子 // 基本数据类型 ...

  2. JS 数据类型转换

    JS 数据类型转换 方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把 ...

  3. JS 深度拷贝 Object Array

    JS 深度拷贝 Object Array function cloneObj(o) { var isArray = o instanceof Array; var isObject = o insta ...

  4. docker数据拷贝

    docker数据拷贝的方式有很多种,下面介绍几种数据拷贝的方式:此处只是介绍几种简易的方式,更多方式可以google下. 从容器中向主机拷贝数据 docker cp <containerId&g ...

  5. JS数据类型转换

    JS 数据类型转换 方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把 ...

  6. scroll pagination.js数据重复加载、分页问题

    scroll pagination.js数据重复加载.分页问题 解决办法 参考资料: http://blog.csdn.net/dyw442500150/article/details/1753242 ...

  7. template.js 数据渲染引擎

    template.js 数据渲染引擎 template.js是一款JavaScript模板引擎,用来渲染页面的. 原理:提前将Html代码放进编写模板 <script id="tpl& ...

  8. js 深度拷贝

    js 数据类型 分为2种: 基本数据类型:Undefined.Null.Boolean.Number.String 复杂数据类型:Object.Array.function 他们的区别是在内存中的存储 ...

  9. m_Orchestrate learning system---三十五、php数据和js数据的解耦:php数据(php代码)不要放到js代码中

    m_Orchestrate learning system---三十五.php数据和js数据的解耦:php数据(php代码)不要放到js代码中 一.总结 一句话总结:也就是以html为中介,用html ...

随机推荐

  1. 解决zabbix的cannot allocate shared memory of size错误

    问题状态:zabbix_server 不能启动,系统CentOS 6.7 原因分析:这是因为内核对share memory的限制造成的. 用到如下命令ipcs [-m|l|a],sysctl [-a| ...

  2. 8月清北学堂培训 Day2

    今天是赵和旭老师的讲授~ 背包 dp 模型 背包 dp 一般是给出一些“物品”,每个物品具有一些价值参数和花费参数,要求 在满足花费限制下最大化价值或者方案数. 最简单几种类型以及模型: 0/1背包: ...

  3. MySQL数据分析-(9)库操作补充:用户管理和权限管理

    大家好,我是jacky,很高兴继续跟大家学习MySQL数据分析实战,本节课的主题是用户管理和权限管理: 在分享之前,jacky在不厌其烦的强调一下:学习任何一门学科和技能,最重要的是捋清逻辑,我们要知 ...

  4. pytesseract.pytesseract.TesseractNotFoundError: tesseract is not installed or it's not in your path && FileNotFoundError: [WinError 2] 系统找不到指定的文件。

    C:\Users\k\Desktop\test>python test.py Traceback (most recent call last): File , in run_tesseract ...

  5. springboot中web应用的统一异常处理

    在web应用中,请求处理过程中发生异常是非常常见的情况.springboot为我们提供了一个默认的映射:/error,当处理中抛出异常之后,会转到该请求中处理,并且该请求有一个全局的错误页面用来展示异 ...

  6. ArcGIS Server“无法创建站点,计算机不具有有效的的许可”

    问题描述 ArcGIS Server10.5安装过程中,所有授权和破解均已完成,但是最后一步创建站点的时候显示创建失败,会出现如下图所示的问题:既“无法创建站点,计算机不具有有效的的许可…”,经历了卸 ...

  7. StringUtils的isNotEmpty,isNotBlank方法的区别

    这两个用着用着老是混淆或者忘记,今天写一下做个笔记,对比下两个判断方法的区别 isNotEmpty: 判断某字符串是否非空,等于!isEmpty(String str),这里不能排除空格字符 Stri ...

  8. 以太坊联盟链 parity 节点搭建

    https://www.cnblogs.com/sumingk/articles/9097996.html 上一篇文章介绍了以太坊私有链 geth节点的搭建,本篇介绍下企业级应用 联盟链搭建,运用pa ...

  9. apt如何列出所有已经安装的软件包

    apt如何列出所有已经安装的软件包 转 https://www.helplib.com/ubuntu/article_155294 问题: 我想将所有已安装软件包的列表输出到文本文件中,以便我可以查看 ...

  10. 一篇文章搞懂Python装饰器所有用法

    01. 装饰器语法糖 如果你接触 Python 有一段时间了的话,想必你对 @ 符号一定不陌生了,没错 @ 符号就是装饰器的语法糖. 它放在一个函数开始定义的地方,它就像一顶帽子一样戴在这个函数的头上 ...