ES6--let和const使用

一、let命令

---

ES6新增了let命令，用于声明变量，其用法类似于var，但是所有用let声明的变量只在let命令所在的代码块内有效。

1. let基本用法

• 代码块中使用

{
  let a = 1;
  var b = 2;
}
console.log(a); // a is not indefined
console.log(b); // 2

let a = 1;
var b = 2;
console.log(a); // 1
console.log(b); // 2
复制代码

[总结：上面的代码块分别用var和let声明了两个变量，在代码块外分别使用这两个变量，var定义的变量则正确输出结果，而let定义的则报错，如果不限制代码块，则正常显示。所以，由此可看出let声明的变量，只有在其代码块内有效]

• for循环中使用

for (let i = 0;i < 10;i++) {
    // .....
}
console.log(i); //i is not undefined
// 以上代码的计数器i只在for循环体内有效，在循环体外访问就会报错
复制代码

2、不存在变量提升

var命令会出现变量提升的现象，那什么是变量提升呢？

• 变量可以在声明之前使用，值为undefined
• 函数及变量的声明都将被提升到函数的最顶部
• 变量可以在使用后声明，也就是变量可以先使用再声明

var a = 5;
function foo(){
  a =2;
  console.log(a);
  var a;
}
foo() // 2
// var a;语句并没有刷新a的值，因为，解析编译的时候，var a
// 被提前了.所以我们看的a是内部变量a而不是外面已赋值的5。

var a = 5;
function foo(){
  console.log(a);
  var a =0;
}
foo() // undefind
// 由于变量提升的原因a已经声明，所以没有输出我们再外部声明的5，
// 但是’a=0;’并没有被提前执行。所以变量提升这个概念，
//只适用于声明变量的语句，而变量赋值的语句并不能被提前
复制代码

按照一般的逻辑，变量应该先声明，后使用。为了纠正这个现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用否则会报错

console.log(a); // undefined
var a = 2;

// let 情况
console.log(b); // 报错
let b = 2;
复制代码

3、不允许重复声明

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

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

function () {
  let a = 1;
  var a = 2;
}
// 报错

// 不能在函数内部重新声明参数

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

function Test (a) {
  {
    let a = 1;
  }
}
// 不报错

复制代码

二、块级作用域

1、什么是块级作用域？

• JavaScript 语句通过代码块的形式进行组合。
• 块由左花括号开始，由右花括号结束。
• 块的作用是使语句序列一起执行。
• JavaScript 函数是将语句组合在块中的典型例子

ES6 在这个基础上引申出来一个叫做“块级作用域”的概念，即“ {} 中间的部分是一个块级作用域”。例如：for 循环、 if 逻辑判断、while 循环等语句后面的 {} 都是一个块级作用域。

2、为什么使用块级作用域？

ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。

• 内层变量可能会覆盖外层变量。

var a = 'hello'
function Test () {
  console.log(a); // undefined
  if (false) {
    var a = 'world'; // 如果没有这一行，if语句上面的a应该输出为hello
  }
} 
Test() // undefined
复制代码

• 用来计数的循环变量泄露为全局变量。

var a = 'hello'
for (var i = 0; i < a.length; i++) {
  console.log(a[i])
}
console.log(i); // 5
// i用来控制循环，但循环结束后，并没有消失，变成了全局变量
复制代码

3、ES6中的块级作用域

• ES6允许块级作用域任意嵌套
• 内层作用域可以定义外层作用域的同名变量

function Test () {
  let a = 1;
  if (true) {
    let a = 10;
  }
  console.log(a); // 1
}
// 该函数有两个代码块，都声明了变量a，结果输出5，
// 则结果表明外部的代码块不受内部代码块的影响。
复制代码

三、const命令

1、基本用法

• const是用来声明常量的，一旦声明了，则值就不能发生改变

const PI = 3.1415;
console.log(PI); // 3.1415

PI = 2;
// TypeError报错
复制代码

• 只声明不赋值会报错

const PI 
// SyntaxError 报错
复制代码

• const命令声明的常量不会提升，只能在声明后使用

if (true) {
  const a = 1;
}
consle.log(a); // 报错
复制代码

• const作用域与let相同，只在声明所在的代码块内有效

if (true) {
  console.log(a); //报错
  const a = 1;
}
复制代码

• 使用const与let一样不能重复声明

const a = '111';
const a = '222';
// 报错
复制代码