var、let、const在使用中的区别

75 阅读 0 评论 50 点赞

我是靠谱客的博主无情电灯胆，最近开发中收集的这篇文章主要介绍var、let、const在使用中的区别，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

var、let、const在使用中的区别

此文章非原创文章，是借鉴文章，转载请注意！！！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//1.var 声明变量挂载在window上，let和const声明的变量不会
// var a = 10;
// console.log(a,window.a);//输出 10 10
// let a = 10;
// console.log(a,window.a);//10 undefined
// const a = 10;
// console.log(a,window.a);//10 undefined
//2.var声明变量时存在变量声明提升，所以在b赋值之前输出b，b的值是undefined
// console.log(b);
// var b = 20;
// console.log(b); //输出：undefined 20
// console.log(b);
// let b = 20;
// console.log(b); //控制台报错：Uncaught ReferenceError: Cannot access 'b' before initialization【未捕获的引用错误：无法在初始化之前访问“b”】
// console.log(b);
// const b = 20;
// console.log(b); //控制台报错：Uncaught ReferenceError: Cannot access 'b' before initialization【未捕获的引用错误：无法在初始化之前访问“b”】
//3.let和const声明形成作用域块
// if(1){
//
var a1 = 1000;
//
let b1 = 2000;
//
const c1 = 3000;
//
console.log(a1,b1,c1);//1000 2000 3000
// }
// console.log(a1);//1000
// // console.log(b1);//控制台报错：Uncaught ReferenceError: c1 is not defined【未定义】
// console.log(c1);//控制台报错：Uncaught ReferenceError: c1 is not defined【未定义】
//4.同一作用域下let和const不能声明同名变量，而var可以
// console.log(a);
// var a = 100;
// console.log(a);
// var a = 200;
// console.log(a);//输出 undefined 100 200
// let a = 100;
// console.log(a);
// let a = 200;
// console.log(a);//控制台报错：Uncaught SyntaxError: Identifier 'a' has already been declared【a已经被声明】
// const a = 100;
// console.log(a);
// const a = 200;
// console.log(a);控制台报错：Uncaught SyntaxError: Identifier 'a' has already been declared【a已经被声明】
//5.let同一作用域赋值可以修改，不同作用域可以多次声明并修改值
// let a = 30;
// console.log(a);
// a = 40;
// console.log(a);//输出：30 40
// let a =30;
// console.log(a);
// if(1){
//
//console.log(a);//控制台报错：2.html:75 Uncaught ReferenceError: Cannot access 'a' before initialization【无法在初始化之前访问a】
//
let a = 40;
//
console.log(a);//输出：40
// }
// let a ="";
// console.log(a);//输出：""
// let a = null;
// console.log(a);//输出：null
// let a = undefined;
// console.log(a);//输出：undefined
//6.const 同一作用域赋值以后不能更改值,不同作用域可以多次声明并修改值
// const b = null;
// console.log(a);//输出：null
// const b = ""
// console.log(b);//输出：""
// const b = undefined;
// console.log(b);//输出：undefined
// const b = "123";
// b = "234";
// console.log(b);//控制台报错：Assignment to constant variable.【对常量变量赋值。】
// const b = "123";
// if(1){
//
b = "234";
//
console.log(b);
// }
// console.log(b);//控制台报错：Assignment to constant variable.【对常量变量赋值。】
// const b = "123";
// if(1){
//
const b = "234";
//
console.log(b);
// }
// console.log(b);//输出：234 123
//7.let、var可以只声明不赋值，const不可以
// let b;
// console.log(b);//输出：undefined
// var b;
// console.log(b);//输出：undefined
// const b;
// console.log(b);//控制台报错：Uncaught SyntaxError: Missing initializer in const declaration【声明中缺少初始值设定项】
//8.暂存死区
// var a = 100;
// console.log(a);//输出：100
// if(1){
//
a = 200;
//
//在当前块作用域中存在a使用let/const声明的情况下，给a赋值10时，只会在当前作用域找变量a，也就是说只会找的a是const/let声明的a
//
console.log(a);//输出: Uncaught ReferenceError: Cannot access 'a' before initialization【无法在初始化之前访问a】
//
let a = 1000;
// }
var a = 100;
console.log(a);//输出：100
if(1){
let a = 1000;
console.log(a);//输出：1000
}
</script>
</body>
</html>

参考：
var与let、const的区别
[javascript] var let const声明变量的区别
理解es6中的暂时性死区
MDN-关于let介绍