ES6框架

ES6框架
1.如何搭建ES6的webpack开发环境？
安装Node环境 node -v // 10.14.1
安装NPM环境 npm -v // 6.4.1
安装babel npm install @babel/core babel-preset-es2015 babel-preset-latest
创建.babelrc文件 npm install babel-cli -g babel --version
babel ./src/index.js // 测试babel的编译结构
Webpack---模块化工具安装 npm install webpack babel-loader --save-dev // 安装webpack，babel-loader
配置webpack.config.js
配置package.json中的scripts
运行n npm start
1.1 常见错误
1.2 安装环境注意事项
这里的安装的版本必须是@babel/core,否则会出现版本不兼容的错误
建议先安装webpack，然后安装loader
2.谈一下JS的模块化？
最开始的时候JS是没有模块化的
AMD（Async module define）成为标准，require.js（CMD--common-module-define）
前端打包工具，使得nodejs模块化可以被使用 (Grunt, Gulp, Webpack……)
ES6的出现，想统一现在所有的模块化标准
nodejs（服务器端）积极支持，浏览器（需要打包为ES5/4）尚未统一
可以自造库lib，但是不要自造标准
2.1 rollup的使用
功能单一，可集成，可扩展
rollup + gulp的结合
安装 npm install rollup rollup-plugin-node-resolve roll-up-plugin-babel babel-plugin-external-helpers babel-preset-latest --save-dev
配置 .babelrc
配置 rollup.config.js
修改 package.json scripts
运行命令：npm start
2.2 rollup特点
rollup功能单一，webpack功能强大
参考设计原则和《Linux/Unix设计思想》
工具要尽量功能单一，可以继集成，可扩展
可以使用gulp + rollup（主流框架VUE和React使用的就是rollup进行模块化的）
3.class和JS普通构造函数的区别？
Note
class 在语法上更加贴合面向对象的写法
class 实现继承更加易读，易理解
更加易于些java等后端语言的使用
class【本质】还是语法糖，实际上还是使用的是prototype

1. 写实现一个Promise?
   先看看Promise是怎么用的
   在Promise的构造器中传入一个函数，这个函数有两个参数 resolve和reject，这两个参数都是Promise的回调函数，不需要自己写，在需要的时候调用就可以了，他们分别是成功的回调resolve和失败的回调reject。
   4.1 简易版 Promise
   第一步，先来搭建构建函数的大体框架
   首先创建三个常量用于表示状态，对于经常使用的一些值应该通过常量来管理，便于开发及后期维护
   在函数体内部首先创建常量that，因为代码可能会异步执行，用于获取正确的this对象
   一开始Promise的状态是 pending
   value 变量用于保存resolve或者reject中传入的值
   resolvedCallbacks和rejectedCallback用于保存then中的回调，因为当执行完Promise时状态可能还是等待中，这时候应该把then中的回调保存起来用于状态改变时使用
   第二步，完善resolve和reject函数，添加在 MyPromise 函数体内部
   首先两个函数都得判断当前状态是否为等待中，因为规范规定只有等待态才可以改变状态
   将当前状态更改为对应状态，并且将传入的值赋值给 value
   遍历回调数组并执行
   第四步，实现如何执行 Promise 中传入的函数了
   实现很简单，执行传入的参数并且将之前两个函数当做参数传进去
   要注意的是，可能执行函数过程中会遇到错误，需要捕获错误并且执行 reject 函数
   第五步，实现较为复杂的 then 函数。
   then函数是在Promise构造器中成功状态下调用的resolve方法的回调。
   then函数是可以接收两个参数的，一个是用户自定义的成功处理，另一个是用户自定义的错误处理，第二个参数可不传。
   首先判断两个参数是否为函数类型，因为这两个参数是可选参数
   当参数不是函数类型时，需要创建一个函数赋值给对应的参数，同时也实现了透传，比如如下代码
   接下来就是一系列判断状态的逻辑，当状态不是等待态时，就去执行相对应的函数。如果状态是等待态的话，就往回调函数中 push 函数，比如如下代码就会进入等待态的逻辑
   可参考：https://www.cnblogs.com/minigrasshopper/p/9141307.html
   5.ES6中常用的功能有哪些？
   let/const
   多行字符串/模板变量
   解构赋值
   块级作用域？【重点理解】
   函数默认参数
   箭头函数（this指向问题）
   5.1 var、let 及 const 区别？
   var声明的变量会挂载在window上，而let和const不会
   var声明变量存在变量提升，let和const不会
   let、const 的作用范围是块级作用域，而var的作用范围是函数作用域
   同一作用域下let和const不能声明同名变量，而var可以
   同一作用域下在let和const声明前使用会存在暂时性死区
   const
   一旦声明必须赋值,不能使用null占位
   声明后不能再修改
   如果声明的是复合类型数据，可以修改其属性
   5.2 Proxy
   Note
   Proxy 是 ES6 中新增的功能，它可以用来自定义对象中的操作。 Vue3.0 中将会通过 Proxy 来替换原本的 Object.defineProperty 来实现数据响应式。
   target 代表需要添加代理的对象，handler 用来自定义对象中的操作，比如可以用来自定义 set 或者 get 函数。
   Note
   自定义 set 和 get 函数的方式，在原本的逻辑中插入了我们的函数逻辑，实现了在对对象任何属性进行读写时发出通知。
   当然这是简单版的响应式实现，如果需要实现一个 Vue 中的响应式，需要我们在 get 中收集依赖，在 set 派发更新，之所以 Vue3.0 要使用 Proxy 替换原本的 API 原因在于 Proxy 无需一层层递归为每个属性添加代理，一次即可完成以上操作，性能上更好，并且原本的实现有一些数据更新不能监听到，但是 Proxy 可以完美监听到任何方式的数据改变，唯一缺陷可能就是浏览器的兼容性不好了。
   5.3 数组方法
   5.3.1 map
   Note
   map 作用是生成一个新数组，遍历原数组，将每个元素拿出来做一些变换然后返回一个新数组，原数组不发生改变。
   map 的回调函数接受三个参数，分别是当前索引元素，索引，原数组
   第一个 parseInt('1', 0) -> 1
   第二个 parseInt('2', 1) -> NaN
   第三个 parseInt('3', 2) -> NaN
   5.3.2 filter
   Note
   filter 的作用也是生成一个新数组，在遍历数组的时候将返回值为 true 的元素放入新数组，我们可以利用这个函数删除一些不需要的元素
   filter 的回调函数接受三个参数，分别是当前索引元素，索引，原数组
   5.3.3 reduce
   Note
   reduce 可以将数组中的元素通过回调函数最终转换为一个值。
   如果我们想实现一个功能将函数里的元素全部相加得到一个值，可能会这样写代码
   但是如果我们使用 reduce 的话就可以将遍历部分的代码优化为一行代码
   对于 reduce 来说，它接受两个参数，分别是回调函数和初始值，接下来我们来分解上述代码中 reduce 的过程
   首先初始值为 0，该值会在执行第一次回调函数时作为第一个参数传入
   回调函数接受四个参数，分别为累计值、当前元素、当前索引、原数组，后三者想必大家都可以明白作用，这里着重分析第一个参数
   在一次执行回调函数时，当前值和初始值相加得出结果 1，该结果会在第二次执行回调函数时当做第一个参数传入
   所以在第二次执行回调函数时，相加的值就分别是 1 和 2，以此类推，循环结束后得到结果 6。
   5.4 Es6中箭头函数与普通函数的区别？
   普通function的声明在变量提升中是最高的，箭头函数没有函数提升
   箭头函数没有属于自己的this，arguments
   箭头函数不能作为构造函数，不能被new，没有property
   call和apply方法只有参数，没有作用域
   5.5 Promise
   Promise 翻译过来就是承诺的意思，这个承诺会在未来有一个确切的答复，并且该承诺有三种状态，这个承诺一旦从等待状态变成为其他状态就永远不能更改状态了。
   等待中（pending）
   完成了（resolved）
   拒绝了（rejected）
   当我们在构造 Promise 的时候，构造函数内部的代码是立即执行的。
   Promise 实现了链式调用，也就是说每次调用 then 之后返回的都是一个 Promise，并且是一个全新的 Promise，原因也是因为状态不可变。如果你在 then 中 使用了 return，那么 return 的值会被 Promise.resolve() 包装。
   当然了，Promise 也很好地解决了回调地狱的问题
   其实它也是存在一些缺点的，比如无法取消 Promise，错误需要通过回调函数捕获。
   5.6 async 和 await
   一个函数如果加上 async ，那么该函数就会返回一个 Promise
   async 就是将函数返回值使用 Promise.resolve() 包裹了下，和 then 中处理返回值一样，并且 await 只能配套 async 使用。
   async 和 await 可以说是异步终极解决方案了，相比直接使用 Promise 来说，优势在于处理 then 的调用链，能够更清晰准确的写出代码，毕竟写一大堆 then 也很恶心，并且也能优雅地解决回调地狱问题。
   当然也存在一些缺点，因为 await 将异步代码改造成了同步代码，如果多个异步代码没有依赖性却使用了 await 会导致性能上的降低。
   看一个使用 await 的例子：
   首先函数 b 先执行，在执行到 await 10 之前变量 a 还是 0，因为 await 内部实现了 generator ，generator 会保留堆栈中东西，所以这时候 a = 0 被保存了下来
   因为 await 是异步操作，后来的表达式不返回 Promise 的话，就会包装成 Promise.reslove(返回值)，然后会去执行函数外的同步代码
   同步代码 a++ 与打印 a 执行完毕后开始执行异步代码，将保存下来的值拿出来使用，这时候 a = 0 + 10
   Note
   上述解释中提到了 await 内部实现了 generator，其实 await 就是 generator 加上 Promise 的语法糖，且内部实现了自动执行 generator。
   5.7 Generator 生成器
   首先 Generator 函数调用和普通函数不同，它会返回一个迭代器
   当执行第一次 next 时，传参会被忽略，并且函数暂停在 yield (x + 1) 处，所以返回 5 + 1 = 6
   当执行第二次 next 时，传入的参数等于上一个 yield 的返回值，如果你不传参，yield 永远返回 undefined。此时 let y = 2 12，所以第二个 yield 等于 2 12 / 3 = 8
   当执行第三次 next 时，传入的参数会传递给 z，所以 z = 13, x = 5, y = 24，相加等于 42
   5.8 生成器原理
   Note
   当yeild产生一个值后，生成器的执行上下文就会从栈中弹出。但由于迭代器一直保持着队执行上下文的引用，上下文不会丢失，不会像普通函数一样执行完后上下文就被销毁
   5.9 ES Module
   Note
   ES Module 是原生实现的模块化方案，与 CommonJS 有以下几个区别
   CommonJS 支持动态导入，也就是 require(${path}/xx.js)，后者目前不支持，但是已有提案
   CommonJS 是同步导入，因为用于服务端，文件都在本地，同步导入即使卡住主线程影响也不大。而后者是异步导入，因为用于浏览器，需要下载文件，如果也采用同步导入会对渲染有很大影响
   CommonJS 在导出时都是值拷贝，就算导出的值变了，导入的值也不会改变，所以如果想更新值，必须重新导入一次。但是 ES Module 采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会跟随导出值变化
   ES Module 会编译成 require/exports 来执行的
2. 箭头函数和普通函数的8点区别？
   6.1 不能作为构造函数
   箭头函数作为匿名函数,是不能作为构造函数的,不能使用new
   6.2 无arguments
   箭头函数不绑定arguments,取而代之用rest参数…解决
   6.3 没有自己的this
   箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值
   6.4 this环境
   箭头函数当方法使用的时候没有定义this绑定
   6.5 this不可以被修改
   使用call()和apply()调用, 通过 call() 或 apply() 方法调用一个函数时，只是传入了参数而已，对 this并没有什么影响
   6.6 箭头函数没有原型属性
   Plain Text
   复制代码

var a = ()=>{
return 1;
}

function b(){
return 2;
}

console.log(a.prototype);//undefined
console.log(b.prototype);//object{...}
6.7 不能当做Generator函数
箭头函数不能当做Generator函数,不能使用yield关键字
Plain Text
复制代码

var a = ()
// =>1; //SyntaxError: Unexpected token =>
6.8 箭头函数的this指向
箭头函数的this永远指向其上下文的 this，任何方法都改变不了其指向，如call(), bind(), apply(),普通函数的this指向调用它的那个对象
Plain Text
复制代码

var obj = {
say: function () {
// 箭头函数
var f1 = () => {
console.log(this); // obj
setTimeout(() => {
console.log(this); // obj
})
};
f1();
}
}

var obj = {
say: function () {
// 普通函数
var f1 = function () {
console.log(this); // window, f1调用时,没有宿主对象,默认是window
setTimeout(() => {
console.log(this); // window
})
};
f1();
}