ES6新语法

1. 变量声明关键字

参考

1. wsmrzx JavaScript系列

关键字	作用域	变量是否提升	能否重复定义
var	函数作用域	是	能
let、const	块级作用域	否	否

• var声明的变量若是在函数外声明的将会变成全局变量，在浏览器环境中将会被挂载到window对象上，在Node中将会被挂载到Global对象上，但是let、const声明的全局变量在全局中可以使用但是不会被挂载
• var声明的变量会有变量提升，但是const、let声明的变量不会
• var可以多次声明同名变量，但是const、let不可以
• const一旦声明必须赋值，且声明后不能再修改

2. for...of

The for...of statement creates a loop iterating（循环迭代） over iterable objects（迭代对象）, including: built-in String, Array, array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables. It invokes（调用） a custom iteration hook with statements to be executed for the value of each distinct（不同的） property of the object.

在其中可以使用 continue 和 break 语句

3. 模板字符串

参考 模板字符串使用方法

在ES6之前使用模板字符串比较繁琐，比如在innerHTML中使用时需要很多括号，需要+连接等等，但是ES6中变得简单，直接使用反引号 ` 括起来就可以，其中的模板字符串用 `（反引号）标识，用 ${ } 将变量括起来，里面也可以放表达式，甚至是方法。模板字符串该可以嵌套，也就是在 ${ } 中再引入一个模板

ES5: .innerHTML = 'My name is <b>' + name + '</b> and my age is <font color="green">' + age + '</font>';

ES6: innerHTML = `My name is <b>${name}</b> and my age is <font color="green">${age}</font>`;

4. 解构语法

参考

1. wsmrzx ES6新特性

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

      var a, b, rest;
      [a, b] = [10, 20];
      console.log(a); // 10
      console.log(b); // 20

      [a, b, ...rest] = [10, 20, 30, 40, 50];
      console.log(a); // 10
      console.log(b); // 20
      console.log(rest); // [30, 40, 50]

      ({ a, b } = { a: 10, b: 20 });
      console.log(a); // 10
      console.log(b); // 20


      // Stage 4（已完成）提案中的特性
      ({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
      console.log(a); // 10
      console.log(b); // 20
      console.log(rest); // {c: 30, d: 40}

5. 拓展运算符

参考

1. MDN Spread syntax
2. es6 扩展运算符 三个点（...）

也叫展开语法（Spread syntax），指的是可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。

      function sum(x, y, z) {
      return x + y + z;
      }

      const numbers = [1, 2, 3];

      console.log(sum(...numbers));
      // expected output: 6

      console.log(sum.apply(null, numbers));
      // expected output: 6

语法

• 函数调用：myFunction(...iterableObj);
• 字面量数组构造或字符串：[...iterableObj, '4', ...'hello', 6];
• 构造字面量对象时,进行克隆或者属性拷贝（ECMAScript 2018规范新增特性）：let objClone = { ...obj };

6. 默认参数

参考

1. MDN Default_parameters

ES6可以设置参数的默认值

Default function parameters allow named parameters to be initialized with default values if no value or undefined is passed.

      Syntax:
      function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) {
         statements
      }  


      function multiply(a, b = 1) {
      return a * b;
      }

      console.log(multiply(5, 2));
      // expected output: 10

      console.log(multiply(5));
      // expected output: 5

7. 箭头函数

参考

1. MDN 箭头函数

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

      const materials = [
      'Hydrogen',
      'Helium',
      'Lithium',
      'Beryllium'
      ];

      console.log(materials.map(material => material.length));
      // expected output: Array [8, 6, 7, 9]

8. Class

参考

1. MDN Classes

实质上是 JavaScript 现有的基于原型的继承的语法糖。类语法不会为JavaScript引入新的面向对象的继承模型。

注意和函数声明不一样，类声明不会提升

      class Rectangle {
      constructor(height, width) {
         this.height = height;
         this.width = width;
      }
      }

附加

之前看过作用域以及作用域链的内容，这里再次温习

参考

1. JavaScript学习笔记(十一) 闭包

当定义一个函数时，就会保存一个作用域链；当调用这个函数时，就会创建一个新的对象用于保存局部变量，然后将这个对象添加到保存的作用域链上，并且创建一个新的作用域链表示函数调用的作用域，当函数返回的时候，就会从保存的作用域链上删除这个对象，但是这并不意味着对象马上就被当作垃圾回收，因为按照 JavaScript 的垃圾回收机制，只有当对象没有被引用的时候，才会被 JavaScript 回收

闭包的理解

如果一个函数内部包含嵌套函数（但是没有返回嵌套函数），那么外部函数返回后，嵌套函数也被回收，闭包的核心在于一个函数包含嵌套函数，并且返回这个嵌套函数，这时就有一个外部的引用指向这个嵌套的函数，这个嵌套函数就不会被当作垃圾回收，它所对应的作用域链也被保存下来。

因此闭包的缺点就是作用域链不能释放，会造成内存泄露。

      var global_scope = 'global'

      function outer_function(outer_params) {
         var outer_scope = outer_params
         console.log(outer_scope)
         var inner_function = function (inner_params) {
            var inner_scope = inner_params
            console.log(outer_scope)
            console.log(inner_scope)
         }
         return inner_function
      }
      outer_function('Tian')('hui')
      // 输出
      // Tian
      // Tian
      // hui

关于闭包的作用 参考 JavaScript 闭包

1. 实现公有变量
2. 做缓存
3. 实现封装，属性私有化
4. 模块化开发，放置污染全局变量