一、Promise
Promise是跟随es6出来对异步回调地狱的一种很好的解决方案。

Promise是异步的一种解决方案，他有三种状态：pending（等待）、fulfilled（完成）、rejected（失败）
先来看一段代码，打印出的是什么？

const promise = new Promise((resolve, reject) => {
        setTimeout(() => {
             console.log('once')
             resolve('success')
        }, 1000)
 })
promise.then((res) => {
       console.log(res)
     })
promise.then((res) => {
     console.log(res)
 })

正确答案是

once
success
success

也可以这样写

new Promise(function(resolve, reject) {
  console.log(1);
  resolve('success');
  console.log(2);
  reject('error');
  console.log(3);
}).then(function(value) {
  console.log('then', value);
}).catch(function(err) {
  console.err('error:', err);
});

正确答案是

1
2
3
then success

根据以上情况，我们聊聊Promise，

1. Promise三种状态：

· pending
· fulfilled
· rejected

必须存在一种状态（pending或fulfilled或rejected）。如果为pending状态，可以转换到ulfilled或rejected状态；如果为fulfilled状态，那么必须有一个值，并且值和状态不可改变；如果为rejected状态，那么必须有一个原因，并且状态和原因不可改变。

当看到resolve('success')和后面reject('error'); 状态已经变为fulfilled，所以执行resolve('success'); 否则，reject('error');

2. then方法接受两个参数，两个参数都需要为函数，否则会出现值穿透现象；then方法会继续返回一个新的Promise；then需要return一个值，如果没有return值，默认return的为undefined。

then(function(value) {
     console.log('then', value);
})

这里值传了一个函数，获取到的value是resolve传的字符串success。

3. 由于catch和then返回的都是一个新的Promise，所以他可以继续往后链式调用,
   catch是语法糖，他其实相当于then(null, function failed() {})

二、async 函数
async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。

async function helloAsync(){
    return "helloAsync";
  }
  
console.log(helloAsync())  // Promise {<resolved>: "helloAsync"}
 
helloAsync().then(v=>{
   console.log(v);         // helloAsync
})

async 函数中可能会有 await 表达式，async 函数执行时，如果遇到 await 就会先暂停执行 ，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。

await 关键字仅在 async function 中有效。它只能在异步函数 async function 内部使用，如果在 async function 函数体外使用 await ，你只会得到一个语法错误。await 操作符用于等待一个 Promise 对象。

function testAwait(){
   return new Promise((resolve) => {
       setTimeout(function(){
          console.log("testAwait");
          resolve();
       }, 1000);
   });
}
 
async function helloAsync(){
   await testAwait();
   console.log("helloAsync");
 }
helloAsync();
// testAwait
// helloAsync

三、HTTP

1. http状态：

200 - 请求成功
301 - 资源（网页等）被永久转移到其它URL
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误

2. 从输入url到页面加载完成的过程
   　　1、浏览器的地址栏输入URL并按下回车。
   　　2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。
   　　3、DNS解析URL对应的IP。
   　　4、根据IP建立TCP连接（三次握手）。
   　　5、HTTP发起请求。
   　　6、服务器处理请求，浏览器接收HTTP响应。
   　　7、渲染页面，构建DOM树。
   　　8、关闭TCP连接（四次挥手）。

四、 原型与原型链，继承

五、闭包
六， ES 5 6 7 区别
ES5 : 09年发布
ES6(ES2015) : 15年发布, 也称为ECMA2015
ES7(ES2016) : 16年发布, 也称为ECMA2016 (变化不大)

• ES5
  两种模式：正常运行模式、严格模式（'use strict'）
  严格模式，消除Javascript语法的一些不合理、不严谨之处；减少一些怪异行为，消除代码运行的一些不安全之处，为代码的安全运行保驾护航，如果浏览器不支持, 只解析为一条简单的语句, 没有任何副作用
  语法和行为：
  var声明变量、禁止自定义的函数中的this指向window、创建eval作用域、对象不能有重名的属性

1. JSON：JSON.stringify(obj/arr)、JSON.parse(json)
2. Object: Object.create(prototype, [descriptors])、set、get存取值
3. Array：
   indexOf(v) - 得到值在数组中的第一个下标
   lastIndexOf(v) - 得到值在数组中的最后一个下标
   forEach-遍历数组
   .map(function(item, index){}) - 遍历数组返回一个新的数组，返回加工之后的值
   .filter(function(item, index){}) - 遍历过滤出一个新的子数组， 返回条件为true的值
4. Function:
   .bind(obj) - 将函数内的this绑定为obj, 并将函数返回
   面试题: 区别bind()与call()和apply()?
   答：都能指定函数中的this；call()/apply()是立即调用函数； bind()是将函数返回

• ES6
  1.let（与var类似）
  2 .const（常量）

3. 变量的解构赋值（从对象或数组中提取数据, 并赋值给变量(多个)）
4. 对象的解构赋值
   let {n, a} = {n:'tom', a:12}
5. 数组的解构赋值
   let [a,b] = [1, 'hello'];
6. 箭头函数。

ES6算法扩展：

字符串扩展：

1. includes(str) : 判断是否包含指定的字符串
2. startsWith(str) : 判断是否以指定字符串开头
3. endsWith(str) : 判断是否以指定字符串结尾
4. repeat(count) : 重复指定次数

数值扩展

1. 二进制与八进制数值表示法: 二进制用0b, 八进制用0o
2. Number.isFinite(i) : 判断是否是有限大的数
3. Number.isNaN(i) : 判断是否是NaN
4. Number.isInteger(i) : 判断是否是整数
5. Number.parseInt(str) : 将字符串转换为对应的数值
6. Math.trunc(i) : 直接去除小数部分

数组扩展

1. Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
2. Array.of(v1, v2, v3) : 将一系列值转换成数组
3. find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
4. findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标

对象扩展

1. Object.is(v1, v2)：判断2个数据是否完全相等
2. Object.assign(target, source1, source2..)： 将源对象的属性复制到目标对象上
3. 直接操作 proto 属性
   let obj2 = {};
   obj2.proto = obj1;

克隆数据：对象/数组
1). arr.concat(): 数组浅拷贝
2). arr.slice(): 数组浅拷贝
3). JSON.parse(JSON.stringify(arr/obj)): 数组或对象深拷贝, 但不能处理函数数据

Set和Map数据结构

1. Set容器 : 无序不可重复的多个value的集合体

• Set()

• Set(array)

• add(value)

• delete(value)

• has(value)

• clear()

• size

2. Map容器 : 无序的 key不重复的多个key-value的集合体

• Map()

• Map(array)

• set(key, value)//添加

• get(key)

• delete(key)

• has(key)

• clear()

• size

for_of循环
for(let value of target){}循环遍历

1. 遍历数组

2. 遍历Set

3. 遍历Map

4. 遍历字符串

5. 遍历伪数组

• ES7

1. 指数运算符(幂): **
2. Array.prototype.includes(value) : 判断数组中是否包含指定value

七、IE特性与兼容
八、性能优化
九、 前端算法题