一、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，
- Promise三种状态：
· pending
· fulfilled
· rejected
必须存在一种状态（pending或fulfilled或rejected）。如果为pending状态，可以转换到ulfilled或rejected状态；如果为fulfilled状态，那么必须有一个值，并且值和状态不可改变；如果为rejected状态，那么必须有一个原因，并且状态和原因不可改变。
当看到resolve('success')和后面reject('error'); 状态已经变为fulfilled，所以执行resolve('success'); 否则，reject('error');
- then方法接受两个参数，两个参数都需要为函数，否则会出现值穿透现象；then方法会继续返回一个新的Promise；then需要return一个值，如果没有return值，默认return的为undefined。
then(function(value) {
console.log('then', value);
})
这里值传了一个函数，获取到的value是resolve传的字符串success。
- 由于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
- http状态：
200 - 请求成功
301 - 资源（网页等）被永久转移到其它URL
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误
- 从输入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作用域、对象不能有重名的属性
- JSON：JSON.stringify(obj/arr)、JSON.parse(json)
- Object: Object.create(prototype, [descriptors])、set、get存取值
- Array：
indexOf(v) - 得到值在数组中的第一个下标
lastIndexOf(v) - 得到值在数组中的最后一个下标
forEach-遍历数组
.map(function(item, index){}) - 遍历数组返回一个新的数组，返回加工之后的值
.filter(function(item, index){}) - 遍历过滤出一个新的子数组， 返回条件为true的值 - Function:
.bind(obj) - 将函数内的this绑定为obj, 并将函数返回
面试题: 区别bind()与call()和apply()?
答：都能指定函数中的this；call()/apply()是立即调用函数； bind()是将函数返回
- ES6
1.let（与var类似）
2 .const（常量）
- 变量的解构赋值（从对象或数组中提取数据, 并赋值给变量(多个)）
- 对象的解构赋值
let {n, a} = {n:'tom', a:12} - 数组的解构赋值
let [a,b] = [1, 'hello']; - 箭头函数。
ES6算法扩展：
字符串扩展：
- includes(str) : 判断是否包含指定的字符串
- startsWith(str) : 判断是否以指定字符串开头
- endsWith(str) : 判断是否以指定字符串结尾
- repeat(count) : 重复指定次数
数值扩展
- 二进制与八进制数值表示法: 二进制用0b, 八进制用0o
- Number.isFinite(i) : 判断是否是有限大的数
- Number.isNaN(i) : 判断是否是NaN
- Number.isInteger(i) : 判断是否是整数
- Number.parseInt(str) : 将字符串转换为对应的数值
- Math.trunc(i) : 直接去除小数部分
数组扩展
- Array.from(v) : 将伪数组对象或可遍历对象转换为真数组
- Array.of(v1, v2, v3) : 将一系列值转换成数组
- find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
- findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标
对象扩展
- Object.is(v1, v2)：判断2个数据是否完全相等
- Object.assign(target, source1, source2..)： 将源对象的属性复制到目标对象上
- 直接操作 proto 属性
let obj2 = {};
obj2.proto = obj1;
克隆数据：对象/数组
1). arr.concat(): 数组浅拷贝
2). arr.slice(): 数组浅拷贝
3). JSON.parse(JSON.stringify(arr/obj)): 数组或对象深拷贝, 但不能处理函数数据
Set和Map数据结构
- Set容器 : 无序不可重复的多个value的集合体
Set()
Set(array)
add(value)
delete(value)
has(value)
clear()
size
- 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){}循环遍历
遍历数组
遍历Set
遍历Map
遍历字符串
遍历伪数组
- ES7
- 指数运算符(幂): **
- Array.prototype.includes(value) : 判断数组中是否包含指定value
七、IE特性与兼容
八、性能优化
九、 前端算法题
