专栏首页全栈开发之路JS中数组的深拷贝和浅拷贝

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 条评论
登录 后参与评论

相关文章

  • Linux命令

    参考:https://hadoop.apache.org/docs/r1.0.4/cn/hdfs_shell.html#mv

    杨肆月
  • 小程序后台开发

    4.20 初步想法: 第一步:搭建个后台界面,加个富文本功能,能编辑内容; 第二步:后台和腾讯云数据库连接; 第三步:小程序与后台连接

    杨肆月
  • JS执行上下文/作用域/闭包

    2)一般来说内部能访问外部,外部不能访问内部。 那么怎么让外部也能访问内部? —— return

    杨肆月
  • 很多高手的JavaScript代码里都有array.slice(0),这语句有什么用

    这个stackoverflow链接里有详细讨论。 https://stackoverflow.com/questions/5024085/whats-the-...

    Jerry Wang
  • 【枕边算法】回文算法题PHP实现

    ①选择任一数值; ②翻转此数值(例如,选择13则翻转为31),并将原数值和翻转数值相加(13+31); ③相加结果若不是回文,则返回②反复执行,若是回文则终止算...

    硬核项目经理
  • 检索 COM 类工厂中 CLSID 为 {000209FF-0000-0000-C000-000000000046} 的组件时失败,原因是出现以下错误: 80070005

    用户5640963
  • [WCF REST] 解决资源并发修改的一个有效的手段:条件更新(Conditional Update)

    条件获取(Conditional Update)可以避免相同数据的重复传输,进而提高性能。条件更新(Conditional Update)用于解决资源并发操作问...

    蒋金楠
  • MVC、MVP以及Model2[下篇]

    条件获取(Conditional Update)可以避免相同数据的重复传输,进而提高性能。条件更新(Conditional Update)用于解决资源并发操作问...

    蒋金楠
  • 公众平台新增小程序运维中心等功能

    “ 公众平台新增小程序运维中心,可方便开发者及时了解到自己小程序的运行状况。第三方平台新增能力,可帮助商户识别来自不同公众号或小程序的用户。” 01 — 小程序...

    花叔
  • 资源 | 免费乳腺癌X光片检测:网友50块GPU搭建AI医疗图像早筛平台

    去年的时候,我一个在芝加哥比我小几级的南京大学校友去世了。乳腺癌,发现得晚了,才 34 岁,留下了一个 4 岁的孩子。非常可惜。想想能不能做点什么事情可以帮助大...

    机器之心

扫码关注云+社区

领取腾讯云代金券