IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> var、let、const之间的区别 -> 正文阅读

[JavaScript知识库]var、let、const之间的区别

变量

ECMAScript变量是松散类型的,也就是说变量可以用于保存任何类型的数据,每个变量只不过是一个用于保存任意值的命名占位符。
有三个关键字可以声明变量:var let const,var在ECMAScript的所有版本中都可以使用,let和const只能在ECMAScript6及更晚的版本中使用。

var

var message;

这段代码声明了一个名为message的变量,可以用来保存任何类型的值。不初始化的情况下,会保存一个特殊值undefined

var message = '遥岑'
message = 10 //合法 但不建议

message只是被定义为一个保存了字符串值的变量,初始化变量不会将它标记为字符串类型,只是一个简单的赋值而已。后面可以改变保存的值,也可以改变值的类型,但不推荐这么做。

var message = 10
message = 20
message = 73
console.log(message) //73

反复多次使用var声明同一个变量也是可以的。

var message = '遥岑',
    num = 5,
    text = false;

因为ECMAScript是松散类型的,所以使用不同数据类型初始化变量可以用一条语句声明,换行和缩进不是必须的,但这样有利于理解。
在严格模式下,不能定义名为eval和arguments的变量,否则会导致语法错误。

var声明作用域

ES6之前只有全局作用域和函数作用域,var既可以作为全局作用域,也可以作为函数作用域

//全局作用域
var message = '遥岑'
function test() {
    //函数作用域
    var message = '阿翡'
    console.log(message) //阿翡
}
test()
console.log(message) //遥岑

使用var在函数内部定义一个变量,就意味着该变量将在函数退出时被销毁。
如果在函数内定义变量忽略var,可以创建一个全局变量;但不推荐这么做,在局部作用域内定义的全局变量很难维护,也会造成困扰,并不能直接断定var是不是有意为之。在严格模式下,如果这样给未声明的变量赋值,会抛出错误。

变量提升

console.log(message) //undefined
var message = '遥岑'

//相当于
var message
console.log(message)
message = '遥岑

使用这个关键字声明的变量会自动提升到顶部。

let

let和var的作用差不多,但有着很重要的区别,let声明的范围是块作用域

if(true) {
    var message = '遥岑'
    console.log(message) //遥岑
}
console.log(message) //遥岑


if(true) {
    let name = 'yc'
    console.log(name) //yc
}
console.log(name) //报错

name变量的作用域仅限于块内,所以在外部无法引用。

let name
let name //报错

let不允许在同一个块作用域中出现冗余声明
js引擎会记录用于变量声明的标识符及其所在的块作用域,因此嵌套相同的标识符不会报错,这是因为在同一块中没有重复声明。

var name
let name //报错

这两个关键字声明的不是不同类型的变量,它们只是指出变量在相关作用域内如何存在

暂时性死区

let声明不会在作用域中被提升

console.log(name) //报错
let name = 'yc'

在let声明之前不能以任何方式来引用未声明的变量。在let声明之前的执行瞬间被称为暂时性死区,在此阶段引用任何后面才声明的变量都会抛出错误。

块级作用域

let name = 'yc'
console.log(window.name) //undefined

let即使在全局作用域中声明也不会挂载在window对象下,不过let声明仍然是在全局作用域中发生的,相应变量会在页面的生命周期内存续。

for循环中的let声明

在let出现之前,for循环定义的迭代变量会渗透到循环体外部

for(var i=0;i<5;i++) {
    setTimeout(()=>console.log(i),0)
}
//5 5 5 5 5

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

在退出循环时,迭代变量保存的是导致循环退出的值5,在之后执行超时逻辑时,所有的i都是同一个变量,输出的都是同一个最终值。
而使用let声明迭代变量时,js引擎会在后台为每个迭代循环声明一个新的迭代变量,每个setTimeout引用的都是不同的变量实例。这种每次迭代声明一个独立变量实例的行为适用于所有风格的for循环,包括for in和for of。

const

const的行为和let基本一致,区别在于它声明变量时必须同时初始化变量,修改声明的变量会报错。

const num = 7
num = 8 //报错

const num = 7
const num = 9 //不能重复声明

const也属于块级作用域不能重复声明赋值,存在暂时性死区

const num = {
    name:'yc',
    age:24
}
num.age = 18
console.log(num)

const声明限制只适用于它指向的变量的引用,如果引用的是一个对象,那么修改这个对象的属性是可以的。

for(const i=0;i<5;i++){} //报错

for(const key in {a:1,n:9}) {
   console.log(key) //a n
}

const不能用来声明迭代变量,但是可以声明不会被修改的for循环变量,也就是每次迭代只是创建一个新变量。

区别

  • var:全局作用域下挂载在顶层对象window下;未声明变量会被隐式创建为全局变量;可以多次声明赋值;变量提升
  • let:块级作用域,即使在全局下也在块级作用域中;同一块中不能重复声明,可以重复赋值;变量在被声明前不能被访问,存在暂时性死区
  • const:块级作用域;不能重复声明和赋值;存在暂时性死区;只读常量,必须初始化,变量指向内存地址不变

总结

var未声明直接赋值的变量都会自动挂在顶层对象下,会造成全局环境变量混乱。var可以多次声明同一个变量不会报错,也会造成代码不容易维护。而ES6新增的let和const客观上为这门语言更精确的声明作用域和语义提供了更好的支持,使用let和const有助于提升代码质量。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-04-23 10:46:47  更:2022-04-23 10:48:11 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 1:29:55-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码