ES6的相关知识

参考文章

一、新的变量声明方式 let/const

（一）let

---

let来声明一个值会被改变的变量  

特点：

• let声明的变量只在它所在的代码块有效。
• 如果使用let，声明的变量仅在块级作用域内有效
• 对于循环，JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。所以每一次循环的i其实都是一个新的变量
• ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

if (true) {
  // TDZ开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ结束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

• let、const语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。
• let不允许在相同作用域内，重复声明同一个变量。

// 报错
function func() {
  let a = 10;
  var a = 1;
}

// 报错
function func() {
  let a = 10;
  let a = 1;
}

var 和let的区别
let 为 ES6 新添加申明变量的命令，它类似于 var，但是有以下不同：

• var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
• let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
• let 不允许重复声明.

为什么 var 可以重复声明？

当我们执行代码时，我们可以简单的理解为新变量分配一块儿内存，命名为a，并赋值为2，但在运行的时候编译器与引擎还会进行两项额外的操作：判断变量是否已经声明：

• 首先编译器对代码进行分析拆解，从左至右遇见var a，则编译器会询问作用域是否已经存在叫 a 的变量了，如果不存在，则招呼作用域声明一个新的变量a，若已经存在，则忽略var 继续向下编译，这时a = 2被编译成可执行的代码供引擎使用。
• 引擎遇见a=2时同样会询问在当前的作用域下是否有变量a，若存在，则将a赋值为2（由于第一步编译器忽略了重复声明的var，且作用域中已经有a，所以重复声明会发生值得覆盖而并不会报错）。若不存在，则顺着作用域链向上查找，若最终找到了变量a则将其赋值2，若没有找到，则招呼作用域声明一个变量a并赋值为2。

（二）const

---

const声明一个只读的常量。一旦声明，常量的值就不能改变。

特点：

• const一旦声明变量，就必须立即初始化，不能留到以后赋值。
• 只在声明所在的块级作用域内有效。
• const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。
• const声明的常量，也与let一样不可重复声明。

（三）箭头函数

---

箭头函数表达式的语法比函数表达式更短，并且不绑定自己的this，arguments，super 
或 new.target。这些函数表达式最适合用于非方法函数，并且它们不能用作构造函数。  

(参数1, 参数2, …, 参数N) => {函数声明}
(参数1, 参数2, …, 参数N) => 表达式（单一）

新特点：

• 不需要function关键字来创建函数
• 省略return关键字
• 继承当前上下文的 this 关键字

特点：

• 箭头函数可以替换函数表达式，但是不能替换函数声明 ，声明用const
• 箭头函数中，没有this。如果你在箭头函数中使用了this，那么该this一定就是外层的this。
• 在ES6中，会默认采用严格模式，因此this也不会自动指向window对象了,指向undefined
• 箭头函数中无法访问arguments对象。

// es5
var foo = function() {
    var a = 20；
    var b = 30;
    return a + b;
}

// es6
const foo = () => {
   const a = 20;
   const b = 30;
   return a + b;
}

（四）模板字符串

第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。为了解决使用
+号拼接字符串的不便利  

 //es5 
    var name = 'lux'
    console.log('hello' + name)
    //es6
    const name = 'lux'
    console.log(`hello ${name}`) //hello lux

第二个用途，在ES5时我们通过反斜杠(\)来做多行字符串或者字符串一行行拼接。ES6反引号
(``)直接搞定。  

 // es5
    var msg = "Hi \
    man!
    "
    // es6
    const template = `<div>
        <span>hello world</span>
    </div>`

（五）promise

---

原理：

大概原理就是正如它们所说Promise对象相当于是一个状态机，在其内部使用resolve方法，使其由初始状态变为成功时的fulfilled状态或者执行失败后的rejected状态。这时内部的工作就完成了，开始由外部监听其内部的状态的改变，调用then()方法（catch()方法相当于then内部的第二个参数方法）对应的状态调用对应的处理函数。这样就大概是Promise对象实现异步编程的原理。

1)promise有三种状态

• pending: 等待中，或者进行中，表示还没有得到结果
• resolved(Fulfilled): 已经完成，表示得到了我们想要的结果，可以继续往下执行

• rejected: 也表示得到结果，但是由于结果并非我们所愿，因此拒绝执行

  这三种状态不受外界影响，而且状态只能从pending改变为resolved或者rejected，并且
  不可逆。
  

2）promise原型方法——Promise.prototype.then()

它的作用是为 Promise 实例添加状态改变时的回调函数。前面说过，then方法的第一个参数
是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。

1.then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。

getJSON("/posts.json").then(function(json) {
  return json.post;
}).then(function(post) {
  // ...
});

2.采用链式的then，可以指定一组按照次序调用的回调函数。这时，前一个回调函数，有可能返回的还是一个Promise对象（即有异步操作），这时后一个回调函数，就会等待该Promise对象的状态发生变化，才会被调用。

第一个then方法指定的回调函数，返回的是另一个Promise对象。这时，第二个then方法指定的
回调函数，就会等待这个新的Promise对象状态发生变化。如果变为resolved，就调用funcA，如果 
状态变为rejected，就调用funcB。  

3)promise原型方法——Promise.prototype.catch()

Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的
回调函数。

1.Promise 在resolve语句后面，再抛出错误，不会被捕获，等于没有抛出。因为 Promise 的状态一旦改变，就永久保持该状态，不会再变了。

2.Promise 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。

// bad
promise
  .then(function(data) {
    // success
  }, function(err) {
    // error
  });

// good
promise
  .then(function(data) { //cb
    // success
  })
  .catch(function(err) {
    // error
  });

第二种写法要好于第一种写法，理由是第二种写法可以捕获前面then方法执行中的错误，也更接近同步的写法（try/catch）。因此，建议总是使用catch方法，而不使用then方法的第二个参数。

3.Promise 内部的错误不会影响到 Promise 外部的代码，通俗的说法就是“Promise 会吃掉错误”。

4）promise原型方法——Promise.prototype.finally()

finally方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。 

5)promise自己的方法——–Promise.all()

1.Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。
2.Promise.all接收一个Promise对象组成的数组作为参数，当这个数组所有的Promise对象状态
都变成resolved或者rejected的时候，它才会去调用then方法。  

const p = Promise.all([p1, p2, p3]);

p的状态由p1、p2、p3决定，分成两种情况。

（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

6）promise自己的方法——Promise.race()

const p = Promise.race([p1, p2, p3]);

只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 
实例的返回值，就传递给p的回调函数。  

7）promise自己的方法——-Promise.resolve()

将现有对象转为 Promise 对象，Promise.resolve方法就起到这个作用。  

需要注意的是，立即resolve的 Promise 对象，是在本轮“事件循环”（event loop）的结束时，而不是在下一轮“事件循环”的开始时。

setTimeout(function () {
  console.log('three');
}, 0);

Promise.resolve().then(function () {
  console.log('two');
});

console.log('one');

// one
// two
// three

setTimeout(fn, 0)在下一轮“事件循环”开始时执行，Promise.resolve()在本轮“事件循环”结束时执行，console.log(‘one’)则是立即执行，因此最先输出。

8）promise自己的方法——-Promise.reject()

Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected。 

Promise.reject()方法的参数，会原封不动地作为reject的理由，变成后续方法的参数。这一点与Promise.resolve方法不一致。

---

9）jquery的ajax返回的是promise对象吗？

jquery的ajax返回的是deferred（延迟）对象，通过promise的resolve()方法将其转换为promise对象。

var jsPromise = Promise.resolve($.ajax('/whatever.json'));

10）CommonJS 中的 require/exports 和 ES6 中的 import/export 区别？

• CommonJS 模块的重要特性是加载时执行，即脚本代码在 require 的时候，就会全部执行。一旦出现某个模块被”循环加载”，就只输出已经执行的部分，还未执行的部分不会输出。
• ES6 模块是动态引用，如果使用 import 从一个模块加载变量，那些变量不会被缓存，而是成为一个指向被加载模块的引用，需要开发者自己保证，真正取值的时候能够取到值。
• import/export 最终都是编译为 require/exports 来执行的。
• CommonJS 规范规定，每个模块内部，module 变量代表当前模块。这个变量是一个对象，它的 exports 属性（即 module.exports ）是对外的接口。加载某个模块，其实是加载该模块的 module.exports 属性。
• export 命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。