ES6新特性之let、const、var的区别

ES6新特性之let、const、var的区别

特此说明: 借鉴阮一峰老师的ECMAScript 6 入门;传送门,MDN文档;传送门

let const var关键字

三个关键字的区别:

let const var
变量提升 × ×
全局变量 × ×
重复声明 × ×
重新赋值 ×
只声明不初始化 ×
暂时死区 ×
块作用域 ×
  1. 什么是变量提升
  • var关键字声明的变量,无论实际声明的位置在何处,都会被视为声明在函数的顶部(如果声明不在任意函数内,则视为在全局作用域的顶部)
  • JavaScript引擎的工作方式是,先预解析代码, 获取所有被声明的变量和函数声明,然后再一行一行地运行,这就使所有变量声明的语句,都会被提升到代码的头部,这就是变量提升
js 复制代码
//var关键字声明时
console.log(b) //undefined 
var b = 3; 
console.log(b); // 3

上面代码首先在控制台显示未声明的变量,本来是错误的做法但是没有报错.因为JS的变量提升.真正运行的是以下代码

js 复制代码
var b ; 
console.log(b);
b = 1; 
console.log(b);
  • let声明的变量不会在作用域中被提升;在let声明之前的执行瞬间被称为"暂时性死区",在此阶段引用任何后面才声明的变量都会抛出。
js 复制代码
let a = 1; 
console.log(a);//1 
console.log(b);//Uncaught ReferenceError: b is not defined 
let b = 2;
  1. 全局变量
  • 使用let和const在全局作用域中声明的变量不会成为window对象的属性,var声明的变量则会。
js 复制代码
//var关键字
var name = 'Yu'; 
console.log(window.name);//'Yu'

//let关键字
let age = 'Yu'; 
console.log(window.name);//undefined
  1. 重复声明
  • var允许重复声明变量
  • letconst在同一作用域不允许重复声明变量
js 复制代码
// var关键字
var a = 10
var a = 20 // 20

// let关键字
let b = 10
let b = 20 // Identifier 'b' has already been declared
// const关键字
const c = 10
const c = 20 // Identifier 'c' has already been declared
  1. 重新赋值
  • varlet可以重新赋值
  • const声明一个只读的常量。一旦声明,常量的值就不能改变
js 复制代码
// var关键字
var a = 10
a = 20
console.log(a)  // 20

//let关键字
let b = 10
b = 20
console.log(b)  // 20

// const关键字
const c = 10
c = 20
console.log(c) // Uncaught TypeError: Assignment to constant variable
  1. 只声明不初始化
  • 在首次声明时let var可以不赋值
  • const声明必须赋值
  1. 暂时死区
  • 什么是暂时性死区:letconst关键字声明的变量会产生块级作用域,如果变量在当前作用域中被创建之前被创建出来,由于此时还未完成语法绑定,如果我们访问或使用该变量,就会产生暂时性死区的问题,由此我们可以得知,从变量的创建到语法绑定之间这一段空间,我们就可以理解为'暂时性死区'
  • var不存在暂时性死区
  • letconst存在暂时性死区,只有等到声明变量的那一行代码出现,才可以获取和使用该变量
js 复制代码
// var关键字
console.log(a)  // undefined
var a = 10

// let关键字
console.log(b)  // Cannot access 'b' before initialization
let b = 10

// const关键字
console.log(c)  // Cannot access 'c' before initialization
const c = 10
  1. 块作用域
  • var不存在块级作用域
  • letconst存在块级作用域
js 复制代码
// var关键字
{
    var a = 20
}
console.log(a)  // 20

// let关键字
{
    let b = 20
}
console.log(b)  // Uncaught ReferenceError: b is not defined

// const关键字
{
    const c = 20
}
console.log(c)  // Uncaught ReferenceError: c is not defined
相关推荐
耶啵奶膘1 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^3 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic4 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具5 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test6 小时前
js下载excel示例demo
前端·javascript·excel
Yaml46 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事6 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro