JavaScript中引用数据类型的浅拷贝

在JavaScript中,数据类型被分为"基本数据类型"和"引用数据类型"两大类。基本数据类型包括数值型、字符型、逻辑型、未定义型(undefined)、空型(null)和ES6新增的Symbol类型,引用数据类型包括数组、对象和函数。

当我们在程序中执行变量赋值操作的时候,基本数据类型变量的赋值与引用数据类型变量的赋值是不一样的。

【1】基本数据类型变量的赋值。

仔细阅读下列代码:

let a=15;

let b=a;

console.log(a,b);

b=100;

console.log(a,b);

在本段代码中,第一句声明变量a并赋值为15,第二句声明变量b并将变量a的值赋给变量b,即变量b的值来源于变量a。此时输出语句在控制台中会输出两个15。紧接着改变变量b的值为100,继续输出两个变量的结果为:15,100。

【2】引用数据类型变量的赋值。

上述看似合理的赋值操作放在引用数据类型中就会变得不那么简单了,仔细阅读下列代码:

let a=10,20,30

let b=a;

console.log(a,b);

b0=841;

console.log(a,b);

在本段代码中,第一条输出语句会在控制台中会输出两个10,20,30数组。第二条输出语句会在控制台中输出841,20,30数组,即对数组元素b0的修改也影响了数组a的数组元素a0。这和普通数据类型的赋值完全不一样,在JavaScript中被称为引用数据类型的"浅拷贝"。

【3】从变量的本质理解浅拷贝。

浅拷贝只会发生在引用数据类型中,这是因为引用数据类型变量和基本数据类型变量的本质是不同的。我们都知道变量本质上是在内存中开辟的存储空间。JavaScript为基本数据类型变量开辟真实的空间,用来存储赋值的数据;而为引用数据类型变量只开辟用来存储指向数据本身的地址的空间,即引用数据类型变量在内存中存储的是数据的地址,并不是数据本身。所存储的数据的地址也被称为"数据的引用"。

这就是说变量a存储的是数组10,20,30的引用(即地址),当把变量a赋值给变量b时,是把a中存储的数组的地址赋给了变量b,即变量b中存储的也是数组的引用,也就是说变量a和b同时指向了一个数组。

这样一来,通过变量b对数组元素的修改也会反应在变量a中,浅拷贝的产生就是这样的原理造成的。

原理是学习一门编程语言最为重要的内容,是彻底理解程序运行机制的唯一途径,在前端开发的学习过程中尤为重要。

相关推荐
jnene3 分钟前
html 时间、价格筛选样式处理
前端·css·html
slongzhang_25 分钟前
jquery 修复怪异模式html未声明“<!DOCTYPE html>”
前端·html·jquery
宋拾壹26 分钟前
fastadmin列表中查看列表,并且添加增加相应的数据
javascript·php·fastadmin
云水一下1 小时前
Vue.js从零到精通系列(三):组件化基础——Props、Emits、插槽与生命周期
前端·javascript·vue.js
小糯米6011 小时前
JavaScript表达式与运算符
开发语言·javascript·ecmascript
SEO_juper2 小时前
新独立站冷启动收录全攻略:配置、推送、抓取配额优化完整手册
前端·谷歌·seo·跨境电商·外贸·geo·独立站
TinssonTai2 小时前
这个 VS Code 插件让我的 AI Coding 又快又稳 - 旧瓶装新酒
前端·人工智能·程序员
体验家2 小时前
体验家 XMPlus 网页端问卷 SDK 技术解析:用几行 JavaScript 实现精准场景触发与防打扰机制
开发语言·前端·javascript
VidDown2 小时前
VidDown 工具站:视频分辨率技术
javascript·网络·编辑器·音视频·视频编解码·视频
Maimai108082 小时前
Web3 前端交易系统如何落地:从下单 UI 到 Operation 编码、签名与实时状态更新
前端·react.js·ui·架构·前端框架·web3