ES6-let const-CSDN博客

1.JS中的块级作用域

在ES6之前，JS是没有块级作用域这个概念的，只有全局作用域和函数内的局部作用域

我们都是知道在 ES6 以前，var 关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是变量提升例如:

        function fn() {
    		if(false) {
    			var aa = "hello"
    		}else {
    			console.log(aa)
    		}
    	}
    	fn()//undefined复制代码

以上的代码实际上是：

        function fn() {
    		var aa //变量提升
    		if(false) {
    			aa = "hello"
    		}else {
    			//此处访问aa的值为undefined
    			console.log(aa)
    		}
    	}
    	fn()//undefined

复制代码

所以无论如何 aa 都会被创建声明

2.let命令

与var命令的对比，以及let的一些特性：

1.let命令声明一个块级作用域内的变量语句或表达式，并可选地为其初始化一个值。

以下方式都是合法的：

let a
let b = 666
let c = 1, d = 'string', e = {}
let f = function () {}
let g = true ? 'true' : 'false'复制代码

2.let命令只在块级作用域有效，在代码块之外引用会报错，同时不能重复声明。

                {
		    let a = 1
		}
		console.log(a) // ReferenceError a is not defined复制代码

                function foo () {
    		    const a = 4
		    let a = 1
		}
		foo() //SyntaxError: Identifier 'a' has already been declared复制代码

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

        for(let i = 0; i < 5; i++){  
	}
	console.log(i) //ReferenceError: i is not defined
复制代码

3.let不存在变量提升

console.log(a)   // undefined
console.log(b)   // ReferenceError: b is not defined
var a = 1
let b = 1
复制代码

因为let不存在变量提升因此ES6中的let声明变量时，会在此区域内形成暂时性死区（暂时性死区就是在这个区块中的变量未声明之前，对该区块中的变量的一切调用都会报错），在该区域内不允许有任何形势声明出来的相同变量，所以，let声明的变量只能在该区域中只出现一次，不能有重复的

        a = 1
	let a = 2 
        //ReferenceError: a is not defined
复制代码

        a = 1
	{let a = 2}
	// 以上代码不会报错，因为声明变量的区块不一复制代码

let的使用实例

因为let命令的出现，所以JS有了块级作用域，原本因为作用域问题导致的闭包问题也可以使用let吗，清零进行解决，比如以下经典闭包代码会一次性输出5个5，但需求是输出01234

for(var i = 0; i < 5; i++){
  setTimeout(function(){
      console.log(i)
  }, 1000)
}
复制代码

1.ES6之前的解决办法，使用一个变量对 i 的值进行暂存

for(var i = 0; i < 5; i++){
  (function(e){
      setTimeout(function(){
          console.log(e)
      }, 1000)        
  })(i)
}
复制代码

2.出现let后的解决办法

for(let i = 0; i < 5; i++){
  setTimeout(function(){
      console.log(i)
  }, 1000)
}复制代码

关于for循环作用域的问题
在for循环中实际上是有两个作用域的，条件设置的圆括号()内是一个父作用域，而代码块大括号{}中是一个子作用域，比如下面代码可以进行区分

for(let i = 0; i < 5; i++){
  let i = 8
  console.log(i)
}
// 输出结果是5个8复制代码

3.const命令

与let命令的用法类似，const命令也是用来声明一个变量，同时也只能在声明的块级作用域中进行使用，它与C#中的const作用相同，只能赋一次值，不可以修改, 初始化时必须赋值

const命令的特性
1.声明的时候就必须马上初始化，否则报错
如下代码：

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

复制代码

2.声明的值不能改变，不能重新进行赋值

const a = 10;
const a = 12 //SyntaxError: Identifier 'a' has already been declared
复制代码

3.与let一样不存在变量提升

console.log(a) //ReferenceError: a is not defined
const a = 12
复制代码

4.与let一样不可重复进行声明

const a = 1
var a = 1  // SyntaxError: Identifier 'a' has already been declared复制代码

注意点
1.const声明的变量的值不能改变实质上是变量指向的内存地址不能改变，因此会有以下两种情况

值为简单类型：

值保存在变量指向的内存地址上。

值为复杂类型：
例如对象：值也保存在变量指向的内存地址上，但是不同的是，这个内存地址实际上是一个指针，指向这个对象，那么在实际上是可以对这个对象内的属性进行赋值的，如下代码：

const a = {b:1}
console.log(a.b)  // 1
a.b = 2
console.log(a.b)  // 2
复制代码

2.针对上面的问题，如果想让对象的属性和值绝对不变，可以使用Object.freeze方法

const a = Object.freeze({b:1})
console.log(a.b)  // 1
a.b = 2
console.log(a.b)  // 1复制代码