JS中数组的深拷贝和浅拷贝

一、什么是深拷贝、浅拷贝?

JS里的两种数据类型

1、基本类型:Number、String、Boolean

变量直接按值存放,存放在栈内存中,可直接访问

2、引用类型:Object、Array

变量保存的是一个指针,存放在栈内存中,指针指向一个位置,这个位置就是存放在堆内存引用类型的值

So

浅拷贝会导致引用类型A和引用类型B指向同一块内存地址。改变其中一方内容,都是在原来的内存上做修改会导致对象和源对象都发生改变

深拷贝是开辟一块新的内存地址,将源对象的各个属性逐个复制过去,对拷贝对象和源对象各自的操作互不影响

二、实现方法

1、浅拷贝

1)简单复制 “=”

2)Object.assign(target, ...source)方法:将所有可枚举属性的值从一个或多个源对象(source)复制到目标对象(target)

const object1 = { a: 1, b: 2, c: 3 }; const object2 = Object.assign({c: 4, d: 5}, object1); console.log(object2.c === object2.c); //true

3)Array的slice()和concat()

slice(begin, end)返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组中,原始数组不修改

arr1.concat(arr2)用于合并两个或多个数组,此方法不改变现有数组,而是返回一个新数组

如果是对这样的一维数组?:arr[1, 2, 6, 7, 10, 22]做了slice/concat

看起来都像是深拷贝了,没影响原数组

但是!对于这样的二维数组(数组中有对象Object/Array)就只是复制了引用,改变其中的值还是会影响原数组

array [1, [1,2,3], {name:"array"}]; var array_concat = array.concat(); var array_slice = array.slice(0); array_concat[1][0] = 5; //改变array_concat中数组元素的值 console.log(array[1]); //[5,2,3] console.log(array_slice[1]); //[5,2,3] array_slice[2].name = "array_slice"; //改变array_slice中对象元素的值 console.log(array[2].name); //array_slice console.log(array_concat[2].name); //array_slice

2、深拷贝

1、JSON.parse()和JSON.stringify()

此方法最简单

JSON.var arr = [1, [2,88,77], 5, 7, 23] var arrC = JSON.parse(JSON.stringify(arr)) arrC[1][2] = 99 console.log(arr[1])//[2,88,77]

缺点:如果是函数就不能处理

2、jQuery.extend()方法源码实现

好麻烦啊,懒得看了

3、自己实现的

好麻烦啊,懒得看了

参考:https://github.com/wengjq/Blog/issues/3

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券