JavaScript 变量


关键点

  • 研究表明,JavaScript 变量是存储数据的容器,支持动态类型。
  • 它似乎可能有三种声明方式:var(函数作用域)、let(块作用域,可变)、const(块作用域,不可变)。
  • 存在争议:var 因变量提升问题不推荐,letconst 是现代选择。

变量定义

JavaScript 变量是数据的“容器”,可以保存数字、字符串、对象等各种类型的数据。它们是动态类型的,意味着变量可以在运行时改变类型。

声明方式

  • var:函数作用域,允许重新声明,适合旧代码,但因变量提升可能导致问题。
  • let:块作用域,可重新赋值,推荐用于新代码。
  • const:块作用域,值不可更改,用于定义常量。

命名规则

变量名必须以字母、下划线或美元符号开头,区分大小写,如 userNameUSERNAME 是不同的。



详细报告

JavaScript 是一种轻量级、解释型的编程语言,广泛用于 Web 开发,增强网页的互动性。根据 2025 年 6 月 8 日的最新信息,其语法基于 Java 和 C 语言,受到 Awk、Perl 和 Python 的影响,支持面向对象、指令式和函数式编程。以下是 JavaScript 变量的全面讲解,涵盖定义、声明方式、命名规则、作用域、常量和最佳实践。

1. 变量的定义与用途

JavaScript 变量是存储数据的容器,用于保存程序运行中的信息,如商品、用户或消息等。研究表明,变量是 JavaScript 编程的核心,允许开发者动态管理数据。变量是动态类型的,意味着变量可以在运行时改变类型,例如:

  • 示例:let x = 1; x = "字符串";

2. 变量的声明方式

JavaScript 提供了三种声明变量的方式,分别适用于不同的场景:

  • var
  • 介绍:这是 ES5 中引入的声明方式,具有函数作用域(function-scoped),允许重新声明(会覆盖原来的值),如果未赋值,默认值为 undefined,并且支持变量提升(hoisting)。
  • 示例:var a = 1; var a = 2; // 第二次声明覆盖第一次
  • 特点:因变量提升可能导致意外行为(如在声明前访问值为 undefined),不推荐在新代码中使用。
  • 适用场景:旧代码或需要函数作用域的场景。
  • let
  • 介绍:这是 ES6 中引入的声明方式,具有块作用域(block-scoped),推荐用于新代码,语法为 let variableName = value;
  • 示例:let b = 2; b = 3; // 可以重新赋值
  • 特点:块作用域意味着在 iffor 等代码块内有效,访问块外会抛出 ReferenceError。存在临时死区(Temporal Dead Zone),在声明前访问会报错。
  • 适用场景:需要可变变量的现代代码。
  • const
  • 介绍:这是 ES6 中引入的声明方式,具有块作用域,用于定义常量(值不能被修改),语法为 const variableName = value;
  • 示例:const c = 3; c = 4; // 报错:Assignment to constant variable
  • 特点:必须初始化,不能重新赋值,但如果是对象或数组,可以修改其内部属性(如 const obj = {}; obj.a = 1; 是合法的)。
  • 适用场景:定义不可变的值,如配置常量。

以下是声明方式的对比表:

声明方式作用域可变性变量提升推荐使用
var函数作用域可变,可重新声明支持不推荐
let块作用域可变,不可重新声明不支持推荐
const块作用域不可变,必须初始化不支持推荐

3. 变量命名规则

JavaScript 变量的命名必须遵循以下规则:

  • 必须以字母、下划线 (_) 或美元符号 ($) 开头。
  • 后续字符可以是字母、数字、下划线或美元符号。
  • 区分大小写(例如,yY 是不同的变量)。
  • 可以使用 Unicode 字符(如 å, ü),但建议使用英文字符以提高可读性。
  • 不能使用保留关键字(如 let, class, return, function)。

示例

  • 合法变量名:Number_hits, temp99, $credit, _name
  • 不合法变量名:1abc(不能以数字开头),let(保留关键字)。

4. 变量的使用

  • 可以在一行中声明多个变量,使用逗号分隔。
  • 示例:var lastname = "Doe", age = 30, job = "carpenter";
  • 不能在一行中给多个变量赋相同的值。
  • 示例:var x, y, z = 1;(结果是 xyundefinedz1)。

5. 变量作用域

  • var:函数作用域或全局作用域。
  • 如果在函数外声明,具有全局作用域;如果在函数内声明,具有函数作用域。
  • letconst:块作用域。
  • 在其所在的代码块(如 iffor)内有效,块外不可访问。

示例

  • var 的作用域:
  if (true) {
      var x = 1;
  }
  console.log(x); // 输出 1
  • let 的作用域:
  if (true) {
      let y = 2;
  }
  console.log(y); // ReferenceError: y is not defined

6. 变量提升(Hoisting)

  • var:变量声明会被提升到函数或全局作用域的顶部,但赋值不会。
  • 示例:console.log(a); var a = 1; 输出 undefined
  • letconst:不会被提升,尝试在声明前使用会抛出 ReferenceError(临时死区)。
  • 示例:console.log(b); let b = 2; 抛出 ReferenceError

7. 全局变量

  • 全局变量是全局对象(在浏览器中是 window)的属性。
  • 示例:var globalVar = 1; 等同于 window.globalVar = 1;
  • 可以使用 windowglobalThis 访问全局变量。
  • 示例:console.log(window.globalVar);

8. 常量

  • 使用 const 声明常量,值不能被修改。
  • 示例:const COLOR_RED = "#F00";
  • 常量必须初始化,不能像 varlet 那样可以不赋值。
  • 常量通常用大写字母表示,以区分于普通变量。

注意

  • const 不意味着对象或数组的内部属性不能被修改。
  • 示例:const obj = { a: 1 }; obj.a = 2; 是合法的。

9. 最佳实践

  • 变量名应具有描述性:如 userName, shoppingCart,避免使用模糊的名称如 a, b, c
  • 简洁但有意义:避免过于冗长的变量名。
  • 团队一致性:如果团队使用 currentUser,则坚持使用。
  • 避免重复使用变量:为不同的值声明新的变量,以提高代码清晰度。
  • 使用 letconst:优先使用 letconst,而非 var,因为它们具有块作用域。

10. 浏览器支持

以下是 ES6(包括 letconst)的浏览器支持情况(首次支持版本):

浏览器版本发布日期
Chrome582017 年 1 月
Edge142016 年 8 月
Firefox542017 年 3 月
Safari102016 年 7 月
Opera552018 年 8 月

11. 学习资源与社区讨论

开发者可以参考以下中文学习资源:

此外,X 帖子(如 tech_nurgaliyev 的帖子)讨论了 JavaScript 变量的最佳实践,反映了社区对 varlet/const 的不同观点。

12. 小结

JavaScript 变量是编程的核心,支持动态类型和多种声明方式。研究表明,letconst 是现代选择,var 因变量提升问题不推荐。建议开发者遵循命名规则和最佳实践,并结合学习资源逐步掌握。


关键引用


发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注