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声明变量或常量

本文完。

相关推荐
小二·4 分钟前
Python Web 开发进阶实战:量子机器学习实验平台 —— 在 Flask + Vue 中集成 Qiskit 构建混合量子-经典 AI 应用
前端·人工智能·python
TTGGGFF9 分钟前
控制系统建模仿真(十):实战篇——从工具掌握到工程化落地
前端·javascript·ajax
郝学胜-神的一滴31 分钟前
深入解析C/S架构与B/S架构:技术选型与应用实践
c语言·开发语言·前端·javascript·程序人生·架构
s19134838482d1 小时前
javascript练习题
开发语言·javascript·ecmascript
这是个栗子1 小时前
前端开发中的常用工具函数(二)(持续更新中...)
开发语言·前端·javascript
苦藤新鸡1 小时前
38.交换二叉树中所有的左右节点
开发语言·前端·javascript
2501_944521592 小时前
Flutter for OpenHarmony 微动漫App实战:主题配置实现
android·开发语言·前端·javascript·flutter·ecmascript
2501_944521592 小时前
Flutter for OpenHarmony 微动漫App实战:动漫卡片组件实现
android·开发语言·javascript·flutter·ecmascript
lina_mua2 小时前
Cursor模型选择完全指南:为前端开发找到最佳AI助手
java·前端·人工智能·编辑器·visual studio
董世昌412 小时前
null和undefined的区别是什么?
java·前端·javascript