一文搞懂JS中的赋值·浅拷贝·深拷贝

最新推荐文章于 2024-03-18 10:54:15 发布
最新推荐文章于 2024-03-18 10:54:15 发布
阅读量757 收藏 5
点赞数 1
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/xgangzai/article/details/96671368
版权 
 
 
640?wx_fmt=gif
 
 
前言
 
 
为什么写拷贝这篇文章？同事有一天提到了拷贝，他说赋值就是一种浅拷贝方式，另一个同事说赋值和浅拷贝并不相同。我也有些疑惑，于是我去MDN搜一下拷贝相关内容，发现并没有关于拷贝的实质概念，没有办法只能通过实践了，同时去看一些前辈们的文章总结了这篇关于拷贝的内容,本文也属于公众号【程序员成长指北】学习路线中【JS必知必会】内容。
 
 
数据类型与堆栈的关系
 
 
基本类型与引用类型
 
 
存储方式
 
 
640?wx_fmt=jpeg
 
 
注意：
 
 
  1. 闭包中的变量并不保存在栈内存中，而是保存在堆内存中。这一点比较好想，如果闭包中的变量保存在了栈内存中，随着外层中的函数从调用栈中销毁，变量肯定也会被销毁，但是如果保存在了堆内存中，内存函数仍能访问外层已销毁函数中的变量。看一段对应代码理解下：
 
 
function A() {  let a = 'koala'  function B() {      console.log(a)  }  return B}
let a = 'koala'
function B() {
console.log(a)
  }
return B
}
 
 
  1. 本篇所讲的浅拷贝和深拷贝都是对于引用类型的，对于基础类型不会有这种操作。
 
 

 
 

 
 
赋值操作
 
 
基本数据类型复制
 
 
看一段代码
 
 
let a ='koala';let b = a;b='程序员成长指北'；console.log(a); // koala'koala';
let b = a;
b='程序员成长指北'；
console.log(a); // koala
 
 
基本数据类型复制配图：
 
 
640?wx_fmt=png
 
 
结论：在栈内存中的数据发生数据变化的时候，系统会自动为新的变量分配一个新的之值在栈内存中，两个变量相互独立，互不影响的。
 
 
引用数据类型复制
 
 
看一段代码
 
 
let a = {x:'kaola', y:'kaola1'}let b = a;b.x = '程序员成长指北';console.log(a.x); // 程序员成长指北x:'kaola', y:'kaola1'}
let b = a;
b.x = '程序员成长指北';
console.log(a.x); // 程序员成长指北
 
 
引用数据类型复制配图：
 
 
640?wx_fmt=jpeg结论：引用类型的复制，同样为新的变量b分配一个新的值，报错在栈内存中，不同的是这个变量对应的具体值不在栈中，栈中只是一个地址指针。两个变量地址指针相同，指向堆内存中的对象，因此b.x发生改变的时候，a.x也发生了改变。
 
 
浅拷贝
 
 
浅拷贝定义：
 
 
不知道的api我一般比较喜欢看MDN，浅拷贝的概念MDN官方并没有给出明确定义，但是搜到了一个函数Array.prototype.slice，官方说它可以实现原数组的浅拷贝。对于官方给的结论，我们通过两段代码验证一下，并总结出浅拷贝的定义。
 
 
var a = [ 1, 3, 5, { x: 1 } ];var b = Array.prototype.slice.call(a);b[0] = 2;console.log(a); // [ 1, 3, 5, { x: 1 } ];console.log(b); // [ 2, 3, 5, { x: 1 } ];1, 3, 5, { x: 1 } ];
var b = Array.prototype.slice.call(a);
b[0] = 2;
console.log(a); // [ 1, 3, 5, { x: 1 } ];
console.log(b); // [ 2, 3, 5, { x: 1 } ];
 
 
从输出结果可以看出，浅拷贝后，数组a[0]并不会随着b[0]改变而改变，说明a和b在栈内存中引用地址并不相同。
 
 
var a = [ 1, 3, 5, { x: 1 } ];var b = Array.prototype.slice.call(a);b[3].x = 2;console.log(a); // [ 1, 3, 5, { x: 2 } ];console.log(b); // [ 1, 3, 5, { x: 2 } ];1, 3, 5, { x: 1 } ];
var b = Array.prototype.slice.call(a);
b[3].x = 2;
console.log(a); // [ 1, 3, 5, { x: 2 } ];
console.log(b); // [ 1, 3, 5, { x: 2 } ];
 
 
从输出结果可以看出，浅拷贝后，数组中对象的属性会根据修改而改变，说明浅拷贝的时候拷贝的已存在对象的对象的属性引用。
 
 
通过这个官方的slice浅拷贝函数分析浅拷贝定义：
 
 
 
  
新的对象复制已有对象中非对象属性的值和对象属性的引用。如果这种说法不理解换一种一个新的对象直接拷贝已存在的对象的对象属性的引用，即浅拷贝。
 
 
 
 
浅拷贝实例
 
 
Object.assign
 
 
 
  
语法：Object.assign(target, ...sources)
 
 
 
 
ES6中拷贝对象的方法，接受的第一个参数是拷贝的目标target，剩下的参数是拷贝的源对象sources（可以是多个）
 
 
let target = {};let source = {a:'koala',b:{name:'程序员成长指北'}};Object.assign(target ,source);console.log(target); // { a: 'koala', b: { name: '程序员成长指北' } }source.a = 'smallKoala';source.b.name = '程序员成长指北哦'console.log(source); // { a: 'smallKoala', b: { name: '程序员成长指北哦' } }console.log(target); // { a: 'koala', b: { name: '程序员成长指北哦' } }
let source = {a:'koala',b:{name:'程序员成长指北'}};
Object.assign(target ,source);
console.log(target); // { a: 'koala', b: { name: '程序员成长指北' } }
source.a = 'smallKoala';
source.b.name = '程序员成长指北哦'
console.log(source); // { a: 'smallKoala', b: { name: '程序员成长指北哦' } }
console.log(target); // { a: 'koala', b: { name: '程序员成长指北哦' } }
 
 
从打印结果可以看出，Object.assign是一个浅拷贝,它只是在根属性(对象的第一层级)创建了一个新的对象，但是对于属性的值是对象的话只会拷贝一份相同的内存地址。
 
 
  1. 只拷贝源对象的自身属性（不拷贝继承属性）
  2. 它不会拷贝对象不可枚举的属性
  3. undefined和null无法转成对象，它们不能作为Object.assign参数，但是可以作为源对象
 
 
Object.assign(undefined) // 报错Object.assign(null) // 报错let obj = {a: 1};Object.assign(obj, undefined) === obj // trueObject.assign(obj, null) === obj // true

let obj = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true
 
 
  1. 属性名为Symbol 值的属性，可以被Object.assign拷贝。
 
 
Array.prototype.slice
 
 
这个函数在浅拷贝概念定义的时候已经进行了分析，看上文。
 
 
Array.prototype.concat
 
 
 
  
var new_array = old_array.concat(value1[, value2[, ...[, valueN]]]) 参数：将数组和/或值连接成新数组
 
 
 
 
let array = [{a: 1}, {b: 2}];let array1 = [{c: 3},{d: 4}];let array2=array.concat(array1);array1[0].c=123;console.log(array2);// [ { a: 1 }, { b: 2 }, { c: 123 }, { d: 4 } ]console.log(array1);// [ { c: 123 }, { d: 4 } ]a: 1}, {b: 2}];
let array1 = [{c: 3},{d: 4}];
let array2=array.concat(array1);
array1[0].c=123;
console.log(array2);// [ { a: 1 }, { b: 2 }, { c: 123 }, { d: 4 } ]
console.log(array1);// [ { c: 123 }, { d: 4 } ]
 
 
Array.prototype.concat也是一个浅拷贝，只是在根属性(对象的第一层级)创建了一个新的对象，但是对于属性的值是对象的话只会拷贝一份相同的内存地址。
 
 
...扩展运算符
 
 
 
  
var cloneObj = { ...obj };
 
 
 
 
let obj = {a:1,b:{c:1}}let obj2 = {...obj};obj.a=2;console.log(obj); //{a:2,b:{c:1}}console.log(obj2); //{a:1,b:{c:1}}obj.b.c = 2;console.log(obj); //{a:2,b:{c:2}}console.log(obj2); //{a:1,b:{c:2}}a:1,b:{c:1}}
let obj2 = {...obj};
obj.a=2;
console.log(obj); //{a:2,b:{c:1}}
console.log(obj2); //{a:1,b:{c:1}}

obj.b.c = 2;
console.log(obj); //{a:2,b:{c:2}}
console.log(obj2); //{a:1,b:{c:2}}
 
 
扩展运算符也是浅拷贝，对于值是对象的属性无法完全拷贝成2个不同对象,但是如果属性都是基本类型的值的话,使用扩展运算符也是优势方便的地方。
 
 
补充说明：以上4中浅拷贝方式都不会改变原数组，只会返回一个浅拷贝了原数组中的元素的一个新数组。
 
 
自己实现一个浅拷贝
 
 
实现原理：新的对象复制已有对象中非对象属性的值和对象属性的引用,也就是说对象属性并不复制到内存。
 
 
function cloneShallow(source) {    var target = {};    for (var key in source) {        if (Object.prototype.hasOwnProperty.call(source, key)) {            target[key] = source[key];        }    }    return target;}
var target = {};
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
        }
    }
return target;
}
 
 
for in
 
 
for...in语句以任意顺序遍历一个对象自有的、继承的、可枚举的、非Symbol的属性。对于每个不同的属性，语句都会被执行。
 
 
hasOwnProperty
 
 
 
  
语法：obj.hasOwnProperty(prop)
prop是要检测的属性字符串名称或者Symbol
 
 
 
 
该函数返回值为布尔值，所有继承了 Object 的对象都会继承到 hasOwnProperty 方法，和 in 运算符不同，该函数会忽略掉那些从原型链上继承到的属性和自身属性。
 
 
深拷贝操作
 
 
说了赋值操作和浅拷贝操作，大家是不是已经能想到什么是深拷贝了，下面直接说深拷贝的定义。
 
 
深拷贝定义
 
 
 
  
深拷贝会另外拷贝一份一个一模一样的对象,从堆内存中开辟一个新的区域存放新对象,新对象跟原对象不共享内存，修改新对象不会改到原对象。
 
 
 
 
深拷贝实例
 
 
JSON.parse(JSON.stringify())
 
 
JSON.stringify()是前端开发过程中比较常用的深拷贝方式。原理是把一个对象序列化成为一个JSON字符串，将对象的内容转换成字符串的形式再保存在磁盘上，再用JSON.parse()反序列化将JSON字符串变成一个新的对象
 
 
let arr = [1, 3, {    username: ' koala'}];let arr4 = JSON.parse(JSON.stringify(arr));arr4[2].username = 'smallKoala';console.log(arr4);// [ 1, 3, { username: 'smallKoala' } ]console.log(arr);// [ 1, 3, { username: ' koala' } ]1, 3, {
username: ' koala'
}];
let arr4 = JSON.parse(JSON.stringify(arr));
arr4[2].username = 'smallKoala';
console.log(arr4);// [ 1, 3, { username: 'smallKoala' } ]
console.log(arr);// [ 1, 3, { username: ' koala' } ]
 
 
实现了深拷贝，当改变数组中对象的值时候，原数组中的内容并没有发生改变。JSON.stringify()虽然可以实现深拷贝，但是还有一些弊端比如不能处理函数等。
 
 
  1. 拷贝的对象的值中如果有函数,undefined,symbol则经过JSON.stringify()序列化后的JSON字符串中这个键值对会消失
  2. 无法拷贝不可枚举的属性，无法拷贝对象的原型链
  3. 拷贝Date引用类型会变成字符串
  4. 拷贝RegExp引用类型会变成空对象
  5. 对象中含有NaN、Infinity和-Infinity，则序列化的结果会变成null
  6. 无法拷贝对象的循环应用(即obj[key] = obj)
 
 
自己实现一个简单深拷贝
 
 
深拷贝，主要用到的思想是递归，遍历对象、数组直到里边都是基本数据类型，然后再去复制，就是深度拷贝。实现代码：
 
 
    //定义检测数据类型的功能函数    function isObject(obj) {	    return typeof obj === 'object' && obj != null;    }   function cloneDeep(source) {    if (!isObject(source)) return source; // 非对象返回自身          var target = Array.isArray(source) ? [] : {};    for(var key in source) {        if (Object.prototype.hasOwnProperty.call(source, key)) {            if (isObject(source[key])) {                target[key] = cloneDeep(source[key]); // 注意这里            } else {                target[key] = source[key];            }        }    }    return target;}
function isObject(obj) {
return typeof obj === 'object' && obj != null;
    }
function cloneDeep(source) {

if (!isObject(source)) return source; // 非对象返回自身

var target = Array.isArray(source) ? [] : {};
for(var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
if (isObject(source[key])) {
                target[key] = cloneDeep(source[key]); // 注意这里
            } else {
                target[key] = source[key];
            }
        }
    }
return target;
}


 
 
该简单深拷贝未考虑内容：遇到循环引用，会陷入一个循环的递归过程，从而导致爆栈
 
 
// RangeError: Maximum call stack size exceeded
 
 
小伙伴们有没有什么好办法呢，可以写下代码在评论区一起讨论哦！
 
 
第三方深拷贝库
 
 
该函数库也有提供_.cloneDeep用来做 Deep Copy（lodash是一个不错的第三方开源库，有好多不错的函数，也可以看具体的实现源码）
 
 
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);// falserequire('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

 
 
拷贝内容总结
 
 
用一张图总结
 
 
参考文章 MDN js 深拷贝 vs 浅拷贝 深拷贝的终极探索（99%的人都不知道)
 
 
前言
 
 
为什么写拷贝这篇文章？同事有一天提到了拷贝，他说赋值就是一种浅拷贝方式，另一个同事说赋值和浅拷贝并不相同。我也有些疑惑，于是我去MDN搜一下拷贝相关内容，发现并没有关于拷贝的实质概念，没有办法只能通过实践了，同时去看一些前辈们的文章总结了这篇关于拷贝的内容,本文也属于公众号【程序员成长指北】学习路线中【JS必知必会】内容。
 
 
数据类型与堆栈的关系
 
 
基本类型与引用类型
 
 
存储方式
 
 
注意：
 
 
  1. 闭包中的变量并不保存在栈内存中，而是保存在堆内存中。这一点比较好想，如果闭包中的变量保存在了栈内存中，随着外层中的函数从调用栈中销毁，变量肯定也会被销毁，但是如果保存在了堆内存中，内存函数仍能访问外层已销毁函数中的变量。看一段对应代码理解下：
 
 
function A() {  let a = 'koala'  function B() {      console.log(a)  }  return B}
let a = 'koala'
function B() {
console.log(a)
  }
return B
}
 
 
  1. 本篇所讲的浅拷贝和深拷贝都是对于引用类型的，对于基础类型不会有这种操作。
 
 
赋值操作
 
 
基本数据类型复制
 
 
看一段代码
 
 
let a ='koala';let b = a;b='程序员成长指北'；console.log(a); // koala'koala';
let b = a;
b='程序员成长指北'；
console.log(a); // koala
 
 
基本数据类型复制配图：
 
 
结论：在栈内存中的数据发生数据变化的时候，系统会自动为新的变量分配一个新的之值在栈内存中，两个变量相互独立，互不影响的。
 
 
引用数据类型复制
 
 
看一段代码
 
 
let a = {x:'kaola', y:'kaola1'}let b = a;b.x = '程序员成长指北';console.log(a.x); // 程序员成长指北x:'kaola', y:'kaola1'}
let b = a;
b.x = '程序员成长指北';
console.log(a.x); // 程序员成长指北
 
 
引用数据类型复制配图：
 
 
结论：引用类型的复制，同样为新的变量b分配一个新的值，报错在栈内存中，不同的是这个变量对应的具体值不在栈中，栈中只是一个地址指针。两个变量地址指针相同，指向堆内存中的对象，因此b.x发生改变的时候，a.x也发生了改变。
 
 
浅拷贝
 
 
浅拷贝定义：
 
 
不知道的api我一般比较喜欢看MDN，浅拷贝的概念MDN官方并没有给出明确定义，但是搜到了一个函数Array.prototype.slice，官方说它可以实现原数组的浅拷贝。对于官方给的结论，我们通过两段代码验证一下，并总结出浅拷贝的定义。
 
 
var a = [ 1, 3, 5, { x: 1 } ];var b = Array.prototype.slice.call(a);b[0] = 2;console.log(a); // [ 1, 3, 5, { x: 1 } ];console.log(b); // [ 2, 3, 5, { x: 1 } ];1, 3, 5, { x: 1 } ];
var b = Array.prototype.slice.call(a);
b[0] = 2;
console.log(a); // [ 1, 3, 5, { x: 1 } ];
console.log(b); // [ 2, 3, 5, { x: 1 } ];
 
 
从输出结果可以看出，浅拷贝后，数组a[0]并不会随着b[0]改变而改变，说明a和b在栈内存中引用地址并不相同。
 
 
var a = [ 1, 3, 5, { x: 1 } ];var b = Array.prototype.slice.call(a);b[3].x = 2;console.log(a); // [ 1, 3, 5, { x: 2 } ];console.log(b); // [ 1, 3, 5, { x: 2 } ];1, 3, 5, { x: 1 } ];
var b = Array.prototype.slice.call(a);
b[3].x = 2;
console.log(a); // [ 1, 3, 5, { x: 2 } ];
console.log(b); // [ 1, 3, 5, { x: 2 } ];
 
 
从输出结果可以看出，浅拷贝后，数组中对象的属性会根据修改而改变，说明浅拷贝的时候拷贝的已存在对象的对象的属性引用。
 
 
通过这个官方的slice浅拷贝函数分析浅拷贝定义：
 
 
 
  
新的对象复制已有对象中非对象属性的值和对象属性的引用。如果这种说法不理解换一种一个新的对象直接拷贝已存在的对象的对象属性的引用，即浅拷贝。
 
 
 
 
浅拷贝实例
 
 
Object.assign
 
 
 
  
语法：Object.assign(target, ...sources)
 
 
 
 
ES6中拷贝对象的方法，接受的第一个参数是拷贝的目标target，剩下的参数是拷贝的源对象sources（可以是多个）
 
 
let target = {};let source = {a:'koala',b:{name:'程序员成长指北'}};Object.assign(target ,source);console.log(target); // { a: 'koala', b: { name: '程序员成长指北' } }source.a = 'smallKoala';source.b.name = '程序员成长指北哦'console.log(source); // { a: 'smallKoala', b: { name: '程序员成长指北哦' } }console.log(target); // { a: 'koala', b: { name: '程序员成长指北哦' } }
let source = {a:'koala',b:{name:'程序员成长指北'}};
Object.assign(target ,source);
console.log(target); // { a: 'koala', b: { name: '程序员成长指北' } }
source.a = 'smallKoala';
source.b.name = '程序员成长指北哦'
console.log(source); // { a: 'smallKoala', b: { name: '程序员成长指北哦' } }
console.log(target); // { a: 'koala', b: { name: '程序员成长指北哦' } }
 
 
从打印结果可以看出，Object.assign是一个浅拷贝,它只是在根属性(对象的第一层级)创建了一个新的对象，但是对于属性的值是对象的话只会拷贝一份相同的内存地址。
 
 
  1. 只拷贝源对象的自身属性（不拷贝继承属性）
  2. 它不会拷贝对象不可枚举的属性
  3. undefined和null无法转成对象，它们不能作为Object.assign参数，但是可以作为源对象
 
 
Object.assign(undefined) // 报错Object.assign(null) // 报错let obj = {a: 1};Object.assign(obj, undefined) === obj // trueObject.assign(obj, null) === obj // trueundefined) // 报错
Object.assign(null) // 报错

let obj = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true
 
 
  1. 属性名为Symbol 值的属性，可以被Object.assign拷贝。
 
 
Array.prototype.slice
 
 
这个函数在浅拷贝概念定义的时候已经进行了分析，看上文。
 
 
Array.prototype.concat
 
 
 
  
var new_array = old_array.concat(value1[, value2[, ...[, valueN]]]) 参数：将数组和/或值连接成新数组
 
 
 
 
let array = [{a: 1}, {b: 2}];let array1 = [{c: 3},{d: 4}];let array2=array.concat(array1);array1[0].c=123;console.log(array2);// [ { a: 1 }, { b: 2 }, { c: 123 }, { d: 4 } ]console.log(array1);// [ { c: 123 }, { d: 4 } ]a: 1}, {b: 2}];
let array1 = [{c: 3},{d: 4}];
let array2=array.concat(array1);
array1[0].c=123;
console.log(array2);// [ { a: 1 }, { b: 2 }, { c: 123 }, { d: 4 } ]
console.log(array1);// [ { c: 123 }, { d: 4 } ]
 
 
Array.prototype.concat也是一个浅拷贝，只是在根属性(对象的第一层级)创建了一个新的对象，但是对于属性的值是对象的话只会拷贝一份相同的内存地址。
 
 
...扩展运算符
 
 
 
  
var cloneObj = { ...obj };
 
 
 
 
let obj = {a:1,b:{c:1}}let obj2 = {...obj};obj.a=2;console.log(obj); //{a:2,b:{c:1}}console.log(obj2); //{a:1,b:{c:1}}obj.b.c = 2;console.log(obj); //{a:2,b:{c:2}}console.log(obj2); //{a:1,b:{c:2}}a:1,b:{c:1}}
let obj2 = {...obj};
obj.a=2;
console.log(obj); //{a:2,b:{c:1}}
console.log(obj2); //{a:1,b:{c:1}}

obj.b.c = 2;
console.log(obj); //{a:2,b:{c:2}}
console.log(obj2); //{a:1,b:{c:2}}
 
 
扩展运算符也是浅拷贝，对于值是对象的属性无法完全拷贝成2个不同对象,但是如果属性都是基本类型的值的话,使用扩展运算符也是优势方便的地方。
 
 
补充说明：以上4中浅拷贝方式都不会改变原数组，只会返回一个浅拷贝了原数组中的元素的一个新数组。
 
 
自己实现一个浅拷贝
 
 
实现原理：新的对象复制已有对象中非对象属性的值和对象属性的引用,也就是说对象属性并不复制到内存。
 
 
function cloneShallow(source) {    var target = {};    for (var key in source) {        if (Object.prototype.hasOwnProperty.call(source, key)) {            target[key] = source[key];        }    }    return target;}
var target = {};
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
        }
    }
return target;
}
 
 
for in
 
 
for...in语句以任意顺序遍历一个对象自有的、继承的、可枚举的、非Symbol的属性。对于每个不同的属性，语句都会被执行。
 
 
hasOwnProperty
 
 
 
  
语法：obj.hasOwnProperty(prop)
prop是要检测的属性字符串名称或者Symbol
 
 
 
 
该函数返回值为布尔值，所有继承了 Object 的对象都会继承到 hasOwnProperty 方法，和 in 运算符不同，该函数会忽略掉那些从原型链上继承到的属性和自身属性。
 
 
深拷贝操作
 
 
说了赋值操作和浅拷贝操作，大家是不是已经能想到什么是深拷贝了，下面直接说深拷贝的定义。
 
 
深拷贝定义
 
 
 
  
深拷贝会另外拷贝一份一个一模一样的对象,从堆内存中开辟一个新的区域存放新对象,新对象跟原对象不共享内存，修改新对象不会改到原对象。
 
 
 
 
深拷贝实例
 
 
JSON.parse(JSON.stringify())
 
 
JSON.stringify()是前端开发过程中比较常用的深拷贝方式。原理是把一个对象序列化成为一个JSON字符串，将对象的内容转换成字符串的形式再保存在磁盘上，再用JSON.parse()反序列化将JSON字符串变成一个新的对象
 
 
let arr = [1, 3, {    username: ' koala'}];let arr4 = JSON.parse(JSON.stringify(arr));arr4[2].username = 'smallKoala';console.log(arr4);// [ 1, 3, { username: 'smallKoala' } ]console.log(arr);// [ 1, 3, { username: ' koala' } ]1, 3, {
username: ' koala'
}];
let arr4 = JSON.parse(JSON.stringify(arr));
arr4[2].username = 'smallKoala';
console.log(arr4);// [ 1, 3, { username: 'smallKoala' } ]
console.log(arr);// [ 1, 3, { username: ' koala' } ]
 
 
实现了深拷贝，当改变数组中对象的值时候，原数组中的内容并没有发生改变。JSON.stringify()虽然可以实现深拷贝，但是还有一些弊端比如不能处理函数等。
 
 
  1. 拷贝的对象的值中如果有函数,undefined,symbol则经过JSON.stringify()序列化后的JSON字符串中这个键值对会消失
  2. 无法拷贝不可枚举的属性，无法拷贝对象的原型链
  3. 拷贝Date引用类型会变成字符串
  4. 拷贝RegExp引用类型会变成空对象
  5. 对象中含有NaN、Infinity和-Infinity，则序列化的结果会变成null
  6. 无法拷贝对象的循环应用(即obj[key] = obj)
 
 
自己实现一个简单深拷贝
 
 
深拷贝，主要用到的思想是递归，遍历对象、数组直到里边都是基本数据类型，然后再去复制，就是深度拷贝。实现代码：
 
 
    //定义检测数据类型的功能函数    function isObject(obj) {	    return typeof obj === 'object' && obj != null;    }   function cloneDeep(source) {    if (!isObject(source)) return source; // 非对象返回自身          var target = Array.isArray(source) ? [] : {};    for(var key in source) {        if (Object.prototype.hasOwnProperty.call(source, key)) {            if (isObject(source[key])) {                target[key] = cloneDeep(source[key]); // 注意这里            } else {                target[key] = source[key];            }        }    }    return target;}
function isObject(obj) {
return typeof obj === 'object' && obj != null;
    }
function cloneDeep(source) {

if (!isObject(source)) return source; // 非对象返回自身

var target = Array.isArray(source) ? [] : {};
for(var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
if (isObject(source[key])) {
                target[key] = cloneDeep(source[key]); // 注意这里
            } else {
                target[key] = source[key];
            }
        }
    }
return target;
}


 
 
该简单深拷贝未考虑内容：遇到循环引用，会陷入一个循环的递归过程，从而导致爆栈
 
 
// RangeError: Maximum call stack size exceeded
 
 
小伙伴们有没有什么好办法呢，可以写下代码在评论区一起讨论哦！
 
 
第三方深拷贝库
 
 
该函数库也有提供_.cloneDeep用来做 Deep Copy（lodash是一个不错的第三方开源库，有好多不错的函数，也可以看具体的实现源码）
 
 
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);// falserequire('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

 
 
拷贝内容总结
 
 
用一张图总结
 
 
640?wx_fmt=jpeg
 
 640?wx_fmt=png 
 
经常被面试官考的JavaScript数据类型知识你真的懂吗？
 
 
深入理解Javacript从作用域作用域链开始
 
 
【JS必知必会】高阶函数详解与实战
 
 
公司要求会使用框架vue，面试题会被问及哪些？
 
 640?wx_fmt=jpeg 
 
交流学习
 
 
大家好，我是koala，公众号「程序员成长指北」作者。目前在做一个node工程师进阶路线，加入我们一起学习吧！
 
 
640?wx_fmt=png
 
 
加入我们
 
 
640?wx_fmt=jpeg
 
 

 
 640?wx_fmt=png在看点这里 
 640?wx_fmt=gif 
 

 


                

        

        

    




    

      

        

            

              
                
                  傲娇的koala
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    5
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  2
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
一文搞懂C语言回调函数

				
			

			

				

					01-27
				

			

		

		

			
				
回调函数在C语言中是一种强大的编程机制，它允许我们将函数作为参数传递给其他函数，然后在特定条件下由这些函数调用。回调函数的核心是函数指针，它存储了函数的地址，使得其他函数可以通过这个地址来执行指定的...

			
		

	



                

              
                



	

		

			

				
					
一文搞懂全链路监控：方案概述与比较

				
			

			

				

					01-27
				

			

		

		

			
				
全链路监控是一种针对复杂分布式系统进行性能和故障排查的重要工具。随着微服务架构的广泛应用，服务被拆分成多个独立的模块，导致一次用户请求可能涉及多个服务交互。在这种背景下，全链路监控应运而生，以帮助理解...

			
		

	



                


  
              

                


	

		

			

				
					
JS赋值、浅拷贝和深拷贝

				
			

			

				

					weixin_51670675的博客
				

				

					08-20
					
					944
					
				

			

		

		

			
				
​		同一个Array或者Object赋值给两个不同变量时，变量指向的是同一个内存地址，所以就会造成其中一个变量改变属性值，同时改变了另外一个变量的对应属性值。
​		而大多数实际项目中，我们想要的结果是两个变量（初始值相同）互不影响。所以就要使用到拷贝（分为深浅两种）
文章目录一、赋值二、浅拷贝三、简单的深拷贝：四、包含处理循环引用问题的深拷贝五、考虑symbol类型
一、赋值
​		赋值是将某一数值或对象赋给某个变量的过程，分为：
​		1、基本数据类型：赋值，赋值之后两个变量互不影响
​		2、引用数

			
		

	





	

		

			

				
					
总结一下js的浅拷贝和深拷贝

				
			

			

				

					忧郁的蛋的专栏
				

				

					06-10
					
					1471
					
				

			

		

		

			
				
对于对象中有对其他对象的引用，可以使用 WeakMap 来存储已经复制过的对象。是将一个对象的值复制给另一个对象，但如果对象中包含对其他对象的引用，则这些引用仍然指向原来的对象。这是使用 WeakMap 的一种示例，这个示例的深拷贝函数递归地复制对象，但检查 WeakMap 中是否已经存在该对象的副本，如果存在则直接使用副本，而不是重新创建。需要注意的是，使用构造函数复制内置对象类型只适用于部分内置对象类型，对于其他的内置对象类型，可能需要使用其他的方法来进行复制，或者使用第三方库来进行复制。

			
		

	



		

			
		



	

		

			

				
					
【实践出真理】import和require的引入方式真的和网上说的一样吗

				
			

			

				

					Concise200的博客
				

				

					07-03
					
					657
					
				

			

		

		

			
				
在上面的表现中，二者都类似 浅拷贝 的操作，并不和网上说的一样a会变成2。

			
		

	





	

		

			

				
					
JS核心知识点 - 赋值、浅拷贝、深拷贝。

				
			

			

				

					qq_61723274的博客
				

				

					03-18
					
					971
					
				

			

		

		

			
				
1、赋值处理基本数据类型时，直接赋值是最简单的方式(会生成一个新的内存空间、不会共享内存空间，即不会修改原数据)。处理引用数据类型的时候需要考虑新数据修改是否能影响原数据、能影响的话可以用赋值(不会生成一个新的内存空间、会共享内存空间，会修改原数据)。2、浅拷贝处理引用数据类型的时、希望修改新数据时不能影响原数据(基础数据类型修改后原数据不会修改、引用数据类型修改后原数据会修改3、深拷贝(慎用)处理引用数据类型的时、希望修改新数据时不能影响原数据(

			
		

	





	

		

			

				
					
JS深浅拷贝

				
			

			

				

					weixin_44472894的博客
				

				

					08-01
					
					32
					
				

			

		

		

			
				
在堆中重新分配内存，并且把源对象所有属性都进行新建拷贝，以保证深拷贝的对象的引用图不包含任何原有对象或对象图上的任何对象，拷贝后的对象与原来的对象是完全隔离，互不影响。：在堆中重新分配内存，并且把源对象所有属性都进行新建拷贝，以保证深拷贝的对象的引用图不包含任何原有对象或对象图上的任何对象，拷贝后的对象与原来的对象是完全隔离，互不影响。方法把字符串解析成对象，一去一来，新的对象产生了，而且对象会开辟新的栈，实现深拷贝。当对象的属性值对应的是一个对象时，该方法拷贝的是对象的属性的引用，而不是对象本身。

			
		

	





	

		

			

				
					
浅析JS中的赋值/浅拷贝/深拷贝

				
			

			

				

					weixin_42088314的博客
				

				

					03-21
					
					446
					
				

			

		

		

			
				
在了解深浅拷贝之前，需要先明白一个概念：堆和栈
堆和栈
堆和栈都是内存中划分出来用来存储的区域。栈（stack）为自动分配的内存空间，它由系统自动释放；而堆（heap）则是动态分配的内存，大小不定也不会自动释放。
JS中的数据类型
基本数据类型存放在栈中
基本数据类型：undefined，boolean，number，string，null
var num = 123;
var str="abc";

以上数据在栈中的存储形式如下图：

引用类型的数据存放在堆中
JS中除了基本数据类型以外的都是对象，如对象

			
		

	





	

		

			

				
					
一文搞懂Raft算法

				
			

			

				

					01-27
				

			

		

		

			
				
raft是工程上使用较为广泛的强一致性、去中心化、高可用的分布式协议。在这里强调了是在工程上，因为在学术理论界，最耀眼的还是大名鼎鼎的Paxos。但Paxos是：少数真正理解的人觉得简单，尚未理解的人觉得很难，...

			
		

	





	

		

			

				
					
一文搞懂混合动力汽车

				
			

			

				

					01-14
				

			

		

		

			
				
经过4S店销售的一顿狂轰乱炸，你还是搞不懂混合动力汽车有插电式与非插电式之分，还有串联式、并联式、混联式的区别。 无妨，接着看下文也许你就懂了！      	      	混合动力汽车透视图      	传统汽车由内燃机燃烧...

			
		

	





	

		

			

				
					
JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）实例详解

				
			

			

				

					11-20
				

			

		

		

			
				
本文实例讲述了JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）。分享给大家供大家参考，具体如下：
深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。 
浅拷贝
只是拷贝了基本类型的数据，而引用类型数据，复制后也是会发生引用，我们把这种拷贝叫做浅拷贝（浅复制）
浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。
赋值和浅拷贝的区别
当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪

			
		

	





	

		

			

				
					
网络知识扫盲，一文搞懂DNS

				
			

			

				

					01-27
				

			

		

		

			
				
【网络知识扫盲，一文搞懂DNS】  网络知识在面试中扮演着至关重要的角色，尤其是在IT行业。本文旨在帮助那些在网络知识上遇到困难的同学，尤其是关于DNS的基础知识。DNS，全称为Domain Name System，是一种分布式...

			
		

	





	

		

			

				
					
object.assign()是深拷贝？还是浅拷贝？

				
			

			

				

					m0_60622481的博客
				

				

					03-10
					
					3825
					
				

			

		

		

			
				
对于Object.assign()而言，如果对象的属性值为简单类型（string，number），通过Object.assign({},srcobj)，得到的新对象为深拷贝；如果属性值是对象或其他引用类型，那对于这个引用数据类型而言是浅拷贝的。
...

			
		

	





	

		

			

				
					
JavaScript赋值、浅拷贝和深拷贝

				
			

			

				

					Eyno的博客
				

				

					04-02
					
					315
					
				

			

		

		

			
				
三者都是针对于引用类型！！引用类型包括：对象Object、数组Array，数据类型有：String、Number等。
赋值
当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的同一个存储空间的内容，因此，两个对象是联动的，一起改变的。
浅拷贝
重新在堆中创建内存，拷贝前后对象的基本数据类型互不影响，但拷贝前后对象的引用类型因共享同一块内存，会相互影响。
深拷贝
从堆内存中开辟一个新的内存地址存放新对

			
		

	





	

		

			

				
					
JS 数据类型、赋值、深拷贝和浅拷贝

				
			

			

				

					weixin_30498807的博客
				

				

					05-15
					
					152
					
				

			

		

		

			
				
js 数据类型

六种 基本数据类型:


Boolean. 布尔值，true 和 false.
null. 一个表明 null 值的特殊关键字。 JavaScript 是大小写敏感的，因此 null 与 Null、NULL或其他变量完全不同。
undefined. 变量未定义时的属性。
Number. 表示数字，例如： 42 或者 3.14159。
String. 表示字符串，例如："...

			
		

	





	

		

			

				
					
Object.assign()及深拷贝

				
			

			

				

					jokren的博客
				

				

					06-05
					
					2772
					
				

			

		

		

			
				
语法: Object.assign(target, …sources) target: 目标对象,sources: 源对象
用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);

console.log(target); // Object { a: 1,

			
		

	





	

		

			

				
					
浅拷贝和深拷贝的区别及js实现

				
			

			

				

					Smarts
				

				

					08-15
					
					551
					
				

			

		

		

			
				
前序
几乎大部分语言中都有copy这样的函数或者是方法。用于对数据的复制操作。[其中数据类型数组，对象,等]。但是编程序的人,大部分在语言中都会有普通的拷贝方法和deepCopy方法。因此在这里做个叙述，用来介绍这两个方法的区别。
浅拷贝
浅拷贝就是拷贝指向对象的指针，意思就是说：拷贝出来的目标对象的指针和源对象的指针指向的内存空间是同一块空间，浅拷贝只是一种简单的拷贝，让几个对象公用一个内存，然...

			
		

	





	

		

			

				
					
c语言前端设计思路介绍文档

					
最新发布

				
			

			

				

					07-11
				

			

		

		

			
				
c语言前端设计思路介绍文档

			
		

	





	

		

			

				
					
一文搞懂yolov9训练

				
			

			

				

					04-19
				

			

		

		

			
				
训练过程中，模型会根据损失函数的反馈进行参数更新，逐渐提高模型的准确性。  7. 模型评估：训练完成后，需要对模型进行评估，通常使用验证集或测试集来评估模型在未见过的数据上的性能。  8. 模型调优：根据评估...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值