javascript深拷贝和浅拷贝的区别有哪些

这篇文章主要介绍“javascript深拷贝和浅拷贝的区别有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“javascript深拷贝和浅拷贝的区别有哪些”文章能帮助大家解决问题。

在JavaScript中，浅拷贝只是复制了原数据的内存地址，相当于两个数据指针指向了相同的地址，任意一个数据元素发生改变，会影响另一个；而深拷贝的两个数据指向了不同的地址，任意一个元素发生改变，不会影响另一个。

本教程操作环境：windows10系统、javascript1.8.5版、Dell G3电脑。

javascript深拷贝和浅拷贝的区别是什么

在探究浅拷贝和深拷贝之前，先来了解下堆和栈的概念

堆和栈都是内存中划分出来用于存储的区域。栈（stack）为自动分配的内存空间，它由系统自动释放；堆（heap）则是动态分配的内存，大小不定也不会自动释放。

接着看下基本数据类型 & 引用数据类型（又称复杂数据类型）

1、基本类型：String、Number、Boolean、null、undefined、Symbol（ES6新增，表示独一无二的值）；基本类型值在内存中占固定大小，保存在栈内存中。

2、引用类型：Object、Array、Date、Function等；引用类型的值是对象，保存在堆内存中。

深浅拷贝的概念

注：深浅拷贝的区别只适用于Array与Object这样的复杂对象。

1、浅拷贝：只是复制了原数据的内存地址，相当于两个数据指针指向了相同的地址，其中任一数据元素发生改变，会影响另一个。

2、深拷贝：两个数据指向了不同的地址，数据元素发生改变时不会相互影响。

实例探究

1、浅拷贝

var arr = [0, 1, 2];
var arrB;
 
//把arr赋值给arrB
arrB = arr;
console.log("arr:", arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0] = 5;
console.log("arr:", arr);
console.log("arrB:", arrB);

运行结果：arr数组元素随arrB数组元素的改变而改变

2、深拷贝（只做第一层深拷贝）

注：在使用深拷贝的时候，一定要弄清楚对深拷贝的要求程度，是仅深拷贝第一层级的对象属性或者数组元素，还是递归拷贝所有层级的对象属性和数组元素？

深拷贝数组

①. 直接遍历

var arr = [1, 2, 3, 4];
function copy(arr){
    var newArr = [];
    for(var i=0;i<arr.length;i++){
        newArr.push(arr[i]);
    }
    return newArr;
}
 
var arrB = copy(arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0] = 5;
console.log("arr:", arr);
console.log("arrB:", arrB);

运行结果：arrB数组元素改变并未影响arr数组元素的值

②. concat()：用于连接两个或多个数组。该方法不会改变现有数组，仅仅只会返回被连接数组的一个副本。

var arr = [0, 1, 2];
var arrB;
 
//把arr赋值给arrB
arrB = arr.concat();
console.log("arr:", arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0] = 5;
console.log("arr:", arr);
console.log("arrB:", arrB);

运行结果：arr数组元素未随arrB数组元素的改变而改变

③. slice()：该方法返回一个从已有的数组中截取一部分元素片段组成新的数组（不改变原数组）。

var arr = [0, 1, 2, 4, 5];
var arrB;
 
//把arr赋值给arrB
arrB = arr.slice();
console.log("arr:", arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0] = 10;
arr[4] = 8;
console.log("arr:", arr);
console.log("arrB:", arrB);

运行结果：数组中元素改变并不会相互影响

以上三种方法只针对于数组元素是基本数据类型的简单数组，对于第一级数组元素是对象或者数组等引用类型变量的数组来说，上述方法都将失效。

关于“javascript深拷贝和浅拷贝的区别有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。