javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法

前言

在js中,数组和对象的复制如果使用=号来进行复制,那只是浅拷贝。如下图演示: 
 
如上,arr的修改,会影响arr2的值,这显然在绝大多数情况下,并不是我们所需要的结果。 
因此,数组以及对象的深拷贝就是javascript的一个基本功了。

数组的深拷贝

条条大道通罗马,实现数组的深拷贝,是有好几种方法的。举例如下:

for 循环实现数组的深拷贝

for循环是非常好用的。如果不知道高级方法,通过for循环能够完成我们大多数的需求。

var arr = [1,2,3,4,5]
var arr2 = copyArr(arr)
function copyArr(arr) {
let res = []
for (let i = 0; i < arr.length; i++) {
res.push(arr[i])
}
return res
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

如上,通过对数组的for循环,即可实现对数组的深拷贝了。

slice 方法实现数组的深拷贝

这个代码实现非常简单。原理也比较好理解,他是将原数组中抽离部分出来形成一个新数组。我们只要设置为抽离全部,即可完成数组的深拷贝。代码如下:

var arr = [1,2,3,4,5]
var arr2 = arr.slice(0)
arr[2] = 5
console.log(arr)
console.log(arr2)
  • 1
  • 2
  • 3
  • 4
  • 5

运行结果如下: 
 
更多 slice 内容请访问 w3school JavaScript slice 方法

concat 方法实现数组的深拷贝

这个代码也非常简单,原理更加粗暴。它是用于连接多个数组组成一个新的数组的方法。那么,我们只要连接它自己,即可完成数组的深拷贝。代码如下:

var arr = [1,2,3,4,5]
var arr2 = arr.concat()
arr[2] = 5
console.log(arr)
console.log(arr2)
  • 1
  • 2
  • 3
  • 4
  • 5

运行结果如下: 
 
更多 concat 内容请访问 w3school JavaScript concat 方法

2017年10月31日补充:ES6扩展运算符实现数组的深拷贝

OK,以上之前讲的方法全部过时了,用下面的方法实现数组的深拷贝是最简单的。

var arr = [1,2,3,4,5]
var [ ...arr2 ] = arr
arr[2] = 5
console.log(arr)
console.log(arr2)
  • 1
  • 2
  • 3
  • 4
  • 5

运行结果如下:

对象的深拷贝

对象的深拷贝相比数组也没有困难许多,列举两个方法。

万能的for循环实现对象的深拷贝

在很多时候,for循环能够解决大问题。

var obj = {
name: 'FungLeo',
sex: 'man',
old: '18'
}
var obj2 = copyObj(obj)
function copyObj(obj) {
let res = {}
for (var key in obj) {
res[key] = obj[key]
}
return res
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

转换成json再转换成对象实现对象的深拷贝

上面的代码实在是比较长,所以,用一个更暴力的方法吧!代码如下:

var obj = {
name: 'FungLeo',
sex: 'man',
old: '18'
}
var obj2 = JSON.parse(JSON.stringify(obj))
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

这个原理没什么好解释的,实在是够简单粗暴的啦!

2017年10月31日补充: 扩展运算符实现对象的深拷贝

var obj = {
name: 'FungLeo',
sex: 'man',
old: '18'
}
var { ...obj2 } = obj
obj.old = '22'
console.log(obj)
console.log(obj2)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

运行结果如下:

小结

数组和对象的深拷贝是js中最常见的应用。理解各种方法是必须的。希望对大家有所帮助。 
本文中并没有对异常进行处理,主要在讲原理。更多的数组以及对象的操作方法,可以参考lodash的源码,查看它的源码可以让你的js基础变得非常牢固。我也在学习中。

2017年10月31日补充,使用es6提供的扩展运算符的方法实现深拷贝,简单,高效。并且,对象的深拷贝不会像使用 JSON 方法深拷贝一样,丢失函数等信息,只能用来深拷贝 JSON 数据格式的对象。推荐大家使用。

补充一个数组去重的方法

function dedupe(array) {
return [...new Set(array)]
}
var arr = [1,2,2,3,3,4,4,5,5]
console.log(dedupe(arr))
  • 1
  • 2
  • 3
  • 4
  • 5

运行结果如下:

JS 数组以及对象的深拷贝总结的更多相关文章

  1. JS 数组、对象的深拷贝

    博客地址:https://ainyi.com/72 JavaScript 程序中,对于简单的数字.字符串可以通过 = 赋值拷贝 但是对于数组.对象.对象数组的拷贝,就有浅拷贝和深拷贝之分 浅拷贝就是当 ...

  2. javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法

    前言 for,slice(0),concact() 在js中,数组和对象的复制如果使用=号来进行复制,那只是浅拷贝.如下图演示:  如上,arr的修改,会影响arr2的值,这显然在绝大多数情况下,并不 ...

  3. js 数组、对象转json 以及 json转 数组、对象

    let jsonObj = $.parseJSON(jsonStr); //json字符串转化成json对象(jq方法) var jsonObj = JSON.parse(jsonStr); //js ...

  4. JS数组和对象的浅拷贝和深拷贝

    共勉~ 在许多编程语言中,传递参数和赋值是通过值的直接复制或者引用复制完成的.在JavaScript中,对于值是直接进行复制还是引用复制在语法上是没有区别的,完全是根据值的类型来决定的. 在JavaS ...

  5. js数组和对象相等判断、拷贝详解(结合几个现象讲解引用数据类型的趣事)

    序言 最近遇到几个js引用数据类型造成的bug,今天结合bug详细分析一下,避免以后再犯,也希望能帮大家提个醒,强化js基本功. 目录 1.浅拷贝.深拷贝,解决变量赋值相互影响问题 2.判断2个数组. ...

  6. JS实现对对象的深拷贝

    手动遍历对象拷贝 /** * 深拷贝 * @param {*} obj 拷贝对象(object or array) * @param {*} cache 缓存数组 */ function deepCo ...

  7. js 数组、对象转json 以及json转 数组、对象

    1.JS对象转JSON 方式:JSON.stringify(obj) var json = {"name":"iphone","price" ...

  8. JS数组与对象的遍历方法大全

    本文简单解析各种数组和对象属性的遍历方法: 原生for循环.for-in及forEach ES6 for-of方法遍历类数组集合 Object.key()返回键名的集合 jQuery的$.each() ...

  9. js数组和对象的区别,ajax传入多个参数值,ajax传多个数组数据

    数组分为索引数组和关联数组 js中先声明一个空数组 arr = [] 索引数组 索引是整数,如arr[0] = 'a' 关联数组 索引是自定义的字符串,如arr['a'] = 'a' js中的对象 你 ...

随机推荐

  1. angular中定义全局变量及全局变量的使用

    一个例子,定义了两个变量,并且把变量显示出来: <!DOCTYPE html> <html ng-app="myApp"> <head> < ...

  2. ios开发-调用系统自带手势

    在 iPhone 或 iPad 的开发中,除了用 touchesBegan / touchesMoved / touchesEnded 这组方法来控制使用者的手指触控外,也可以用 UIGestureR ...

  3. Python 小程序,对文件操作及其它

    以下是自己写的几个对文件操作的小程序,里面涉及到文件操作,列表(集合,字典)的运用等.比方说,从文件里读取一行数据.分别存放于列表中,再对列表进行操作.如去掉里面的反复项.排序等操作. 常见对文件里行 ...

  4. java线程-java多线程之可见性

    可见性:一个线程对共享变量值的修改,能够及时呗其他线程看到. 共享变量:如果一个变量在多个线程的内存中都存在副本,那么这个变量就是这几个线程的共享变量. java内存模型(JMM) 描述了java程序 ...

  5. HttpClient设置超时(转)

    HttpClient  4.5版本设置连接超时时间-CloseableHttpClient设置Timeout(区别于4.3.2) HttpClient升级到4.5版本后,API有很多变化,HttpCl ...

  6. 在 VirtualBox 虚拟机中安装 Arch Linux 系统指南

    How to install Arch Linux on VirtualBox 在 VirtualBox 虚拟机中安装 Arch Linux 系统指南 本文导航 1.Arch Linux 软件仓库2. ...

  7. 搭建web项目结合spring+cxf的webservice服务

    服务端: 服务端和客户端都需要引入包 antlr-2.7.7.jar aopalliance-1.0.jar asm-3.3.jar commons-collections-3.2.1.jar com ...

  8. cat /proc/iomem

    在proc目录下有iomem和ioports文件,其主要描述了系统的io内存和io端口资源分布. 对于外设的访问,最终都是通过读写设备上的寄存器实现的,寄存器不外乎:控制寄存器.状态寄存器和数据寄存器 ...

  9. [Asp.net]缓存之页面缓存,控件缓存,缓存依赖

    写在前面 上篇文章介绍了缓存的基本概念及用途,另外也举了一个简单的例子,数据缓存(将一些耗费时间的数据加入到一个对象缓存集合中,以键值的方式存储.可以通过使用Cache.Insert()方法来设置缓存 ...

  10. 用C语言实现循环左移和循环右移

    有天重建一段代码时,遇到了循环右移指令,不知道用C语言怎么实现,后来得到小伟指点,感谢.. me 15:56:38004BD2C9 8B55 F8 MOV EDX,DWORD PTR SS:[EBP- ...