【ES6】让你彻底搞懂const ,let和var的区别

前言

想必许多学习JS的同学都被const、let和var搞得晕头转向,一直傻傻分不清这三者的区别,本文将全面阐述清这三者的前世今生。

首先,说到JS就不得不提到他的好兄弟ECMAScript,ECMAScript是一个国际通过的标准化脚本语言。JavaScript由ECMAScript和DOM、BOM三者组成。可以简单理解为:ECMAScript是JavaScript的语言规范,JavaScript是ECMAScript的实现和扩展。

2011年,ECMAScript 5.1版发布,之前大部分人用的也就是ES5。

2015年6月,ECMAScript 6 正式通过,成为国际标准,而let和const也就是这个时候出现在大众视野。

var

  • var是在ES5中引入的变量关键字
  • 函数作用域:在函数内部声明的变量只在该函数内可见
js 复制代码
function test() {
  var num = 10;
  console.log(num);
}
test(); // 打印结果为num = 10

console.log(num); // 报错:num is not defined
  • 如果在同一个作用域内使用var多次声明同名变量,后面的变量会覆盖前面的
js 复制代码
var age = 10;
var age = 20;
console.log(age);//age = 20
  • var声明的变量可以在声明之前被访问(变量提升),但是在变量声明之前使用它,其值会是 undefined
js 复制代码
console.log(num);
var num = 10;// undefined

let

  • 块作用域:在{}块内声明的变量只在该块内可见
js 复制代码
let num = 10;
if (true) {
  let num = 20;
  console.log(num);// 打印结果为num = 20
}
console.log(num);// 打印结果为num = 10
  • 不允许重复声明,在同一作用域内不能重复声明同一个变量,否则会报错
js 复制代码
if (true) {
  let num = 20; 
  let num = 30; // SyntaxError: Identifier 'num' has already been declared
  console.log(num);
}
  • 暂时性死区:在块作用域里,变量在声明前是不可访问的
js 复制代码
if (true) {
  console.log(num); // ReferenceError: Cannot access 'num' before initialization
  let num = 10;
}

const

  • 块作用域:和let差不多
js 复制代码
const num = 10;
if (true) {
  const num = 20;
  console.log(num); // 20
}
console.log(num); // 10
  • 不允许重复声明,必须初始化,定义变量时赋值,一旦赋值后就不能重新赋值
js 复制代码
const num = 10
const num = 20 // SyntaxError: Identifier 'num' has already been declared
  • 对于基本数据类型,一旦赋值不能更改,对于复合数据类型(对象,数组),不能改变其内存地址,但是能改变这个对象或数组的内容
js 复制代码
const obj = { a: 1 }
obj.a = 2 // 合法,因为修改的是对象的内容
console.log(obj); // 输出 {a: 2}

const arr = [1, 2, 3]
arr.push(4) // 合法,因为修改的是数组的内容
console.log(arr); // 输出 [1,2,3,4]

const num = 10
num = 20 // 抛出 TypeError: Assignment to constant variable.

小结

constletvar都是声明变量的关键字,他们有以下几个方面的区别:

1.重复声明:var可以在同一作用域内重复声明变量,constlet不行。

2.作用域:constlet都是块级作用域,var是函数作用域

3.变量提升:var具有变量提升的特点,constlet不具有该特点 ,在使用var关键字声明变量时,变量声明会被提升到作用域顶部,因此可以在变量声明之前访问变量;而在使用constlet关键字声明变量时,访问未声明和未初始化的变量会抛出ReferenceError异常。

4.赋值:使用const关键字声明的变量必须在声明时进行初始化,并且初始化后不能再修改变量的值(复合数据类型的值可以发生改变,但不可以改变类型);而使用let关键字声明的变量可以在声明后重新赋值。

相关推荐
呼叫694539 分钟前
为什么说vue是双向数据流
前端·javascript·vue.js
我命由我123451 小时前
CesiumJS 案例 P20:监听鼠标滚轮、监听鼠标左键按下与松开、监听鼠标右键按下与松开、监听鼠标左击落点
开发语言·前端·javascript·前端框架·html·css3·html5
顾辰呀1 小时前
css 文字一行没有放满不进行换行
前端·javascript·css·vue.js·css3
q567315231 小时前
Python 中的字符串匹配算法
android·java·javascript·python·算法
nixiaoge2 小时前
Web前端第二次作业
前端·javascript·css3
安冬的码畜日常2 小时前
【玩转 Postman 接口测试与开发2_005】第六章:Postman 测试脚本的创建(上)
javascript·测试工具·单元测试·postman·bdd·chai
Gavin_9152 小时前
【JavaScript】数组-集合-Map-对象-Class用法一览
开发语言·前端·javascript
琴~~3 小时前
前端根据后端返回的文本流逐个展示文本内容
前端·javascript·vue
zhaocarbon3 小时前
el-scrollbar 动态更新内容 鼠标滚轮无效
前端·javascript·vue.js
一纸忘忧4 小时前
Nuxt 3.14 发布!全新功能与性能提升
前端·javascript·vue.js