let

let命令

基本用法

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

{
    let aLet = 1;
    var bVar = 2;
}
console.log(aLet);  // Uncaught ReferenceError: aLet is not defined(…)
console.log(bVar);  // 2

• for循环计数器很适合let命令

for (let i = 0; i < 3; i++) {}
console.log(i);  // Uncaught ReferenceError: i is not defined(…)

• 考考你?

// 使用var变量
var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6]();    // ?结果

// 使用let变量
var a = [];
for (let ii = 0; ii < 10; ii++) {
  a[ii] = function () {
    console.log(ii);
  };
}
a[6]();    // ?结果 

不存在变量提升

• 变量提升:javascript是解释型语言，执行基本分为两个阶段，编译期(预编译)与运行期。在预编译阶段，它是用函数来划分作用域，然后逐层为其以var声明的变量(var变量)与函数定义开辟内存空间，再然后对var变量进行特殊处理，统统赋初始值为undefined。

(function(){
  var str1 = "1";
  var fun1 = function(){};
  var str2 = "2";
  var str3 = "3";
})();
// 同上代码
(function(){
  var str1,fun1,str2,str3;
  str1 = "1";
  fun1 = function(){};
  str2 = "2";
  str3 = "3";
})();

• let不会发生'变量提升'，因此，变量一定要在声明后使用，否则报错。

console.log(foo); // undefined
console.log(bar); // Uncaught ReferenceError: bar is not defined(…)
var foo = 2;
let bar = 2;

暂时性死区

• 考考你?

// 使用var
var tmp = 123;
if (true) {
  console.log(tmp);
  var tmp;
}
// 使用let,运行结果
var tmp = 123;
if (true) {
  console.log(tmp);
  let tmp;
}

• 在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”(temporal dead zone，简称TDZ).
• ES6明确规定，区块中使用let和const声明变量，则会形成封闭作用域，在声明之前使用变量会报错。
• 考考你?

// 未使用let语句
typeof myData;  
    
// 使用let语句
{
    typeof myData;
    let myData = 'myData';
}

不允许重复声明

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

// Uncaught SyntaxError: Unexpected token
function fun1() {
    let num1 = 10;
    var num1 = 1;
}
// Uncaught SyntaxError: Unexpected token
function fun2() {
    let num2 = 10;
    let num2 = 1;
}

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

function func(arg) {
  let arg; // 报错
}
function func(arg) {
  {
    let arg; // 不报错
  }
}

块级作用域

ES5全局作用域和函数作用域

• 考考你?

// 场景一
var date = new Date();
function fun() {
  console.log(date);
  if (false) {
    var date = "hello world";
  }
}
fun();
    
// 场景二
var str = 'hello';
for (var j = 0; j < str.length; j++) {
  console.log(str[j]);
}
console.log(j);

• 问题总结:ES5只有全局作用域和函数作用域，没有块级作用域
  • 内层变量可能会覆盖外层变量
  • 用来计数的循环变量泄露为全局变量

ES6块级作用域

• let实际上为JavaScript新增了块级作用域.
• ES6允许块级作用域的任意嵌套,外层作用域无法读取内层作用域的变量

{{{{
  {let insane = 'Hello World'}
  console.log(insane); // Uncaught ReferenceError: insane is not defined
}}}};

• 内层作用域可以定义外层作用域的同名变量

{{{{
  let insane = 'Hello World';
  {let insane = 'Hello World'}
}}}};

• 块级作用域的出现，使得获得立即执行匿名函数（IIFE）不再必要.

// IIFE写法
(function () {
  var tmp = ...;
  ...
}());
    
// 块级作用域写法
{
  let tmp = ...;
  ...
}

块级作用域与函数声明

• ES5规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明
  • 浏览器支持在块级作用域中声明函数,因此上面代码可以正常运行,但是在‘严格模式’下会报错

// 情况一
if (true) {
  function fun() {}
}
    
// 情况二
try {
  function fun() {}
} catch(e) {
}

• ES6引入了块级作用域，明确允许在块级作用域之中声明函数,并且函数声明语句的行为类似于let，在块级作用域之外不可引用。

// ES6严格模式
'use strict';
if (true) {
  function f() {}
}

Const

• 定义: 声明一个只读常量，一旦声明，常量的值就不可能改变.

• 注意点

  • const一旦声明变量，就必须立即初始化，不能留到以后赋值；

  const COLOR; //Uncaught SyntaxError: Missing initializer in const declaration

  • const与let相同特性

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

    if (true) {
        const MAX = 5;
    }
    console.log(MAX);  // Uncaught ReferenceError: MAX is not defined

    • 变量不提升
    • 存在暂时性死区，只能在声明的位置后面使用
    • 不能重复声明

  • 复合类型(Object，Array等)的变量，可对其值进行修改，即const的定义保证了变量名指向地址不变。

    // Array
    const foo = {};
    foo.prop = 123;
    console.log(foo);
    foo = {}; //Uncaught TypeError: Assignment to constant variable.
    
    // Object
    const arr = [];
    arr.push('Hello'); 
    arr.length = 0;    
    arr = ['World'];  // Uncaught TypeError: Assignment to constant variable  

  • 使用const定义复合型变量达到真正的对象不可变，可以使用Object.freeze()方法冻结对象。

    // 冻结对象和属性
    var constantize = (obj) => {
      Object.freeze(obj);
      Object.keys(obj).forEach( (key, value) => {
        if ( typeof obj[key] === 'object' ) {
          constantize( obj[key] );
        }
      });
    };
    
    const person = {name: 'penglu', age: 27};
    constantize(person);
    person.name = 'lee'; //无法修改，但是不会报错
    const arr = ['one', 'two'];
    constantize(arr);
    arr.push('three');  // Uncaught TypeError: Can't add property three, object is not extensible

  • let命令、const命令、class命令声明的全局变量，不属于全局对象的属性

    • ES5之中，全局对象的属性与全局变量是等价的。

• 实例

  const PI = 3.1415926;
  PI = 123;  // Uncaught TypeError: Assignment to constant variable

参考文章

1. 变量作用域
2. ES6入门