news 2026/6/10 15:35:25

JavaScript 变量

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
JavaScript 变量

一、变量的核心概念

变量就像一个带标签的盒子,你可以把数据(数字、文字、对象等)存进去,之后通过标签(变量名)来访问或修改里面的数据。JavaScript 中声明变量有 3 种方式,对应不同的特性。

二、变量的声明方式

1. 三种声明关键字(ES6+)
关键字作用域变量提升重复声明能否修改核心特点
var函数作用域 / 全局有(提升到作用域顶部,值为 undefined)允许ES5 及之前的声明方式,易出问题
let块级作用域({}内)有 “暂时性死区”(不可提前访问)不允许ES6 推荐,替代 var
const块级作用域有 “暂时性死区”不允许不能(常量)声明时必须赋值,值不可改(引用类型仅地址不可改)
2. 代码示例:三种声明方式对比

javascript

运行

// 1. var声明(函数/全局作用域,可重复声明) var a = 10; var a = 20; // 允许重复声明 console.log(a); // 输出 20 // 2. let声明(块级作用域,不可重复声明) let b = 10; // let b = 20; // 报错:Identifier 'b' has already been declared if (true) { let b = 30; // 块内独立变量,不影响外部 console.log(b); // 输出 30 } console.log(b); // 输出 10 // 3. const声明(常量,不可修改) const c = 100; // c = 200; // 报错:Assignment to constant variable. const obj = { name: "Adobe" }; obj.name = "JavaScript"; // 允许修改引用类型的属性(地址未变) console.log(obj.name); // 输出 JavaScript

三、变量的命名规则(必须遵守)

  1. 开头字符:只能以字母(a-z/A-Z)、下划线(_)、美元符号($)开头,不能以数字开头。
  2. 字符组成:后续字符可以是字母、数字、下划线、美元符号。
  3. 大小写敏感nameName是两个不同的变量。
  4. 禁用关键字:不能使用 JavaScript 保留字(如letconstiffunction等)。
  5. 规范建议
    • 普通变量:小驼峰命名(如userNametotalPrice);
    • 常量:全大写 + 下划线(如MAX_NUMPI)。
错误 / 正确命名示例:

javascript

运行

// 错误命名 var 123num = 1; // 数字开头 var let = 2; // 使用关键字 var user-name = 3; // 含非法字符(-) // 正确命名 var num123 = 1; var _userAge = 20; var $price = 99; const MAX_COUNT = 100;

四、变量提升与暂时性死区

1. 变量提升(仅var

var声明的变量会被 “提升” 到作用域顶部,但赋值不会提升:

javascript

运行

console.log(x); // 输出 undefined(变量提升,未赋值) var x = 10; console.log(x); // 输出 10
2. 暂时性死区(let/const

let/const声明的变量,在声明语句之前访问会报错,这就是 “暂时性死区”,避免了提前使用未定义的变量:

javascript

运行

// console.log(y); // 报错:Cannot access 'y' before initialization let y = 20; console.log(y); // 输出 20

五、变量的作用域

  1. 全局作用域:在函数 / 块外部声明的变量,整个脚本都能访问(var/let/const声明的全局变量,前者挂载到window,后两者不挂载)。
  2. 函数作用域var声明的变量仅在函数内可访问。
  3. 块级作用域let/const声明的变量仅在{}内(如if/for/while块)可访问。

javascript

运行

// 全局作用域 var globalVar = "全局var"; let globalLet = "全局let"; function test() { // 函数作用域 var funcVar = "函数内var"; let funcLet = "函数内let"; console.log(globalVar); // 可访问全局变量 if (true) { // 块级作用域 let blockLet = "块内let"; console.log(funcVar); // 可访问函数内变量 } // console.log(blockLet); // 报错:blockLet is not defined(块外不可访问) } test(); console.log(funcVar); // 报错:funcVar is not defined(函数外不可访问)

总结

  1. 声明方式:优先使用let(可变变量)和const(常量),避免var(作用域不清晰、可重复声明)。
  2. 命名规则:字母 / 下划线 /$ 开头,大小写敏感,禁用关键字,遵循小驼峰 / 全大写规范。
  3. 核心特性let/const有块级作用域和暂时性死区,const声明时必须赋值且不可修改值(引用类型仅地址不可改)。
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/10 10:53:29

【3大核心优势+5步部署流程】Open-AutoGLM文档扫描归档落地指南

第一章:Open-AutoGLM文档扫描归档概述Open-AutoGLM 是一个基于多模态大语言模型的智能文档处理系统,专注于自动化扫描、识别与归档各类纸质或电子文档。该系统融合光学字符识别(OCR)、自然语言理解(NLU)和知…

作者头像 李华
网站建设 2026/6/10 13:44:57

Excalidraw AI降低非设计人员的绘图门槛

Excalidraw AI:让“画图”不再依赖设计技能 在一次远程技术评审会上,一位产品经理突然提出:“我们能不能实时把刚才讨论的架构变化画出来?”会议室陷入短暂沉默——不是没人懂架构,而是没人愿意当场打开 Visio 或 Figm…

作者头像 李华
网站建设 2026/6/9 19:20:26

把 UI 异常从“转瞬即逝”变成“可追溯证据链”:在 SAP BSP 框架里持久化异常并支持一键定位源码

在不少 SAP 老牌 UI 技术栈里(尤其是 CRM WebClient UI / BSP 运行时),你可能遇到过一种特别“难受”的故障:用户前台弹了个 Business Server Page (BSP) error,你和现场顾问把重现路径、用户输入、时间点都记录得清清楚楚,但一进 ST22 却发现——没有短转储。日志像被风…

作者头像 李华
网站建设 2026/5/28 16:20:16

把 Web Dynpro ABAP 性能问题拆开看:WDT_TRACE_ON 运行时性能 Trace 实战指南

在维护 Web Dynpro ABAP(WDA)应用时,最让人头疼的性能问题,往往不是那种一眼就能看出来的 SELECT *,而是用户点了一个按钮、页面转了很久才回来:有时慢在业务逻辑,有时慢在框架层的生命周期处理,有时又慢在渲染、上下文绑定、动态配置、甚至某个被反复触发的辅助方法。…

作者头像 李华
网站建设 2026/6/8 21:54:06

Excalidraw AI增强投标方案呈现力

Excalidraw AI增强投标方案呈现力 在一场关键的政企项目竞标中,技术团队仅有48小时准备时间。客户要求提交一份包含完整系统架构、数据流设计和安全合规说明的解决方案。传统流程下,这往往意味着连续加班:一人画PPT框图,一人写文档…

作者头像 李华