浅拷贝与深拷贝

一、数据类型

数据分为基本数据类型(String, Number, boolean, Null, Undefined,Symbol)和对象数据类型。

  • 基本数据类型的特点:直接存储在栈(stack)中的数据
  • 对象数据类型的特点:存储的是该对象在栈中引用,真实的数据存放在堆内存里

二、浅拷贝与深拷贝

深拷贝和浅拷贝是只针对Object和Array这样的对象数据类型的。

深拷贝和浅拷贝的示意图大致如下:

image

浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。

三、浅拷贝的实现方式

1.直接赋值一个变量

  let obj = {username: 'kobe', age: 39, sex: {option1: '男', option2: '女'}};
  let obj1 = obj;
  obj1.sex.option1 = '不男不女'; // 修改复制的对象会影响原对象
  console.log(obj1, obj);

image

2.Object.assign()

let obj = {
    username: 'kobe'
    };
let obj2 = Object.assign(obj);
obj.username = 'wade';
console.log(obj);//{username: "wade"}

3.Array.prototype.concat()

let arr = [1, 3, {
    username: 'kobe'
    }];
let arr2=arr.concat();    
arr2[2].username = 'wade';
console.log(arr);

修改新对象会改到原对象:

image

4.Array.prototype.slice()

let arr = [1, 3, {
    username: ' kobe'
    }];
let arr3 = arr.slice();
arr3[2].username = 'wade'
console.log(arr);

同样修改新对象会改到原对象:

image

关于Array的slice和concat方法的补充说明:Array的slice和concat方法不修改原数组,只会返回一个浅复制了原数组中的元素的一个新数组。

原数组的元素会按照下述规则拷贝:

  • 如果该元素是个对象引用(不是实际的对象),slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变,则新的和原来的数组中的这个元素也会发生改变。
  • 对于字符串、数字及布尔值来说(不是 String、Number 或者 Boolean 对象),slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值,将不会影响另一个数组。

可能这段话晦涩难懂,我们举个例子,将上面的例子小作修改:

let arr = [1, 3, {
    username: ' kobe'
    }];
let arr3 = arr.slice();
arr3[1] = 2
console.log(arr,arr3);

image

四、深拷贝的实现方式

1.JSON.parse(JSON.stringify())

let arr = [1, 3, {
    username: ' kobe'
}];
let arr4 = JSON.parse(JSON.stringify(arr));
arr4[2].username = 'duncan'; 
console.log(arr, arr4)

image

原理: 用JSON.stringify将对象转成JSON字符串,再用JSON.parse()把字符串解析成对象,一去一来,新的对象产生了,而且对象会开辟新的栈,实现深拷贝。

这种方法虽然可以实现数组或对象深拷贝,但不能处理函数

let arr = [1, 3, {
    username: ' kobe'
},function(){}];
let arr4 = JSON.parse(JSON.stringify(arr));
arr4[2].username = 'duncan'; 
console.log(arr, arr4)

image

这是因为JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串,不能接受函数

2.手写递归方法

递归方法实现深度克隆原理:遍历对象、数组直到里边都是基本数据类型,然后再去复制,就是深度拷贝

    //定义检测数据类型的功能函数
    function checkedType(target) {
      return Object.prototype.tostring.call(target).slice(8, -1)
    }
    //实现深度克隆---对象/数组
    function clone(target) {
      //判断拷贝的数据类型
      //初始化变量result 成为最终克隆的数据
      let result, targetType = checkedType(target)
      if (targetType === 'object') {
        result = {}
      } else if (targetType === 'Array') {
        result = []
      } else {
        return target
      }
      //遍历目标数据
      for (let i in target) {
        //获取遍历数据结构的每一项值。
        let value = target[i]
        //判断目标结构里的每一值是否存在对象/数组
        if (checkedType(value) === 'Object' ||
          checkedType(value) === 'Array') { //对象/数组里嵌套了对象/数组
          //继续遍历获取到value值
          result[i] = clone(value)
        } else { //获取到value值是基本的数据类型或者是函数。
          result[i] = value;
        }
      }
      return result
    }

3.函数库lodash

该函数库也有提供_.cloneDeep用来做 Deep Copy

var _ = require('lodash');
var obj1 = {
    a: 1,
    b: { f: { g: 1 } },
    c: [1, 2, 3]
};
var obj2 = _.cloneDeep(obj1);
console.log(obj1.b.f === obj2.b.f);
// false

参考文章

什么是js深拷贝和浅拷贝及其实现方式

JavaScript浅拷贝和深拷贝

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Laoqi's Linux运维专列

元祖+列表

4956
来自专栏Vamei实验室

Java基础03 构造器与方法重载

在方法与数据成员中,我们提到,Java中的对象在创建的时候会初始化(initialization)。初始化时,对象的数据成员被赋予初始值。我们可以显式初始化。如...

20110
来自专栏转载gongluck的CSDN博客

python笔记:#013#高级变量类型

高级变量类型 目标 列表 元组 字典 字符串 公共方法 变量高级 知识点回顾 Python 中数据类型可以分为 数字型 和 非数字型 数字型 整型 (in...

3419
来自专栏逆向技术

C语言第八讲,指针*

            C语言第八讲,指针* 一丶简单理解指针 说到指针,很多人都说是C语言的重点. 也说是C语言的难点. 其实指针并不是难.而是很多人搞不清地...

3396
来自专栏我的博客

Zend FrameWork程序员来看看

1.php文件格式 只有php代码的文件结尾不允许出现?>结束 缩进要用4个空格而不是用tab 每行代码长度在80~120字符 2.命名约定 类名只允许使用数字...

3285
来自专栏学海无涯

19.Swift学习之构造函数与析构函数

1003
来自专栏Python

函数相关知识汇总

一.函数的定义 定义函数的规则: 1.定义:def 关键词开头,空格之后接函数名称和圆括号()。 2.参数:圆括号用来接收参数。若传入多个参数,参数之间用逗号分...

2595
来自专栏C++

python笔记:#013#高级变量类型

1573
来自专栏陈树义

《JavaScript程序设计》第2课:JS类型系统

JS类型系统可以分为标准类型和对象类型,进一步标准类型又可以分为原始类型和引用类型,而对象类型又可以分为内置对象类型、普通对象类型、自定义对象类型。 ? 1. ...

3357
来自专栏PHP在线

欢迎来到phpdaily

1.Null类型,表示空对象指针,使用typeof检测会返回object。 如果定义的变量在将来用于保存对象,最好将该变量初始化为NUll.可以体现null作为...

3247

扫码关注云+社区

领取腾讯云代金券