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

本文完。

相关推荐
前端世界6 小时前
从零搭建 ASP.NET 单文件 Web 项目:一个能真用的 BookShop 管理页实战
服务器·前端·asp.net
码上成长6 小时前
Vue Router 3 升级 4:写法、坑点、兼容一次讲透
前端·javascript·vue.js
BBB努力学习程序设计6 小时前
响应式页面设计与实现:让网站适配所有设备的艺术
前端·html
IT从业者张某某7 小时前
less 工具 OpenHarmony PC适配实践
前端·microsoft·less
zhousenshan7 小时前
node语法特性详解
node.js
是Yu欸7 小时前
仓颉迁移实战:将 Node.js 微服务移植到 Cangjie 的工程化评测
微服务·云原生·开源·node.js·vim·gitcode·cangjie
行走的陀螺仪7 小时前
vue3-封装权限按钮组件和自定义指令
前端·vue3·js·自定义指令·权限按钮
isyuah7 小时前
vite-plugin-openapi-ts CLI 使用指南
前端·vite
qq_398586548 小时前
浏览器中内嵌一个浏览器
前端·javascript·css·css3
Mapmost8 小时前
地图引擎性能优化:解决3DTiles加载痛点的六大核心策略
前端