ES6

整理ES6知识，供查阅

变量

• let

相同作用域内，只能定义一次

{let a=1;let a=2}
// Uncaught SyntaxError: Identifier 'a' has already been declared

不存在变量提升

{let a=1;b=2 }
console.log(a)
// VM2272:1 Uncaught ReferenceError: a is not defined at <anonymous>
console.log(b)  //2

存在暂时性死区

在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”

  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError
  let tmp; 

块级作用域

外层作用域无法读取内层作用域的变量。内层作用域，可以使用外层作用域的变量

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

const 定义一个常量，同一作用域内不允许再次赋值，声明时必须赋值

Set

ES6提供的一种数据结构，本身是一个构造函数，类似数组，

• 特点：无序，值唯一
• 用途：数组，字符串去重

Set常用方法

• add
• has
• delete
• size
• clear

const set = new Set();
set.add(1).add(1).add(2).add(3)

[...set];// [1,2,3]
set.size;// 3
set.has(55 // false
set.has(3) // true
set.delete(3);
set.has(3) // false

set.clear()
[...set];// []

数组，字符串去重

const arr = [1,2,3,1,2,3,4]; 
const newArr = [...new Set(arr)];// [1,2,3,4]

const str = 'abcabcd';   
const newStr = [...new Set(str)].join('')

• [...a] 就是将 set 转换成 array。以后需要将 set 转换成 array 基本都使用这种方法

交集

const a = new Set([1, 2, 3]);
const b = new Set([4, 3, 2]);
const intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}

并集

const a = new Set([1, 2, 3]);
const b = new Set([4, 3, 2]);
const difference = new Set([...a].filter(x => !b.has(x))); // {1}

Promise

传统处理方法

  setTimeout(function() {
        console.log("第一个计时器回调执行，开启第二个");
        setTimeout(function() {
          console.log("第二个计时器回调执行，开启第三个");
          setTimeout(function() {
            console.log("第三个计时器回调执行");
          }, 2000);
        }, 2000);
      }, 2000);

解决多层异步嵌套问题

• 示例1

   // 创建一个promise实例，用于控制第二个计时器的执行
      new Promise(function(yes, no) {
        setTimeout(function() {
          console.log("第一个计时器回调执行，开启第二个");
          yes(1);
        }, 2000);
      })
        // 第二个执行，并创建返回一个新的promise实例，用于控制第三个计时器的执行
        .then(function(num) {
          console.log(num);
          return new Promise(function(yes, no) {
            setTimeout(function() {
              console.log("第二个计时器回调执行，开启第三个");
              yes();
            }, 2000);
          });
        })
        // 第三个执行，如没第四个，就不用再返回新的promise实例控制后续执行了
        .then(function() {
          setTimeout(function() {
            console.log("第三个计时器回调执行");
          }, 2000);
        });

• 示例2

function request(url, data) {
            return new Promise(function(resolve, reject) {
                $.ajax({
                    url: url,
                    contentType: 'json',
                    data: data,
                    success: function(resData) {
                        resolve(resData);
                    }
                })              
            })
        }
        request("/union/perfomace/getPeformanceName", {})
        .then(function(response1) {
            return request('/union/perfomace/getPeformancePlan', {peformanceName:                           response1.peformanceName[0]});
        })
        .then(function(response2) {
            return request('/union/hall/getHallInfo', {plan: response2.plans[0]});
        });

async

 function pmsTimeout(time, data) {
        return new Promise(function(yes, no) {
          setTimeout(function() {
            yes(`Hello ${data}`); // 数据小做处理
          }, time);
        });
      }
      async function asyncTimeout() {
        let data = null;
        data = await pmsTimeout(1000, "大娃");
        console.log(data);
        data = await pmsTimeout(2000, "二娃");
        console.log(data);
        data = await pmsTimeout(3000, "三娃");
        console.log(data);
        data = await pmsTimeout(4000, "四娃");
        console.log(data);
      }
      // 幸福生活
      asyncTimeout();

箭头函数

function make () {
  return ()=>{
    console.log(this);
  }
}
var testFunc = make.call({ name:'foo' });
testFunc(); 
testFunc.call({ name:'bar' }); 

Object {name: "foo"}
Object {name: "foo"}

• 可以看到箭头函数在定义之后，this 就不会发生改变了，无论用什么样的方式调用它，this 都不会改变；
• 原因：箭头函数不会自动绑定局部变量，如this，arguments，super(ES6)，new.target(ES6)等
• 所以箭头函数没有它自己的this值，箭头函数内的this值继承自外围作用域。在箭头函数中调用 this 时，仅仅是简单的沿着作用域链向上寻找，找到最近的一个 this 拿来使用

{
      addAll: function addAll(pieces) {
        var self = this;
        _.each(pieces, function (piece) {
          self.add(piece);
        });
      },
    }

• 在这里，你希望在内层函数里写的是this.add(piece)，不幸的是，内层函数并未从外层函数继承this的值。在内层函数里，this会是window或undefined，临时变量self用来将外部的this值导入内部函数。（另一种方式是在内部函数上执行.bind(this)，两种方法都不甚美观。）这时候就可以使用箭头函数来达到要求

导入 导出

• 场景一

 // 导出方 a.js
 export var num = 100
 export var name = '王小明'

// 导入方
import {num} from './a.js'

• 场景二

// 导出方 routes.js
let routes ={},
onelevel = {};
export { routes,, onelevel };
// 导入方
import { routes，onelevel } from "./routes";

• export default

// 导出方 example.js
export default function output() {
	// ...
}
// 导入方
import output from './example'

• export default与 export 的区别
• export default 只能导出一个接口，导出与导入都不需要大括号包裹
• export 无论导出，导入几个接口都是需要用大括号包裹