ES6中let和var和const的区别

• 通过var定义的变量，作用域是整个封闭函数，是全域的 。通过let定义的变量，作用域是在块级或是子块中。

for (let i = 0; i < 10; i++) {
  // ...
}

console.log(i);
// ReferenceError: i is not defined
//计数器i只在for循环体内有效，在循环体外引用就会报错。
  
  
1
2
3
4
5
6
7

• 变量提升现象：浏览器在运行代码之前会进行预解析，首先解析函数声明，定义变量，解析完之后再对函数、变量进行运行、赋值等。
  -不论var声明的变量处于当前作用域的第几行，都会提升到作用域的头部。
  -var 声明的变量会被提升到作用域的顶部并初始化为undefined，而let声明的变量在作用域的顶部未被初始化

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;
//相当于
var foo;  //声明且初始化为undefined
console.log(foo);
foo=2;

  
  
1
2
3
4
5
6
7
8

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;
//相当于在第一行先声明bar但没有初始化，直到赋值时才初始化

  
  
1
2
3
4
5
6

但是直接用let声明变量不赋值是会打印undefined，还是初始化了，只是let声明放在赋值之后，let声明会提前但不会初始化。

let a;
alert(a);//值为undefined

alert b;//会报错
let b;
  
  
1
2
3
4
5

• 只要块级作用域内存在let命令，它所声明的变量就“绑定”这个区域，不再受外部的影响。总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的，尽管代码块外也存在相同全局变量。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}
alert(tmp);  //输出值为123，全局tmp与局部tmp不影响
  
  
1
2
3
4
5
6
7

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

// 报错
function () {
  let a = 10;
  var a = 1;
}
// 报错
function () {
  let a = 10;
  let a = 1;
}
  
  
1
2
3
4
5
6
7
8
9
10

• -

在JavaScript中有三种声明变量的方式：var、let、const。下文给大家介绍js中三种定义变量的方式const， var， let的区别。

1.const定义的变量不可以修改，而且必须初始化。

?

1 2 3 4 5

const b = 2; //正确 // const b;//错误，必须初始化 console.log( '函数外const定义b：' + b); //有输出值 // b = 5; // console.log('函数外修改const定义b：' + b);//无法输出

2.var定义的变量可以修改，如果不初始化会输出undefined，不会报错。

?

1 2 3 4 5 6 7 8 9

var a = 1; // var a;//不会报错 console.log( '函数外var定义a：' + a); //可以输出a=1 function change(){ a = 4; console.log( '函数内var定义a：' + a); //可以输出a=4 } change(); console.log( '函数调用后var定义a为函数内部修改值：' + a); //可以输出a=4

3.let是块级作用域，函数内部使用let定义后，对函数外部无影响。

?

1 2 3 4 5 6 7 8

let c = 3; console.log( '函数外let定义c：' + c); //输出c=3 function change(){ let c = 6; console.log( '函数内let定义c：' + c); //输出c=6 } change(); console.log( '函数调用后let定义c不受函数内部定义影响：' + c); //输出c=3