ES6 课程一 let,const,模板字符串,作用域

本课程参照 Understanding ECMAScript 6：

ES6 课程一 let,const,模板字符串,作用域

var 声明与变量提升

function getValue(condition) {

    if (condition) {
        var value = "blue";

        // 其他代码

        return value;
    } else {

        // value 在此处可访问，值为 undefined

        return null;
    }

    // value 在此处可访问，值为 undefined
}

function getValue(condition) {

    var value;

    if (condition) {
        value = "blue";

        // 其他代码

        return value;
    } else {

        return null;
    }
}

value 变量的声明被提升到了顶部，而初始化工作则保留在原处。这意味着在 else 分支内 value 变量也是可访问的，此处它的值会是 undefined ，因为它并没有被初始化。

块级声明

块级声明也就是让声明的变量在指定块的作用域外无法被访问。块级作用域（又被称为词法作用域）在如下情况被创建：
1.在一个函数内部
2.在一个代码块（由一对花括号包裹）内部

let 声明

let 声明的语法与 var 的语法一致。你基本上可以用 let 来代替 var 进行变量声明，但会将变量的作用域限制在当前代码块中（其他细微差别会在稍后讨论）。由于 let 声明并不会被提升到当前代码块的顶部，因此你需要手动将 let 声明放置到顶部，以便让变量在整个代码块内部可用。这里有个范例：

  function getValue(condition) {

    if (condition) {
        let value = "blue";

        // 其他代码

        return value;
    } else {

        // value 在此处不可用

        return null;
    }

    // value 在此处不可用
}

由于变量 value 声明使用的是 let 而非 var ，该声明就没有被提升到函数定义的顶部，因此变量 value 在 if 代码块外部是无法访问的；并且在 condition 的值为 false 时，该变量是永远不会被声明并初始化的。

禁止重复声明

如果一个标识符已经在代码块内部被定义，那么在此代码块内使用同一个标识符进行 let 声明就会导致抛出错误。例如：

var count = 30;

// 语法错误
let count = 40;

在本例中，count 变量被声明了两次：一次使用 var ，另一次使用 let 。因为 let 不能在同一作用域内重复声明一个已有标识符，此处的 let 声明就会抛出错误。另一方面，在嵌套的作用域内使用 let 声明一个同名的新变量，则不会抛出错误，以下代码对此进行了演示：

var count = 30;

// 不会抛出错误
if (condition) {

    let count = 40;

    // 其他代码
}

此处的 let 声明并没有抛出错误，这是因为它在 if 语句内部创建了一个新的 count 变量，而不是在同一级别再次创建此变量。在 if 代码块内部，这个新变量会屏蔽全局的 count 变量，从而在局部阻止对于后者的访问。

常量声明

在 ES6 中里也可以使用 const 语法进行声明。使用 const 声明的变量会被认为是常量（ constant ），意味着它们的值在被设置完成后就不能再被改变。正因为如此，所有的 const 变量都需要在声明时进行初始化，示例如下：

 // 有效的常量
const maxItems = 30;

// 语法错误：未进行初始化
const name;

maxItems 变量被初始化了，因此它的 const 声明能正常起效。而 name 变量没有被初始化，导致在试图运行这段代码时抛出了错误。

对比常量声明与 let 声明

if (condition) {
    const maxItems = 5;

    // 其他代码
}

// maxItems 在此处无法访问

此代码中，常量 maxItems 在 if 语句内被声明。 maxItems 在代码块外部无法被访问，因为该语句已结束执行。

常量声明与 let 声明一样，都是块级声明。这意味着常量在声明它们的语句块外部是无法访问的，并且声明也不会被提升，示例如下：

var message = "Hello!";
let age = 25;

// 二者均会抛出错误
const message = "Goodbye!";
const age = 30;

两个 const 声明都可以单独使用，但在前面添加了 var 与 let 声明的情况下，二者都会出问题。

使用 const 声明对象

const person = {
    name: "Nicholas"
};

// 工作正常
person.name = "Greg";

// 抛出错误
person = {
    name: "Greg"
};

此处 person 在初始化时被绑定了带有一个属性的对象。修改 person.name 是可能的，并不会抛出错误，因为该操作只修改了 person 对象的成员，而没有修改 person 的绑定值。当代码试图为 person 对象自身赋值时（这会改变变量绑定），就会导致错误。 const 在变量上的微妙工作机制容易导致误解，但只需记住： const 阻止的是对于变量绑定的修改，而不阻止对成员值的修改。

暂时性死区

使用 let 或 const 声明的变量，在达到声明处之前都是无法访问的，试图访问会导致一个引用错误，即使在通常是安全的操作时（例如使用 typeof 运算符），也是如此。示例如下：

if (condition) {
    console.log(typeof value);  // 引用错误
    let value = "blue";
}

此处的 value 变量使用了 let 进行定义与初始化，但该语句永远不会被执行，因为声明之前的那行代码抛出了一个错误。出现该问题是因为： value 位于被 JS 社区称为暂时性死区（ temporal dead zone ， TDZ ）的区域内。该名称并未在 ECMAScript 规范中被明确命名，但经常被用于描述 let 或 const 声明的变量为何在声明处之前无法被访问。

循环中的块级绑定

开发者最需要使用变量的块级作用域的场景，或许就是在 for 循环内，也就是想让一次性的循环计数器仅能在循环内部使用。例如：

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

// i 在此处仍然可被访问
console.log(i);

在其他默认使用块级作用域的语言中，这个例子能够照预期工作，也就是只有 for 才能访问变量 i 。然而在 JS 中，循环结束后 i 仍然可被访问，因为 var 声明导致了变量提升。若像如下代码那样换为使用 let ，则会看到预期行为：

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

// i 在此处不可访问，抛出错误
console.log(i);

本例中的变量 i 仅在 for 循环内部可用，一旦循环结束，该变量在任意位置都不可访问。

循环内的函数

长期以来， var 的特点使得循环变量在循环作用域之外仍然可被访问，于是在循环内创建函数就变得很有问题。考虑如下代码：

var funcs = [];

for (var i = 0; i < 10; i++) {
    funcs.push(function() { console.log(i); });
}

funcs.forEach(function(func) {
    func();     // 输出数值 "10" 十次
});

你原本可能预期这段代码会输出 0 到 9 的数值，但它却在同一行将数值 10 输出了十次。这是因为变量 i 在循环的每次迭代中都被共享了，意味着循环内创建的那些函数都拥有对于同一变量的引用。在循环结束后，变量 i 的值会是 10 ，因此当 console.log(i) 被调用时，每次都打印出 10 。

为了修正这个问题，开发者在循环内使用立即调用函数表达式（IIFEs），以便在每次迭代中强制创建变量的一个新副本，示例如下：

var funcs = [];

for (var i = 0; i < 10; i++) {
    funcs.push((function(value) {
        return function() {
            console.log(value);
        }
    }(i)));
}

funcs.forEach(function(func) {
    func();     // 从 0 到 9 依次输出
});

这种写法在循环内使用了 IIFE 。变量 i 被传递给 IIFE ，从而创建了 value 变量作为自身副本并将值存储于其中。 value 变量的值被迭代中的函数所使用，因此在循环从 0 到 9 的过程中调用每个函数都返回了预期的值。

let 声明通过有效模仿上例中 IIFE 的作用而简化了循环。在每次迭代中，都会创建一个新的同名变量并对其进行初始化。这意味着你可以完全省略 IIFE 而获得预期的结果，就像这样：

var funcs = [];

for (let i = 0; i < 10; i++) {
    funcs.push(function() {
        console.log(i);
    });
}

funcs.forEach(function(func) {
    func();     // 从 0 到 9 依次输出
})

与使用 var 声明以及 IIFE 相比，这里代码能达到相同效果，但无疑更加简洁。在循环中 let 声明每次都创建了一个新的 i 变量，因此在循环内部创建的函数获得了各自的 i 副本，而每个 i 副本的值都在每次循环迭代声明变量的时候被确定了。这种方式在 for-in 和 for-of 循环中同样适用，如下所示：

var funcs = [],
    object = {
        a: true,
        b: true,
        c: true
    };

for (let key in object) {
    funcs.push(function() {
        console.log(key);
    });
}

funcs.forEach(function(func) {
    func();  
});

如果把上面的let换成const，会不会报错。

循环内的常量声明

ES6 规范没有明确禁止在循环中使用 const 声明，然而它会根据循环方式的不同而有不同行为。在常规的 for 循环中，你可以在初始化时使用 const ，但循环会在你试图改变该变量的值时抛出错误。例如：

var funcs = [];

// 在一次迭代后抛出错误
for (const i = 0; i < 10; i++) {
    funcs.push(function() {
        console.log(i);
    });
}

const 变量在 for-in 或 for-of 循环中使用时，与 let 变量效果相同。因此下面代码不会导致出错：

var funcs = [],
    object = {
        a: true,
        b: true,
        c: true
    };

// 不会导致错误
for (const key in object) {
    funcs.push(function() {
        console.log(key);
    });
}

funcs.forEach(function(func) {
    func();     
});

const 能够在 for-in 与 for-of 循环内工作，是因为循环为每次迭代创建了一个新的变量绑定，而不是试图去修改已绑定的变量的值

全局块级绑定

let 与 const 不同于 var 的另一个方面是在全局作用域上的表现。当在全局作用域上使用 var 时，它会创建一个新的全局变量，并成为全局对象（在浏览器中是 window ）的一个属性。这意味着使用 var 可能会无意覆盖一个已有的全局属性，就像这样：

// 在浏览器中
var RegExp = "Hello!";
console.log(window.RegExp);     // "Hello!"

var ncz = "Hi!";
console.log(window.ncz);        // "Hi!"

尽管全局的 RegExp 是定义在 window 上的，它仍然不能防止被 var 重写。这个例子声明了一个新的全局变量 RegExp 而覆盖了原有对象。类似的， ncz 定义为全局变量后就立即成为了 window 的一个属性。这就是 JS 通常的工作方式。

然而若你在全局作用域上使用 let 或 const ，虽然在全局作用域上会创建新的绑定，但不会有任何属性被添加到全局对象上。这也就意味着你不能使用 let 或 const 来覆盖一个全局变量，你只能将其屏蔽。这里有个范例：

//在浏览器中
let RegExp = "Hello!";
console.log(RegExp);                   
console.log(window.RegExp === RegExp); 

const ncz = "Hi!";
console.log(ncz);                      
console.log("ncz" in window);

此代码的 let 声明创建了 RegExp 的一个绑定，并屏蔽了全局的 RegExp 。这表示 window.RegExp 与 RegExp 是不同的，因此全局作用域没有被污染。同样， const 声明创建了 ncz 的一个绑定，但并未在全局对象上创建属性。当你不想在全局对象上创建属性时，这种特性会让 let 与 const 在全局作用域中更安全。

模板字符串

我们使用JavaScript输出模版字符串，通常是下面这样的：

$("#result").append(
  "He is <b>"+person.name+"</b>"+"and we wish to know his"+person.age+".That is all" 
);

ES6中提供了模版字符串，用`（反引号）(一般在键盘左上角esc下面的位置)标识，用${}将变量括起来。上面的例子可以用模版字符串写成下面这样：

` I am a man.`

` No matter what you do,
  I trust you.`

我们还可以先定义变量，然后在模版字符串中嵌入变量：

var name="gzy";
` ${name},no matter what you do,
  I trust you.`

由于反引号是模版字符串的标识，如果我们需要在字符串中使用反引号，我们就需要对其进行转义

 `No matter\` what you do,
      I trust you.`

在${}中的大括号里可以放入任意的JavaScript表达式，还可以进行运算，以及引用对象属性。

var x=88;
var y=100;
console.log(`x=${++x},y=${x+y}`);

还可以调用函数：

function string(){
        return 'lol 6666';
}
console.log(`你想说什么? 
嗯，${string()}`);

总结

1.在 ES6 的发展阶段，被广泛认可的变量声明方式是：默认情况下应当使用 let 而不是 var 。对于多数 JS 开发者来说， let 的行为方式正是 var 本应有的方式，因此直接用 let 替代 var 更符合逻辑。在这种情况下，你应当对需要受到保护的变量使用 const 。

2. let 与 const 块级绑定将词法作用域引入了 JS 。这两种声明方式都不会进行提升，并且只会在声明它们的代码块内部存在。由于变量能够在必要位置被准确声明，其表现更加接近其他语言，并且能减少无心错误的产生。作为一个副作用，你不能在变量声明位置之前访问它们。

3. let 与 const 的表现在很多情况下都相似于 var，然而在循环中就不是这样。在 for-in 与 for-of 循环中， let 与 const 都能在每一次迭代时创建一个新的绑定，这意味着在循环体内创建的函数可以使用当前迭代所绑定的循环变量值（而不是像使用 var 那样，统一使用循环结束时的变量值）。这一点在 for 循环中使用 let 声明时也成立，不过在 for 循环中使用 const 声明则会导致错误。

4. 在默认情况下使用 const ，而只在你知道变量值需要被更改的情况下才使用 let 。这在代码中能确保基本层次的不可变性，有助于防止某些类型的错误。

Es6 课程一