JavaScript开发中变量、常量声明的规矩总结

本文以《JavaScript高级程序设计》第4版作为参考,整理使用JavaScript开发过程中,变量、声明的那些规则或者规矩。

JavaScript是一门用于和网页进行交互的脚本语言,包括以下三个组成部分:

  • ECMAScript:由ECMA-262定义并提供核心功能
  • 文档对象模型(DOM):提供与网页内容交互的方法和接口
  • 浏览器对象模型(BOM):提供与浏览器交互的方法和接口

首先标识符

标识符就是变量、函数、属性或函数参数的名称。标识符由一个或多个下列字符组成。

  • 第一个字符必须是字母、下划线(_)或者美元符号($)
  • 剩下的字符可以是字母、下划线、美元符号或数字
  • 标识符不可以有空格
  • 标识符不能是JavaScript的保留字或关键字,如ifforfunction
  • 标识符可以是任意长度,但最好保持简洁和有意义
  • 标识符是大小写敏感的,例如myVariable和myvariable是不同的标识符

标识符还可以用Unicode字母字符,比如"Ω",Unicode编码是U+03A9,但不推荐使用。可以说除了A-Z、a-z其他字母字符都不推荐使用。

按照惯例,标识符采用小驼峰法书写,即第一个单词字母小写,后面每个单词首字母大写

然后是变量

ECMAScript是弱类型语言,即变量可以保存任意数据类型。有三个声明变量的关键词:varletconst。其中var可以在任何ECMAScript版本中使用,而letconst只能在ECMAScript 6及以后的版本中使用。

实际得益于babel的存在,绝大多数项目都可以直接使用letconst声明变量。

var和let区别

作用域

var是函数作用域,let是块级作用域。函数作用域意味着变量在声明它们的函数内部可见,而块级作用域意味着变量在声明它们的块(如 {})内部可见

变量提升

使用var声明的变量会发生变量提升,即在其作用域内的任何位置都可以访问变量,即使在变量声明之前也可以,当然此时变量值为undefined。而使用let声明的变量不会发生变量提升,只有在变量声明之后才能访问变量。

js 复制代码
  function test1(){
      console.log(age) // undefined
      var age = '28'
  }
  test1()

  function test2(){
     console.log(age) // 报错
     let age = '28'
  }
  test2()

全局声明

在全局作用域中使用var声明的变量会成为window的属性,而使用let声明的不会。

js 复制代码
 var title1 = 'var'
 let title2 = 'let'
 console.log(window.title1)   // var
 console.log(window.title2)  // undefined

for循环中的声明

使用var声明变量参与循环,会导致变量溢出到循环体外。相反使用let则不会,因为其具备块级作用域。

js 复制代码
 for(var i=0;i<5;i++){
       // 循环逻辑
 }
 console.log(i) // 5

 for(let j=0;j<5;j++){
      // 循环逻辑
 }
 console.log(j) // j没有定义

关于这点最为经典的就是for循环里面有setTimeout参与,这个经常是面试被问到的问题,问为什么会如此?

js 复制代码
 for(var i=0;i<5;i++){
    setTimeout(()=>console.log(i))
 }
// 输出 5,5,5,5,5

for(let j=0;j<5;j++){
    setTimeout(()=>console.log(j))
}
// 输出 1,2,3,4,5

var声明之所以会这样是因为循环结束时,变量保存的是循环退出的值:5,没有生成新的迭代变量。相反let声明就会有新的迭代变量生成,所以输出不一样。

const声明

constlet声明的唯一区别是const声明变量时必须初始化,且修改const声明的变量会报错(对象除外)。

常量声明

常量是一种值在声明后不能被重新赋值的变量。综上,使用const关键字来声明常量。按照惯例常量名要全部大写。

最佳实践

私以为开发一定要要求确定性的。而为了保证这点要尽可能用确定性强的开发方式方法。

通过上面的对比可以看出var有很多不确定性,相反letconst有比较强的确定性,有更加明确的声明位置和作用域。所以推荐项目中使用letconst声明变量或常量,这也有助于提升代码质量。

总结一下:

  1. 标识符除了A-Z、a-z其他字母字符都不推荐使用
  2. 标识符采用小驼峰法书写,即第一个单词字母小写,后面每个单词首字母大写
  3. 绝大多数项目都可以直接使用letconst声明变量
  4. 使用const关键字来声明常量
  5. 按照惯例常量名要全部大写
  6. 项目中使用letconst声明变量或常量

本文完。

相关推荐
Kagol44 分钟前
TinyVue 支持 Skills 啦!现在你可以让 AI 使用 TinyVue 组件搭建项目
前端·agent·ai编程
柳杉1 小时前
从零打造 AI 全球趋势监测大屏
前端·javascript·aigc
simple_lau1 小时前
Cursor配置MasterGo MCP:一键读取设计稿生成高还原度前端代码
前端·javascript·vue.js
睡不着先生1 小时前
如何设计一个真正可扩展的表单生成器?
前端·javascript·vue.js
天蓝色的鱼鱼1 小时前
模块化与组件化:90%的前端开发者都没搞懂的本质区别
前端·架构·代码规范
明君879971 小时前
Flutter 如何给图片添加多行文字水印
前端·flutter
进击的尘埃1 小时前
AI 代码审查工具链搭建:用 AST 解析 + LLM 实现自动化 Code Review 的前端工程方案
javascript
juejin_cn1 小时前
[转][译] 从零开始构建 OpenClaw — 第五部分(对话压缩)
javascript
leolee182 小时前
Redux Toolkit 实战使用指南
前端·react.js·redux
bluceli2 小时前
React Hooks最佳实践:写出优雅高效的组件代码
前端·react.js