javascript有哪些数据类型_如何区分原始类型与引用类型

JavaScript有6种原始类型:string、number、boolean、null、undefined、symbol、bigint;引用类型包括Object、Array、Function等对象结构,核心区别在于赋值、比较、可变性和检测方式。

javascript有哪些数据类型_如何区分原始类型与引用类型

JavaScript 有 7 种数据类型:6 种原始类型(primitive types)和 1 种引用类型(reference type),但严格来说,引用类型是一大类,包含多个具体对象类型。

原始类型有哪些?

原始类型是不可变的、按值传递的基本数据单元,共 6 种:

string:文本,如 "hello" number:整数和浮点数,如 423.14 boolean:逻辑值,truefalse null:空值,一个独立的原始类型(尽管 typeof null === "object" 是历史 bug) undefined:未赋值或未声明变量的默认值 symbol(ES6 新增):唯一且不可变的标识符,常用于对象属性键 bigint(ES2020 新增):表示任意精度的整数,如 123n

✅ 小技巧:用 typeof 可准确识别所有原始类型(除 null 外);typeof null 返回 "object",需单独判断。

引用类型有哪些?

引用类型是可变的、按引用传递的对象结构,它们在内存中以地址形式存在。常见引用类型包括:

立即学习“Java免费学习笔记(深入)”;

Object:普通对象,如 { name: "Alice" } Array:数组,如 [1, 2, 3] Function:函数,如 function() {}(函数在 JS 中是“一等对象”) DateRegExpError 等内置构造器实例 MapSetWeakMapWeakSet PromiseProxyReflect 自定义 class 实例,如 class Person {}; new Person()

⚠️ 注意:typeof 对大部分引用类型返回 "object"(函数除外,返回 "function"),所以不能单靠 typeof 区分数组、日期、正则等。推荐用 Object.prototype.toString.call(value) 获取精确类型,例如:

Object.prototype.toString.call([]) 返回 "[object Array]"
Object.prototype.toString.call(/abc/) 返回 "[object RegExp]"

原始类型 vs 引用类型的核心区别

关键不在“存哪里”,而在“怎么传、怎么比较、怎么修改”:

赋值方式不同:原始类型赋值是复制值本身;引用类型赋值是复制内存地址(即两个变量指向同一块堆内存) 比较方式不同:原始类型用 ===== 比较值是否相等;引用类型只有指向同一个对象时才相等(=== 比的是地址) 可变性不同:原始类型不可变(字符串拼接其实是新建字符串);引用类型内容可随时修改(如 arr.push(4)检测方式不同:原始类型用 typeof(除 null);引用类型建议用 Object.prototype.toString.call()Array.isArray()instanceof 等针对性方法

一个快速区分的小结

遇到一个值,想快速判断它是原始还是引用类型,可以这样操作:

先用 typeof value:如果结果是 "string" / "number" / "boolean" / "symbol" / "bigint" / "undefined" → 原始类型
如果是 "function" → 引用类型(函数)
如果是 "object" → 需进一步判断(可能是 null、数组、对象、日期等) 再对 "object" 类型做 value === null ? "null" : Object.prototype.toString.call(value).slice(8, -1),就能得到真实类型名 顺手记一句口诀:原始六(七)种小而稳,引用万物皆对象

基本上就这些。不复杂,但容易忽略细节,尤其 nulltypeof 的陷阱。

以上就是javascript有哪些数据类型_如何区分原始类型与引用类型的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1542230.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 14:01:13
下一篇 2025年12月21日 14:01:23

相关推荐

  • javascript库是什么_jQuery还有使用的必要吗

    jQuery已非新项目必需,因现代浏览器原生API成熟、主流框架减少DOM操作、体积负担与维护成本高;仅老系统、特定插件依赖或极简静态页等场景暂难替代。 JavaScript 库是一组预先编写好的、可复用的 JavaScript 代码集合,用来简化常见任务,比如操作 DOM、处理事件、发送网络请求、…

    2025年12月21日
    000
  • 什么是javascript树结构_如何遍历DOM树?

    JavaScript中的“树结构”指DOM这种分层数据组织方式,以document为根节点,HTML元素按父子、兄弟关系嵌套构成树;常用遍历法包括childNodes/children、parentNode、next/previousElementSibling、querySelector及递归DF…

    2025年12月21日
    000
  • javascript_如何实现搜索引擎

    实现一个简单的搜索引擎需先准备数据源,如包含id、标题和内容的文档数组;接着编写搜索函数,将用户输入转为小写关键词数组,遍历每条文档的内容与标题,统计关键词出现次数并计算匹配得分;然后通过事件监听实时获取输入框内容,调用搜索函数并按得分降序排列结果;最后将匹配项以高亮形式展示在页面中,并可通过防抖优…

    2025年12月21日
    000
  • React useState 对象状态与表单输入绑定指南

    本文深入探讨了在react中将`usestate`管理的对象状态直接绑定到表单输入`value`属性时,出现`[object, object]`显示错误的原因及解决方案。核心在于,表单输入期望接收字符串或数字等基本类型值,而非整个对象。教程将详细讲解如何正确访问对象属性进行绑定,并提供完整的示例代码…

    2025年12月21日
    000
  • React中利用map函数动态渲染背景图片的正确姿势与常见陷阱

    本文旨在深入探讨在react应用中,如何正确使用`map`函数动态加载并显示背景图片。文章将详细解释初学者常犯的错误——将图片路径数组错误地应用于单个元素,而非为每个数据项生成独立的元素并设置其背景图片。通过对比错误与正确的代码示例,并结合react渲染列表的关键注意事项,帮助开发者掌握高效且符合r…

    2025年12月21日 好文分享
    000
  • JavaScript文件上传类型校验:告别模糊,拥抱MIME类型

    本文深入探讨了JavaScript中文件上传类型校验的常见误区,即错误地依赖`input.value`(文件名)进行判断,导致校验不准确且行为异常。我们将详细介绍如何通过访问`inputElement.files[0].type`获取文件的MIME类型,并结合正则表达式进行可靠的客户端校验。文章提供…

    2025年12月21日
    000
  • 动态修改图片画廊弹出层背景色的教程

    本教程详细介绍了如何使用javascript动态修改图片画廊弹出层的背景颜色,以在用户切换图片时提供更丰富的视觉反馈。通过直接操作dom元素的style.background属性,结合事件监听器,可以轻松实现背景色的实时切换,并可配合css过渡效果增强用户体验。 引言:实现交互式图片画廊的背景色动态…

    2025年12月21日 好文分享
    000
  • JavaScript中call_apply_bind的区别_如何使用

    call和apply立即执行函数,bind返回绑定this的新函数;call参数逐个传,apply参数用数组传,bind可预设参数并延迟调用。 三者都能改函数里的 this,但用法和时机完全不同。核心就三点:谁立刻执行、参数怎么传、返回值是什么。 call:立刻执行,参数一个个列出来 第一个参数是你…

    2025年12月21日
    000
  • JavaScript如何操作Shadow DOM?

    JavaScript操作Shadow DOM需先用attachShadow()创建影子根并指定open/closed模式,再通过shadowRoot使用标准DOM方法操作;两者与主DOM隔离,可通过自定义事件、slot和:host等机制通信与样式穿透。 JavaScript操作Shadow DOM主…

    2025年12月21日
    000
  • 如何用javascript创建自定义事件_如何触发和监听?

    JavaScript创建自定义事件需用CustomEvent构造函数(可带detail数据)、dispatchEvent触发(支持元素或document广播)、addEventListener监听(通过e.detail获取数据),注意冒泡、取消及内存泄漏。 JavaScript 中创建和使用自定义事…

    2025年12月21日
    000
  • 如何使用JavaScript处理错误_try-catch块和Promise.catch有什么区别呢

    JavaScript错误处理分同步和异步:try-catch捕获同步错误,.catch()或async/await+try-catch处理Promise异步错误;二者分工明确,不可替代,核心在于错误发生的执行上下文不同。 JavaScript 中的错误处理主要有两种常见场景:同步代码用 try-ca…

    2025年12月21日
    000
  • JavaScript中如何扁平化数组_flat方法的兼容性

    不支持 flat() 的环境包括:IE 全系列、Edge JavaScript 中 flat() 方法本身不兼容旧版浏览器(如 IE、Edge 17 及更早版本、Safari 11.1 之前等),需通过 Polyfill 或替代方案实现兼容。 哪些环境不支持 flat() 原生 Array.prot…

    2025年12月21日
    000
  • JavaScript forEach和map有何不同_如何选择?

    forEach用于执行副作用操作并返回undefined,map用于转换数据并返回新数组;需过程选forEach,要结果选map。 forEach 用来执行操作,map 用来生成新数组;选哪个,取决于你想要“做事情”还是“要结果”。 用途不同:副作用 vs 返回值 forEach 的设计目的就是遍历…

    2025年12月21日
    000
  • JavaScript如何验证表单数据?

    JavaScript表单验证核心是在提交前检查用户输入是否符合要求,防止无效或危险数据发给服务器;它通过事件监听+条件判断、HTML5原生属性辅助、实时反馈机制实现,但不能替代后端验证。 JavaScript验证表单数据,核心是**在提交前检查用户输入是否符合要求**,防止无效或危险数据发给服务器。…

    2025年12月21日
    000
  • 怎样使用javascript地理定位API_隐私问题如何处理?

    JavaScript地理定位API必须经用户明确授权才能使用,首次调用前可用permission.query()检查状态,需在用户触发相关功能时说明用途并请求权限,拒绝后应提供手动输入等降级方案,且位置数据须遵循最小必要原则处理。 JavaScript 地理定位 API(navigator.geol…

    2025年12月21日
    000
  • JavaScript中的WebGL是什么_它如何实现3D图形渲染呢

    WebGL是OpenGL ES在网页上的底层绑定,充当JavaScript与GPU之间的桥梁,提供gl.drawArrays()等接口实现高效3D渲染,但不内置场景管理、模型加载或交互功能。 WebGL 是浏览器中运行的 3D 图形 API,它不“自己渲染”,而是让 JavaScript 能调用显卡…

    2025年12月21日
    000
  • 如何使用JavaScript进行跨平台开发_Flutter和React Native有什么区别呢

    JavaScript不能用于Flutter开发,仅适用于React Native;React Native用JS/TS编写逻辑并桥接原生组件,性能接近原生;Flutter用Dart和Skia自绘UI,一致性高、动画流畅但需学习新语言。 JavaScript本身不能直接用于Flutter开发,但可以用…

    2025年12月21日
    000
  • javascript的web audio api是什么_如何处理声音?

    Web Audio API 是浏览器提供的高级音频处理接口,通过 AudioContext 管理时间线与节点连接,支持加载解码、实时加工(如滤波、混响、频谱分析)及低延迟交互,需注意用户手势激活和参数自动化。 Web Audio API 是浏览器提供的一个用于处理和合成音频的高级 JavaScrip…

    2025年12月21日
    000
  • 从WebdriverIO到Playwright:高效迁移策略与代码复用指南

    本文将探讨如何将基于webdriverio的自动化测试框架高效迁移至playwright。虽然缺乏直接转换工具,但通过策略性地复用现有代码,尤其是在语言、测试框架、定位器和数据管理方面,可以大幅简化迁移过程。文章强调了模块化设计和抽象在实现无缝过渡中的关键作用,并提供了具体的代码复用建议。 1. 理…

    2025年12月21日
    000
  • 如何实现自动完成_javascript中搜索提示功能怎么做?

    自动完成核心是监听输入、实时匹配、动态展示建议;需用防抖控制时机,输入停顿200–300ms后匹配,取消前次未完成定时器,过滤空值或过短输入。 自动完成(Auto-complete)在 JavaScript 中的搜索提示功能,核心是监听用户输入、实时匹配数据、动态展示建议列表。关键不在于写多少代码,…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信