let和const以及var和let区别

1、相同点：

　只在声明所在的块级作用域内有效。

　不提升，同时存在暂时性死区，只能在声明的位置后面使用。

　不可重复声明。

2、不同点：关于基本类型组成的变量和常量

let声明的变量可以改变，值和类型都可以改变；const声明的常量不可以改变，这意味着，const一旦声明，就必须立即初始化，不能以后再赋值。

  
  

const i ; // 报错，一旦声明，就必须立即初始化
const j = 15;
j = 20; // 报错，常量不可以改变
  
  

数组和对象等复合类型的变量，变量名不指向数据，而是指向数据所在的引用地址。const只保证变量名指向的引用地址不变，但是并不保证该地址的源数据不变。所以引用类型的常量可以改变，切只能修改源数据。

  
  
const arr = [];
arr = [ 1, 2, 3];
// 报错，[1,2,3]与[]不是同一个地址 这就是为什么声明后要立即赋值，否则地址发生了变化

const arr = [];
arr[ 0] = 1;
arr[ 1] = 2;
arr[ 2] = 3;
// 不报错，变量名arr指向的地址不变，只是数据改变
console.log(arr.length); // 输出：3
  
  

若想让定义的对象或数组的数据也不能改变，可以使用object.freeze(arr)进行冻结。冻结指的是不能向这个对象或数组添加新的属性，不能修改已有属性的值，不能删除已有属性。

  
  
const arr = [];
Object.freeze(arr);
// 不报错，但数据改变无效
arr[ 0] = 1;
arr[ 1] = 2;
arr[ 2] = 3;
console.log(arr.length); // 输出：0
  
  

二 var和let 区别：

在es5中var定义的变量存在变量提升，es6中使用的let不存在变量提升：

  
  
1 console.log(i);
2 var i = 10; //10
3
4 console.log(s);
5 let s = 20; //ReferenceError: can't access lexical declaration `s' before initialization
  
  

es5中无论if语句是否执行，在if语句内的函数声明都会提升到当前的作用域的顶部而得到执行，es6支持块级作用域，无论是否进入if，内部的函数都不会影响到外部的函数

  
  
//es5环境
2 function f(){
3 console.log( 'outside');
4 }
5 if( true){ 提升到当前的作用域的顶部而得到执行
6 function f(){
7 console.log( 'inside');
8 }
9 }
10
11 f(); //inside
12
13
14 //es6环境
15 function d(){
16 console.log( 'outside');
17 }
18 if( true){
19 function d(){
20 console.log( 'inside');
21 }
22 }
23
24 d(); //outside
  
  

我们最常遇到的循环事件绑定i产生的闭包问题，是因为i绑定在全局，每次访问都会取到全局的i的值，所以访问哪个元素，得到的i都是循环体最后一轮的i。我们通常的解决办法是借助IIFE。在es6中let定义的i只在循环体内有效，所以每次循环i都是一个新的变量，于是会产生正常的输出：

  
  
1 //使用var
2 var arr1 = [];
3 for ( var i = 0; i < 10; i++) {
4 arr1[i] = function() {
5 console.log(i);
6 }

// (function(i){ //这里的i类似形参 可以使用IIFE来执行
// arr[i].onclick = function (){
// console.log(i);
// }
// })(i);
7 }
8
9 arr1[ 5](); //10
10 arr1[ 8](); //10
11
12 //使用let
13 var arr2 = [];
14 for ( let i = 0; i < 10; i++) {
15 arr2[i] = function() {
16 console.log(i);
17 }
18 }
19
20 arr2[ 5](); //5
21 arr2[ 8](); //8