ES6/ES7/ES8常用新增语法

本文参考了阮一峰老师的ES6教程，部分示例代码来源于ECMAScript 6 入门。

块级作用域

ES6中针对块级作用域进行了一些规范化的定义。

• 使用let关键字来创建块级作用域变量，该方式声明的变量只在 let 所在的代码块有效。

  • 比如for循环中的i，就可以使用 let 来声明，这样i只在for循环体内有效。

  • 在for循环中，每一轮循环，i都是一个新声明的变量，并且只在本次循环的代码块中生效。

  • 注意for循环中，设置循环变量的那部分是父作用域，循环体内部是一个单独的子作用域，因此在 for 循环的代码块中再次用 let 声明i会创建一个新的变量。

    for (let i = 0; i < 3; i++) {
           
      let i = 'abc';
      console.log(i);
    }
    // abc
    // abc
    // abc
    //输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域。
    

• 使用 const 关键字来创建块级作用域常量，常量在创建后不能被重新赋值。

• 不存在变量提升，如果在let声明之前使用或对该变量赋值，会报错ReferenceError。

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

  ES5规定中不允许在块级作用域中声明函数，但浏览器却可以这样做。而ES6中明确规定可以在块级作用域中声明函数，相当于let声明，同时为了兼容历史规则，允许浏览器有自己的行为。这样一来，在不同浏览器中，块级作用域声明函数的规则具有较大的差异。为了避免不必要的bug，我们在块级作用域中，要使用函数表达式，而不是函数声明语句。

模板字面量

模板字面量是允许嵌入表达式的字符串字面量，它是增强版的字符串，采用反引号(键盘上ESC下面的那个键)来标识。

• 可以用模板字面量来创建多行字符串，空格和换行都会被视为字符串的一部分。

  let msg = `
  <h2>hello<h2>
  <h2>world<h2>
  `.trim();
  
  console.log(msg);
  //输出
  <h2>hello<h2> 
  <h2>world<h2>
  

• 在模板字面量中使用变量占位符${变量}。

  let name = "Tom", message = `Hello, ${
         name}.`;
  console.log(message); // "Hello, Tom."
  
  //占位符可以是运算符或者函数调用等构成表达式
  function fn() {
       
    return "Hello World";
  }
  `foo ${
         fn()} bar` // foo Hello World bar
  
  let count = 10, price = 0.25,
  message = `${
         count