JavaScript中var let 和 const的区别 ( ES6版本 )

JavaScript中 var let 和 const的区别 ( ES6版本 )

在ES6之前 var是我们声明变量的方式 es6的到来对声明变量的方法进行了提升 新增了let 和 const 我们来看看这三者之间的区别吧 这篇文档不仅对es6有用 同样对typescript同样也适用

1. 变量声明

常见的变量声明有 var 和let 及 const 在es6之前 我们使用var来声明变量 es6中 let 和 const 是JavaScript里相对较新的变量声明方式 let在很多方便和var是相似的 可以帮助大家避免一些常见的的问题 而const是对let的一个增强 具体接着往下看

2. var 声明

es6之前我们一直以来都是通过 var 关键字来定义 JavaScript 的变量

	var a = 10

这里大家都能理解 我们定义了一个名为a值为10的变量 同样我们也能在函数中声明

function test () {
	var a = ' hello word';
	return a
}

并且我们也可以在其他函数内部范围相同的变量

function f1 () {
	var a = 10 ;
	return function g2() {
		var b = a + 1;
		return b;
	}
}
var g2 = f1() ;
g2();  // 打印出来g = 11

作用域规则

看完上面的例子 大家可以发现 var 的作用域有些奇怪 它明显对声明的变量具有提升的作用 可以是局部变量也可以是全局变量

变量提升

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

看到上面的代码 可以看见我们先使用了变量 这时候会输出undefined 我们再声明了变量 这种现象多多少少是有些奇怪的

3. let 声明

现在大家可以明显的发现 var 的存在的一些问题 这刚好说明了 let 的出现 是为了解决这些问题的 除了名字不同 写法基本一致

let name = ' 张三 '

主要的区别不在语法上 而是语义上

作用域规则

当使用 let 声明一个变量 他的作用域值局限于当前包含的函数内 离开了函数外就无法使用 常见的案例我们开一个for循环打印吧

	for (let i = 0; i < 10 ; i++) {
	    setTimeout(function() {console.log(i); }, 100 * i);
	}

结果 :

0
1
2
3
4
5
6
7
8
9

如果是使用 var 声明 会看到明显的不同

	for (var i = 0; i < 10 ; i++) {
	    setTimeout(function() {console.log(i); }, 100 * i);
	}

结果 :

	10

两段不同声明方式的代码可以看出 作用域不同 变量的声明出现在循环体里时会拥有完全不同的行为 不仅是在循环里引入新的变量环境而是针对每次迭代都会创建新的作用域

不存在变量提升

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

上面的列子我们看出 var 对于先使用再声明是可以接受的 为了纠正这种现象 let 命令改变了语法行为它要求所声明的变量一定要在声明后才可以使用 否则报错

暂时性死区

只要块级作用域存在 let 命令 它所声明的变量就绑定了这个区域 不再受外部影响

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

看上面的代码 存在一个全局变量 tmp 并对他赋值了 但是在块级作用域内又声明了一个局部变量 tmp 导致后者绑定了这个块级作用域 所以发生了报错 所以在let声明变量前 对 tmp 赋值就会发生报错

es6明确规定 如果区块内存在 let 和 const 命令 他就有一个暂时性锁死区 从一开始就对它们形成了封闭的作用域 但凡在声明前使用就会报错

let 不允许重复声明

let 不允许在相同的作用域内 声明重复的同一个变量

// 报错
function func() {
  let a = 10;
  let a = 1;
}

4.const 声明

基本用法

const 声明一个只读的常量 一旦声明 常量的值不能改变

const a = 1 ;
a = 3; // // TypeError: Assignment to constant variable.

const 声明的变量不得改变值 这意味着一旦声明就必须赋值 不然就会报错

const foo;
// SyntaxError: Missing initializer in const declaration

命名规范

在C ++ 和 Java，这是一个公认的命名约定，常量应该全部大写，并用下划线分隔单词 当然我们前端也是这么做的

const APP_TAG = "INSURANCE_APP";

以上就是 var let 和 const 的区别了 很多理解只有在日常开发中才能体会到 加油吧