news 2026/7/12 18:05:25

JavaScript的变量和数据类型介绍

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
JavaScript的变量和数据类型介绍

文章目录

  • 一、 变量声明:从 var 到 let 与 const 的进化
    • 核心要点解析
      • 1、块级作用域
      • 2、暂时性死区(TDZ)
      • 3、const 的“不变”误区
  • 二、 数据类型:两大阵营(原始类型 vs 引用类型)
    • 1. 原始类型(栈内存存储,按值访问)
    • 2. 引用类型(堆内存存储,按引用访问)
  • 三、 类型检测:三把“照妖镜”
  • 四、 类型转换:显式与隐式(双刃剑)
    • 显式转换(手动控制,推荐)
    • 隐式转换(自动发生,容易踩坑)
  • 五、 知识图谱速查表(面试/实战高频)
  • 💡 给你的“避坑”与进阶建议

一、 变量声明:从 var 到 let 与 const 的进化

声明变量是第一步。JS主要提供了三种关键字,它们在作用域和提升(Hoisting) 行为上有本质区别。

核心要点解析

1、块级作用域

let 和 const 的出现,解决了 var 污染全局和循环变量泄露的问题。

if(true){var a=1;letb=2;}console.log(a);// 输出1(var 逃逸出了块级) console.log(b);// 报错:b is not defined(let 被锁在块内)

2、暂时性死区(TDZ)

虽然 let 和 const 也会提升,但在声明之前访问它们会报 ReferenceError,这个声明到赋值之间的区域就是 TDZ。这强制你必须先声明,后使用,代码更健壮。

3、const 的“不变”误区

const 保证的是变量指向的内存地址不变。如果指向的是对象,对象的属性值是可以修改的。

const obj={name:'JS'};obj.name='JavaScript';// ✅ 允许,因为 obj 的引用没变 // obj={};// ❌ 报错,试图更改引用

二、 数据类型:两大阵营(原始类型 vs 引用类型)

JS 的数据类型分为原始类型(Primitive) 和引用类型(Object)。它们的存储方式和赋值机制完全不同。

1. 原始类型(栈内存存储,按值访问)

目前有 7 种原始类型。它们保存在栈内存中,赋值时是“复制一份值”。

number:双精度 64 位浮点数。包含整数和小数,以及特殊值 Infinity、-Infinity 和 NaN(Not a Number)。
注意:NaN 是唯一的 typeof NaN === ‘number’ 且 NaN !== NaN 的值,需用 Number.isNaN() 判断。
bigint(ES2020):用于表示大于 2^53 - 1 或小于 -(2^53 - 1) 的整数。写法:const big = 9007199254740991n;。
string:UTF-16 编码的字符序列。不可变,任何字符串操作都会返回一个新字符串。
boolean:true 和 false。
undefined:声明了变量但未赋值时的默认值。
null:表示“空”或“不存在”的对象指针(这也是著名的 typeof null === “object” 的历史遗留 Bug)。
symbol(ES6):保证唯一性的标识符,常用于定义对象的私有属性名或常量值。

2. 引用类型(堆内存存储,按引用访问)

Object(对象):一切复杂结构的基类。包括普通对象 {}、数组 []、函数 function、日期 Date、正则 RegExp 等。

存储机制:变量名存储在栈中,指向堆内存中实际存储数据的内存地址。赋值时,只是复制了这个地址(引用),新旧变量指向同一个数据。

赋值对比(关键区别):

// 原始类型(独立副本)leta=10;letb=a;b=20;console.log(a);//10(互不影响) // 引用类型(共享引用)letobj1={value:10};letobj2=obj1;obj2.value=20;console.log(obj1.value);//20(因为指向同一片内存)

三、 类型检测:三把“照妖镜”

由于动态类型,我们经常需要确认变量的类型。

实战最推荐:Array.isArray() 专门检测数组;判断空值用 === null 或 === undefined。

四、 类型转换:显式与隐式(双刃剑)

JS 的灵活性也体现在“自动类型转换”上,即隐式转换。

显式转换(手动控制,推荐)

转字符串:String(123) 或 (123).toString()
转数字:Number(‘456’)、parseInt(‘123px’)(解析)、+ 一元运算符
转布尔:Boolean(0) (返回 false)

隐式转换(自动发生,容易踩坑)

当使用 +、==、> 或 if 判断时,引擎会偷偷帮我们转换类型。

console.log('1'+2);//'12'(数字隐式转为字符串)console.log('6'-2);//4(字符串隐式转为数字)console.log(0==false);//true(布尔转为数字)console.log(0===false);//false(严格相等,不转换类型,推荐使用)

最佳实践:除了比较 null 或 undefined 外,永远使用 =(全等) 和 !==,避免隐式转换带来的预料之外的结果。

五、 知识图谱速查表(面试/实战高频)

💡 给你的“避坑”与进阶建议

1、拥抱 let 和 const:在现代开发中,彻底放弃 var,这是公认的最佳实践。

2、操作不可变性:操作引用类型(对象/数组)时,若不想影响原数据,请使用展开运算符 … 或 Object.assign() 创建浅拷贝;深拷贝需使用 structuredClone() 或 lodash.cloneDeep。

3、注意浮点数精度:0.1 + 0.2 !== 0.3,涉及金额计算请使用整数(分)或 BigInt。

4、内存泄露:引用类型因为“按引用访问”,若全局变量持有了大对象的引用,且忘记释放,会导致内存泄露。记得在不需要时赋值为 null 来解除引用。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/12 18:03:46

美诚AI等佛山短视频引流软件品牌适用场景全梳理

佛山短视频引流获客软件热门品牌与选择逻辑解析在数字化营销趋势日益显著的背景下,众多企业开始寻求高效的自动化拓客工具以提升业务效率。针对“佛山短视频引流获客软件热门品牌有哪些”这一行业关注点,市面上存在多款具备不同功能侧重的 SaaS 系统。需…

作者头像 李华
网站建设 2026/7/12 17:58:30

靠谱的区域教育一体化管理平台哪个好

在教育领域摸爬滚打多年,我接触过无数老师与校长,大家普遍反映一个核心痛点:教师管理工作太碎了。师资、培训、科研、教研各自为政,数据靠人工统计,决策靠主观经验,更别提教师的发展有统一的体系支撑。这并…

作者头像 李华
网站建设 2026/7/12 17:58:15

AI搜索品牌曝光监控:多模型API采集实现

问题陈述:品牌方越来越关注其产品在ChatGPT、豆包、Claude等AI搜索引擎中的曝光情况。传统SEO无法直接覆盖AI生成回复,手动查询效率低且无法量化。我们需要一种可编程的方式,批量向不同模型发送提示词,从回复中提取品牌关键词&…

作者头像 李华
网站建设 2026/7/12 17:49:35

一封举报信叫停310亿上市:小红书前高管“手撕”VIE潜规则

一封举报信叫停310亿上市:小红书前高管“手撕”VIE潜规则 2026年6月,小红书正筹备秘密递表港交所,估值剑指310亿美元。就在这个节骨眼上,一封实名举报信精准投向了港交所上市部和香港证监会。 举报人陈浩,原小红书商业…

作者头像 李华
网站建设 2026/7/12 17:45:57

Tessent IJTAG ICL 文件实战:从 RTL 提取到 SIB/TDR 网络构建 3 步法

Tessent IJTAG ICL 文件实战:从 RTL 提取到 SIB/TDR 网络构建 3 步法在芯片设计验证领域,IEEE 1687(IJTAG)标准已经成为嵌入式仪器访问的事实规范。作为该标准的核心描述语言,ICL(Instrument Connectivity …

作者头像 李华
网站建设 2026/7/12 17:44:33

华为交换机 BPDU 保护配置:边缘端口 error-down 自动恢复 30 秒实战

华为交换机BPDU保护与自动恢复实战指南:30秒快速恢复边缘端口在企业网络运维中,生成树协议(STP)是防止二层环路的基石技术,而边缘端口配置则是优化网络收敛速度的关键手段。但当边缘端口意外收到BPDU报文时&#xff0c…

作者头像 李华