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

本文完。

相关推荐
A XMan.2 小时前
JSON结构快捷转XML结构API集成指南
xml·java·前端·json·php
小林爱2 小时前
【Compose multiplatform教程06】用IDEA编译Compose Multiplatform常见问题
android·java·前端·kotlin·intellij-idea·compose·多平台
蜗牛快跑2135 小时前
前端正在被“锈”化
前端·代码规范
Jet_closer_burning7 小时前
微信小程序中遇到过的问题
前端·微信小程序·小程序
掘金酱8 小时前
稀土掘金社区2024年度影响力榜单正式公布
android·前端·后端
Keven__Java8 小时前
Java开发-后端请求成功,前端显示失败
java·开发语言·前端
轻口味8 小时前
【每日学点鸿蒙知识】渐变效果、Web组件注册对象报错、深拷贝list、loadContent数据共享、半屏弹窗
前端·list·harmonyos
老K(郭云开)8 小时前
最新版Chrome浏览器加载ActiveX控件技术——alWebPlugin中间件V2.0.28-迎春版发布
前端·chrome·中间件
轻口味8 小时前
【每日学点鸿蒙知识】子窗口方向、RichEdit不居中、本地资源缓存给web、Json转对象丢失方法、监听状态变量数组中内容改变
前端·缓存·harmonyos
我是苏苏9 小时前
Web开发:ORM框架之使用Freesql的分表分页写法
前端·数据库·sql