js中的赋值 浅拷贝和深拷贝详细
更新时间：2021年09月28日 16:29:26 作者：用户bPcUQ3V
js数据类型主要分基本数据类型和引用数据类型。前者包括Number,String等，后者主要是Object,因此以下会针对不同的数据类型来分析,需要的朋友可以参考一下
前言:
在学习下面文章前我们简单了解一下的内存的知识，以下先简要提一下
1、js内存
js内存，或者说大部分语言的内存都分为栈和堆。基本数据类型的变量值分配在栈上，引用数据类型的变量值分配在堆上，栈中只是存储具体堆中对象的地址。
2、赋值
对于基本数据类型，赋值操作是拷贝，即新旧变量不会相互影响。
var a = 1; var b = a; b = 2; console.log(b); // 2
对于引用数据类型，赋值操作只是在栈中新增一个指向堆中对象的变量，即复制引用地址。新旧变量之间会互相影响，即在新变量上改变对象值，旧变量对应值也会改变。
var a = {
name: "mike"
};
var b = a;
b.name = "jack";
console.log(a); // {name: "jack"}
3、浅拷贝
对于基本数据类型和不具有嵌套对象的数据，均是拷贝操作，新旧变量之间不会相互影响。
var a = {
name: "mike"
};
var b = {};
b.name = a.name;
b.name = "jack";
console.log(a) // {name: "mike"}
但是对于具有嵌套对象的数据，浅拷贝只拷贝第一层对象，深层次的值仍然是复制引用地址。
var a = {
name: "mike",
language: {
first: "english",
second: "chinese"
}
};
var b = {};
b.name = a.name;
b.name = "jack";
b.language = a.language;
b.language.first = "japanese"
console.log(a) // { language : {first: "japanese", second: "chinese"}}
js实现浅拷贝，思想：遍历target的每个属性，将起属性名和值赋值给新变量。
如果你明白了赋值的含义，那么在代码的第四行，当此时的target[key]的值是对象的时候，通过赋值赋予新变量，本质上是复制引用数据类型在堆中的地址，就不难理解为什么浅拷贝对于是否是嵌套对象的有不同结果了。
function shallowCopy(target) {
let result = {};
for (const key in target) {
result[key] = target[key];
}
return result;
}
4、深拷贝
深拷贝是完完全全的拷贝，新旧变量之间不会相互影响。
对于参数是否是对象有不同的处理方法，如果是对象，对于对象的每个属性和值赋值然后递归处理; 否则直接返回。
function clone(target) {
if (typeof target === "object") {
//判断是否是数组
let result = Array.isArray(target)? [] : {};
for (const key in target) {
result[key] = clone(target[key]);
}
return result;
} else {
return target;
}
}
到此这篇关于js中的赋值 浅拷贝和深拷贝详细的文章就介绍到这了,更多相关js中的赋值 浅拷贝和深拷贝内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
JavaScript前端学算法题解LeetCode最大重复子字符串
这篇文章主要为大家介绍了JavaScript前端学算法题解LeetCode最大重复子字符串，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
ESLint是一个JavaScript代码静态检查工具，可以检查JavaScript的语法错误，提示潜在的bug，本文将详细介绍ESLint的使用方法2020-02-02
这篇文章主要介绍了微信小程序 122100版本更新问题解决方案的相关资料,这里对微信小程序版本更新该如何解决提供解决方案，需要的朋友可以参考下2016-12-12
这篇文章主要介绍了微信小程序本地缓存数据增删改查实例详解的相关资料,需要的朋友可以参考下2017-05-05
这篇文章主要为大家介绍了前端利用jsencrypt.js进行RSA加密示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要为大家介绍了Three.js相机Camera控件知识梳理，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
Video.js 是一个通用的在网页上嵌入视频播放器的JS库，Video.js自动检测浏览器对HTML5的支持情况，如果不支持HTML5则自动使用Flash 播放器，推荐大家好好看看2020-02-02
这篇文章主要和大家分享的事JS高级ES6的6种继承方式，继承是面向对象中老生常谈的一个内容，在ECMAScript6之前，JavaScript中的继承可谓是非常的繁琐的，有各种各样的继承，本质上所有的继承都是离不开原型链的，更多详细内容请感兴趣的小伙伴参考下面文章内容吧2021-12-12
这篇文章主要介绍了JavaScript history 对象详解，history 对象表示当前窗口首次使用以来用户的导航历史记录。因为 history 是 window 的属性，所以每个 window 都有自己的 history 对象，更多详细内容请参考下面文章内容2021-11-11
本篇章我们将了解lodash里内部关于Data的操作方法，重点关注getData、setData两个内部方法，同时由实现上引申其他内部封装的方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
最新评论