一文彻底搞懂 JS 中的基础类型和引用类型

JavaScript中的Primitive对象封装介绍 JavaScript中,string、number、boolean均为primitive基本类型,也即字符串、数值、布尔值并不是以对象的形式而存在的。不过,由于需要对这三种primitive类型值进行操作,因此JavaScript会自动封装这三种类型的值,使其作为对象而拥有属性与方法。以string为例,这种封装过程如下: 1.当JavaScript遇到对string值进行属性访问或者方法调用时,会调用new String(字符串值)自动将该string封装成一个String对象。 2.JavaScript会访问这个新创建的对象的属性或者方法,并返回相应的结果。 3.属性访问或者方法调用结束后 立即下载

在这里插入图片描述

在JavaScript中,可以按值和按引用传递。

这两种方法的主要区别在于,在赋值原始值(primitive)时是传递值,而在赋值对象(objects)时是传递引用。

让我们在这篇文章中更详细地讨论值和引用。

primitive && objects

JavaScript提供了两类数据类型: 基本类型(primitive)和引用类型(objects)。

基本类型包括数字、布尔值、字符串、符号和特殊值(null和undefined)。例如:

// Primitives
const number = 10;

const bool = false;

const str = 'Hello!';

const missingObject = null;

const nothing = undefined;

第二类是对象。特别是普通对象、数组、函数等等都是对象。

// Objects
const plainObject = {
  prop: 'Value'
};

const array = [1, 5, 6];

const functionObject = (n1, n2) => {
  return n1 + n2;
};

换句话说,任何不是原始值的东西都是对象。

值传递

按值传递的简单规则是,JavaScript中的所有原始值都是按值传递的。就这么简单。

通过值传递意味着每次给变量赋值时,都会创建该值的一个副本。

假设你有两个变量a和b:

let a = 1;
let b = a;

b = b + 2;

console.log(a); // 1
console.log(b); // 3

第一个语句让a = 1定义一个初始化为数字1的变量a。

第二个语句让b = a定义另一个变量b,并使用一个变量的值初始化它——这是通过value传递的。简单点说,把数字1的一个副本赋给b。

之后,b = b + 2增加2,变成3。变量b发生变化,这个变化不影响变量a的值。

引用传递

然而,引用传递的表现方式不同。

当创建一个对象时,你会得到一个对该对象的引用。如果两个变量拥有相同的引用,那么改变对象会反映在两个变量中。

让我们检查下面的代码示例:

let x = [1];
let y = x;

y.push(2);

console.log(x); // [1, 2]
console.log(y); // [1, 2]

第一个语句让x =[1]创建一个数组,定义一个变量x,并使用对创建的数组的引用初始化该变量。

然后让y = x定义一个变量y,并使用存储在x变量中的引用初始化y。这是一个引用传递。

y.push(2)通过入项2来改变数组。因为x和y变量引用相同的数组,所以这一变化反映在两个变量中。

注意: 为简单起见,我说变量包含对对象的引用。但是严格地说,JavaScript中的变量保存的值是对对象的引用。

使用比较运算符

在比较对象时,理解值和引用之间的差异很重要。

当使用严格比较操作符===时,如果两个变量的值相同,那么它们就是相等的。下面所有的比较都是相等的:

const one = 1;
const oneCopy = 1;

console.log(one === oneCopy); // true
console.log(one === 1);       // true
console.log(one === one);     // true

one和oneCopy的值相同。当两个操作数的长度都为1时,操作符===的计算结果为true,而不管值是从哪里取的。

但是比较操作符===在比较引用时的工作方式不同。只有当它们引用完全相同的对象时,两个引用才相等。

例如,ar1和ar2引用不同的数组:

const ar1 = [1];
const ar2 = [1];

console.log(ar1 === ar2); // false
console.log(ar1 === [1]);  // false

const ar11 = ar1;
console.log(ar1 === ar11); // true
console.log(ar1 === ar1);  // true

ar1和ar2引用相同结构的数组,但是ar1 === ar2计算为false,因为ar1和ar2引用不同的数组对象。

比较操作符仅在比较指向同一个对象的引用时返回true: ar1 === ar11或ar1 === ar1。

总结

在JavaScript中,基本类型是作为值传递的:这意味着每次赋值时,都会创建一个值的副本。

另一方面,对象(包括普通对象、数组、函数、类实例)是引用。如果您修改了该对象,那么所有引用该对象的变量都将看到更改。

比较运算符区分比较值和引用。只有引用了完全相同的对象时,两个引用的变量才相等,但如果两个变量的值是相同的,那么它们的值就是相等的,而不管值来自哪个地方。

《UE4游戏开发》之 《音效系统的实现》 音效系统需要负责管理什么事情: 1.1 确定声音控制的分类:如背景音乐、技能音效、界面音效、角色配音等,不同游戏对声音有不同的分类 1.2 控制每个分类的声音的开启与关闭,以及调节每个分类声音的大小 解决如何分类: 2.1 首先需要知道ue4为声音分类提供了什么:SoundClass通常需要一个根分类【SC_RPG_Master】,便于总体控制音效,以及指定引擎默认启动的音效 打开SoundClass资产【SC_RPG_Master】,对根控制的设置,将逐级传递并按比例进行设置,以此达到控制一类声音的目的. 阅读详情

相关推荐

思科华三设备组网思科生成树PVST发BPDU导致全网闪断

一、故障现象 1.思科PVST BPDU报文导致全网闪断。 2.光衰低时不同品牌网络设备无法兼容导致接入交换机中断。 二、网络拓扑 图1 网络拓扑图 组网结构为H3C汇聚,接入交换机有思科,也有H3C,而且与汇聚直连的接入交换机下面串接了较多的交换机,或者hub。 三、排查思路 1.回忆一下最近做了什么事情,什么时候开始出的问题。 将网络汇聚交换机从思科换为H3C,H3C汇聚和思科接入对接出问题...

Silence_always的博客 7465

利用注解实现productId校验

1、注解的使用 @PermRequired(params = {@Param(index = 0)}, biz = PermBizCategory.PRODUCT, role = PermRoleGroup.OWNERANDCHILDANDOEM) public void xxx(String productId, ...) { ... } 2、注解接口定义 package com.xxx; import java.lang.annotation.ElementType; impor

QQsilhonette的博客 375

手把手拆解:储能电站如何实现‘孤岛运行’与‘黑启动’?从SVPWM控制到无缝并网

本文深入解析储能电站的孤岛运行与黑启动技术,从SVPWM控制策略到电网重构实战。通过详细的三环控制架构和黑启动五阶段技术路线,展示储能电站在电网故障时如何快速切换为独立电压源并实现电网重建。文章还探讨了虚拟惯量补偿、多站协同控制等前沿技术,为电力系统应急恢复提供关键解决方案。

weixin_30509393的博客 304

ibatis初步介绍

ibatis初步介绍            在开发过程中最能帮助你的是什么?是框架,一个优秀的框架可以极大的提高你的效率。struts给了我们什么?MVC的实现,国际化、灵活。还有很多。不过,在一个通常的WEB应该中,是不能缺少数据库的,而struts在这方面并没有给我们提供什么有效的帮助。通常情况下我们做这个的时候有几个选择。            最直接的当然是JDBC啊,自己写con

duanzongyuan的专栏 1357

解密微信DAT图片:一键转换JPG/PNG/GIF的实用指南

本文详细解析微信DAT图片的加密机制及转换方法,提供从定位文件到使用WeijieSoft工具一键转换JPG/PNG/GIF的完整指南。涵盖新旧版微信存储路径差异、批量处理技巧及常见问题解决方案,帮助用户高效恢复重要图片并释放存储空间。

weixin_29305337的博客 2940

Brainstorm简单分析近红外数据(fNIRS)(一)

Brainstorm分析fNIRS数据

weixin_43604817的博客 1350

深入了解JS中的原始类型(primitive type)

深入了解JS中的原始(基础)类型

cgh508802602的博客 3604

MATLAB AppDesigner 中TextArea保留原有信息并换行显示提示信息

App Designer 中的文本区域TextArea组件,一般可以用来作为matlab app设计中的信息显示。 app.TextArea.Value = 'Hello Matlab'; Value可以是字符向量、字符向量元胞数组、字符串数组或一维分类数组。这样直接给TextArea赋值,每次赋值都会消除先前的信息,然后显示新的信息。如果想要在app实现保留原有信息、多行信息的输出,在MathWorks官方帮助中心给出了一种方法: cellArrayText{1} = sprintf('%s\n

我是麻瓜喔的博客 1万+

js中的原始值是什么?

在ECMAScript中,变量可以存放两种类型的值,即原始值和引用值. 原始值(primitive value):     原始值是固定而简单的值,是存放在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置. 引用值(reference value):     引用值则是比较大的对象,存放在堆(heap)中的对象,也就是说,存储在变量

qq_30541261的博客 7155

别再死记硬背了!用LabVIEW串口通信的3个真实项目案例,手把手教你从调试到部署

本文通过3个真实项目案例,详细讲解LabVIEW串口通信从调试到部署的全过程。涵盖Arduino温湿度监控、西门子PLC Modbus通信以及高可靠性通信框架设计,提供实用技巧和常见问题解决方案,帮助工程师快速掌握LabVIEW串口通信的实战应用。

weixin_30485379的博客 522

2026年软件测试职业院校技能大赛—ERP管理平台-采购入库模块Bug定位与查找

竞赛对接软件测试相关标准,以“ERP管理平台” 为被测系统,围绕软件测试领域的主流技术及工具,考查选手面 对实际问题的综合分析能力,对测试文档、测试用例的设计能力, 对单元测试、自动化测试、性能测试、接口测试等测试工具及方 法的掌握程度,检验选手团队协作能力、组织规划能力、方法运用能力等。

我是网络安全兼技能大赛工程师,专注网络安全技术学习与技能大赛实战!持续分享最新的技术文章,帮你少走弯路,一起在技术赛道上进步~ 194

Mybatis参数映射——@Param、paramType

@Param、paramType

qq_38993995的博客 405

通信算法之249: DJI波形物理层

D-J-I的Lightbridge波形、Ocusync1波形、Ocusync2波形、Ocusync3波形,

leegang12的专栏 1436

来吧!一文彻底搞懂引用类型!

作者 | Jeskson 掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb 2020年01月09日 引用类型的值(对象)是引用类型的一个实例。引用类型有时也称对象定义,因为它们描述的是一类对象所具有的属性和方法。 对象是某个特定引用类型的实例,新对象是使用new操作符后跟一个构造函数来创建的,构造函数本身就是一个函数,只...

程序员哆啦A梦,蓝胖子 3781

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

一文彻底搞懂引用类型

array.splice(start 第一个参数为指定开始修改的位置,如果超出了数组的长度就从末尾开始添加内容,如果为负值,就从数组末尾开始的第几位,从1开始计数, deleteCount第二个参数为,要删除的元素的个数,是从start位置开始要删除的元素个数,为0时表示不删除元素,其后的参数为要加入的元素,从start位置开始,添加的元素。我相信你在学习时一定见到过Array类型,也是最常见的,数组的每一项可以存储任何类型的数据,数组的大小是可以动态变动的,数组的长度越大就可以存储更多的数据。

weixin_64051447的博客 3099

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

彻底搞懂 JS 数据类型:基本类型与引用类型的核心差异

JavaScript数据类型分为基本类型(Number、String等)和引用类型(Object、Array等),核心差异在于内存存储方式不同。基本类型直接存储在栈内存,赋值时复制实际值,变量间互不影响;引用类型实际值存在堆内存,变量存储引用地址,赋值时复制地址,变量共享同一对象。这种设计优化了性能,但可能导致修改互相影响。可通过深拷贝(如JSON序列化或递归复制)解决共享问题。理解这一机制是掌握原型链、闭包等概念的基础。

m0_61594728的博客 954

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

一文搞懂js中的隐式类型转换

前言 今天来详细了解一下javascript中的隐式类型转换,通过在各种情况下发生的隐式类型的例子,来详细的了解隐式类型转换的过程。 如何转换-前置知识 1.对象类型转换 当对象类型进行类型转换时,会调用js内部一个方法toPrimitive, 此方法接收两个参数,一个参数为需要转换的对象,另一个方法接收一个期望类型,string或number。 当期望值为number时 会调用valueOf方法,如果返回的值不是原始值,则继续调用toString方法。 当期望值为string时 会调用toStr

左道前端 2453

一文搞懂JS类型判断的四种方法

在JavaScript中,类型判断是一个非常基础但也十分重要的知识点。不同的类型判断方法适用于不同的场景,掌握这些方法可以帮助我们更好地理解和使用JavaScript。本文将详细介绍typeofinstanceof以及这四种常用的类型判断方法,并通过实例代码帮助大家加深理解。文末有 已成功帮助500多人拿到前端offer的文章!!typeof适合用于检查基本数据类型,但对于null和对象类型的判断不够准确。instanceof用于检查对象的构造函数,适用于引用类型的判断。

2401_86113453的博客 2030

一文彻底搞懂javascript中的undefined

undefined是可以说是javascript中最特殊的一个类型,许多其他语言中都没有这个类型。它表示一个变量已经声明,但还没有被赋值。如果没有掌握好undefined,则可能会写出一些非常业余的代码,我们来看一个例子,这是在做code review时遇到的真实例子,你能看出下面的代码有什么问题吗?在揭晓答案之前,我们先系统学习一下什么情况下JavaScript会产生undefined类型。

kfashfasf的博客 2117

彻底搞懂JS中的数据类型

基本数据类型指的是简单的数据段,引用数据类型指的是有多个值构成的对象。 1、常见的基本数据类型:  Number、String 、Boolean、Null和Undefined。基本数据类型是按值访问的,因为可以直接操作保存在变量中的实际值。示例:   var a = 10;   var b = a;   b = 20;   console.log(a); // 10值   上面,b获...

微光的博客 2536

一文让你彻底搞懂js正则表达式

正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。例如:我们在写登录注册功能的时候使用的表单验证(对用户名、密码进行一些字符或长度进行限制) ===> (`匹配`) - 正则表达式还常用于过滤掉页面内容的一些敏感词汇。例如:我们平常在打游戏时候的口吐芬芳被换成了***:full_moon_with_face: ===> (`替换`) - 正则表达式从字符串中获取我们想要的特定部分。例如:我们在逛淘宝的时候在搜索框中搜索内容,会弹出很多与搜索相关的提示内容 ===> (`提取`) etc..

前端小白在前进的博客 1518

(转载)JavaScript 必知必会:值类型 vs. 引用类型,一文彻底搞懂!

它们的存储方式、操作逻辑及内存管理机制截然不同,深刻理解二者差异是优化代码性能和避免Bug的关键。// 20(同步修改)console.log(a);// 10(不受影响)JavaScript的数据类型分为。

lzhdim的专栏 506

「JavaScript基础」一文彻底搞懂JS的事件流以及事件模型

在JavaScript中,事件流和事件模型是处理用户交互的关键概念。深入理解这些概念将使你能够更好地处理和响应用户的动作。本文将详细介绍JavaScript的事件流和事件模型。

XH_jing的博客 3500

一文彻底搞懂js垃圾回收和内存泄露

垃圾回收机制 浏览器的 Javascript 具有自动垃圾回收机制(GC:Garbage Collecation),也就是说,执行环境会负责管理代码执行过程中使用的内存。其原理是:垃圾收集器会定期(周期性)找出那些不在继续使用的变量,然后释放其内存。但是这个过程不是实时的,因为其开销比较大并且GC时停止响应其他操作,所以垃圾回收器会按照固定的时间间隔周期性的执行。 只有函数内的变量才可能被回收 不再使用的变量也就是生命周期结束的变量,当然只可能是局部变量,全局变量的生命周期直至浏览器卸载页面才会结束。局部变

田兴的博客 5937

彻底搞懂 JavaScript 的基本数据类型,拿下面试官的核心提问!

在 JavaScript 中,“数据类型”不仅是语言基础,更是众多面试题背后的核心。基础扎实与否,直接影响你对变量存储、内存管理、数据传递等核心机制的理解。很多候选人以为自己“懂了”,一问就露馅儿。熟练掌握 JS 的基本数据类型,是你迈入前端开发的第一道门槛。JavaScript 的基本数据类型虽然属于入门知识,但贯穿在项目开发的每一个角落。理解数据类型,就是理解 JS 本质的第一步。面试中,如果你能答得出、讲得清、扩得深,不仅能展现你的基础功底,更能体现你对前端的系统性认知。建议你在准备时。

残影的博客 860
上一篇: JS 合并数组的三大方式
下一篇: 使用装饰器模式强大你的 fetch
蟹蟹蟹风流
蟹蟹蟹风流 优质创作者: 编程框架技术领域 优质创作者: 编程框架技术领域 领域专家: 前端开发技术领域 领域专家: 前端开发技术领域
博客等级 码龄11年 3万+粉丝 396原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蟹蟹蟹风流

期望和你分享一杯咖啡

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值