news 2026/6/14 22:43:26

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/15 10:51:03

Open-AutoGLM如何重塑知识管理?3个实战案例告诉你答案

第一章:Open-AutoGLM如何重塑知识管理?3个实战案例告诉你答案在人工智能驱动的知识管理新时代,Open-AutoGLM 凭借其强大的语义理解与自动生成能力,正在重新定义企业知识的采集、组织与应用方式。通过自然语言处理和图谱构建的深度…

作者头像 李华
网站建设 2026/6/15 3:30:54

Open-AutoGLM手势交互实战指南(99%开发者忽略的底层优化细节)

第一章:Open-AutoGLM手势控制适配在智能交互系统中,Open-AutoGLM 提供了一种基于大语言模型驱动的手势识别与控制机制。该框架通过融合视觉感知与自然语言理解能力,实现对手势指令的语义解析与自动化响应,适用于车载、智能家居等多…

作者头像 李华
网站建设 2026/6/14 22:51:23

揭秘Open-AutoGLM远程配置核心技巧:5步完成企业级部署

第一章:揭秘Open-AutoGLM远程配置核心技巧:5步完成企业级部署在企业级AI平台部署中,Open-AutoGLM凭借其模块化架构和远程配置能力脱颖而出。通过标准化流程,可在复杂网络环境中实现快速、安全的规模化部署。环境准备与依赖安装 确…

作者头像 李华
网站建设 2026/6/15 1:54:29

Excalidraw AI降低新人入职培训难度

Excalidraw AI:让新人培训从“听懂”到“画出” 在一家快速扩张的技术公司里,新入职的后端工程师小李正面对一份长达 30 页的系统文档。第 12 页是一张手绘风格的架构图——用户请求如何穿过网关、触发订单服务、调用支付接口并最终写入数据库。这张图旁…

作者头像 李华
网站建设 2026/6/15 12:03:01

Excalidraw AI错误生成的纠正机制设计

Excalidraw AI错误生成的纠正机制设计 在智能设计工具飞速发展的今天,AI 已不再是“锦上添花”的附加功能,而是真正介入创作流程的核心角色。Excalidraw 作为一款广受开发者和技术团队青睐的手绘风格白板工具,在引入自然语言驱动的图表生成功…

作者头像 李华
网站建设 2026/6/14 17:22:30

Excalidraw AI能否理解行业术语?实测验证

Excalidraw AI能否理解行业术语?实测验证 在技术团队频繁使用架构图、流程图和系统拓扑进行沟通的今天,一个现实问题逐渐浮现:我们能不能直接对白板说“画个带熔断机制的微服务调用链”,然后就看到一张结构清晰、术语准确的示意图…

作者头像 李华