1、babel
Babel是一个编译器，能将ES2015+的代码转换正ES2015。
babel的核心概念就是利用一系列的plugin来管理编译案列，通过不同的plugin，他不仅可以编译es6的代码，还可以编译react JSX语法或者别的语法，甚至可以使用还在提案阶段的es7的一些特性，这就足以看出她的可扩展性。
2、前端缓存
image.png
常见的http缓存只能缓存get请求响应的资源
https://www.jianshu.com/p/227cee9c8d15
3、
使用箭头函数就不会导致this被绑定到全局对象
4、async与await
async确保了函数返回一个promise，即使其中包含非promise
另一个关键词await，只能在async函数里使用
async function f() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve('done!'), 1000)
})
let result = await promise // 直到promise返回一个resolve值（*）
alert(result) // 'done!'
}
f()
5、深拷贝和浅拷贝：
1、基本类型 -- 名值存储在栈内存中
2、引用数据类型 -- 名存在栈内存中，值存在于堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值
深拷贝本身只针对较为复杂的object类型数据，是拷贝对象各个层级的属性
image.png
深拷贝方法：
Json拷贝方法.png
jq中的方法.png
6、null和undefined及NaN
undefined是代表调用一个值而该值却没有赋值
null值表示一个空对象指针
①转为数字类型值
null： 转为数字类型值为 0
undefined：转为数字类型为 NaN(Not a Number)
②
null == undefined //true
③
typeof null //object
typeof undefined // undefined
typeof NaN //number
ES5的isNaN会将非数值类型的参数转化为Number类型再做判断（不合理）
ES6新增 Number.isNaN('NaN') === false
7、js异步编程的四种方法：
①回调函数
//如果f1是一个很耗时的任务，可以考虑改写f1，把f2写成f1的回调函数。
function f1(callback){
setTimeout(function () {
// f1的任务代码
callback();
}, 1000);
}
//执行代码就变成下面这样：
f1(f2);
②事件监听
f1.on('done', f2);
//上面这行代码的意思是，当f1发生done事件，就执行f2。然后，对f1进行改写：
function f1(){
setTimeout(function () {
// f1的任务代码，f1.trigger('done')表示，执行完成后，立即触发done事件，从而开始执行f2。
f1.trigger('done');
}, 1000);
}
③发布/订阅
jQuery.subscribe("done", f2);
function f1(){
setTimeout(function () {
// f1的任务代码，jQuery.publish("done")的意思是，f1执行完成后，向"信号中心"jQuery发布"done"信号，从而引发f2的执行
jQuery.publish("done");
}, 1000);
}
④Promise
Promise对象用于异步操作，它表示一个尚未完成且预计在未来完成的异步操作
new Promise(fn) 返回一个promise对象
在fn 中指定异步等处理
处理结果正常的话，调用resolve(处理结果值)
处理结果错误的话，调用reject(Error对象)。
比如，f1的回调函数f2,可以写成：f1().then(f2);
8、从输入URL到网页呈现的过程
①域名解析
②TCP连接（传输层协议）
第一次握手：建立连接时，客户端向服务端发送请求报文
第二次握手：服务器收到请求报文后，如同意连接，则向客户端发送确认报文
第三次握手，客户端收到服务器的确认后，再次向服务器给出确认报文，完成连接。
③浏览器发送http请求
http请求报文一共包括三个部分：请求行、请求头、请求正文
④服务器处理http请求，并返回响应报文
⑤浏览器页面渲染
⑥断开tcp连接
第一次挥手：客户端想分手，发送消息给服务器
第二次挥手：服务器通知客户端已经接受到分手请求，但还没做好分手准备
第三次回收：服务器已经做好分手准备，通知客户端
第四次挥手：客户端发送消息给服务器，确定分手，服务器关闭连接
9、<script>标签的 defer 和 async 标签的作用与区别
image.png
10、打包工具
webpack 是 module bundle
gulp 是 tast runner
①模块化解决了前端的哪些痛点？
命名冲突
文件依赖
代码复用
② webpack 的 loader 和 plugin 区别？
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。
Plugin 是用来扩展 Webpack 功能的，通过在构建流程里注入钩子实现，它给 Webpack 带来了很大的灵活性
11、原型和原型链
原型：每当定义一个函数数据类型(普通函数、类)时候，都会天生自带一个prototype属性，这个属性指向函数的原型对象，并且这个属性是一个对象数据类型的值。
image.png
原型链：
举例说明:person → Person → Object ，普通人继承人类，人类继承对象类
每一个对象数据类型(普通的对象、实例、prototype......)也天生自带一个属性proto，属性值是当前实例所属类的原型(prototype)。原型对象中有一个属性constructor, 它指向函数对象。
当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，
如果有则直接使用，
如果没有则会去原型对象中寻找，如果找到则直接使用。
如果没有则去原型的原型中寻找，直到找到Object对象的原型，Object对象的原型没有原型，
如果在Object原型中依然没有找到，则返回undefined。
image.png
function Person() {}
Person.prototype.a = 123;
Person.prototype.sayHello = function () {
alert("hello");
};
var person = new Person()
console.log(person.a)//123
console.log(person.hasOwnProperty('a'));//false
console.log('a'in person)//true
hasOwnProperty表示是否有自己的属性。这个方法会查找一个对象是否有某个属性，但是不会去查找它的原型链
image.png
12、this的使用
作为构造函数执行
作为对象属性执行
作为普通函数执行(window)
call、apply、bind
13、描述创建一个对象的过程：
创建一个新对象
this指向这个新对象
执行代码，即对this赋值
返回this
14、localStorage、sessionStorage、cookie：
网友评论