2020 web前端面试题及答案大全 (2)

调用后返回指向内部状态的指针, 调用next()才会移向下一个状态, 参数:

hw.next()// { value: \'hello\', done: false }hw.next()// { value: \'world\', done: false }hw.next()// { value: \'ending\', done: true }hw.next()// { value: undefined, done: true }

3. 手写Promise实现

var myPromise = new Promise((resolve, reject) => { // 需要执行的代码 ... if (/* 异步执行成功 */) { resolve(value) } else if (/* 异步执行失败 */) { reject(error) }}) myPromise.then((value) => { // 成功后调用, 使用value值}, (error) => { // 失败后调用, 获取错误信息error})

4. Promise优缺点

优点: 解决回调地狱, 对异步任务写法更标准化与简洁化

缺点: 首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消; 其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部; 第三，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成).
极简版promise封装:

function promise () { this.msg = \'\' // 存放value和error this.status = \'pending\' var that = this var process = arguments[0] process (function () { that.status = \'fulfilled\' that.msg = arguments[0] }, function () { that.status = \'rejected\' that.msg = arguments[0] }) return this} promise.prototype.then = function () { if (this.status === \'fulfilled\') { arguments[0](this.msg) } else if (this.status === \'rejected\' && arguments[1]) { arguments[1](this.msg) }}

5. 观察者模式

又称发布-订阅模式, 举例子说明.
实现: 发布者管理订阅者队列, 并有新消息推送功能. 订阅者仅关注更新就行

6. 手写实现bind

Function.prototype.bind = function () { // 保存原函数 var self = this // 取出第一个参数作为上下文, 相当于[].shift.call(arguments) var context = Array.prototype.shift.call(arguments) // 取剩余的参数作为arg; 因为arguments是伪数组, 所以要转化为数组才能使用数组方法 var arg = Array.prototype.slice.call(arguments) // 返回一个新函数 return function () { // 绑定上下文并传参 self.apply(context, Array.prototype.concat.call(arg, Array.prototype.slice.call(arguments))) }}

7. 手写实现4种继承

function Father () {}function Child () {}// 1\. 原型继承Child.prototype = new Father()// 2\. 构造继承function Child (name) { Father.call(this, name)}// 3\. 组合继承function Child (name) { Father.call(this, name)}Child.prototype = new Father()// 4\. 寄生继承function cloneObj (o) { var clone = object.create(o) clone.sayName = ... return clone}// 5\. 寄生组合继承// 6\. ES6 class extend继承

8. css菊花图

四个小圆点一直旋转

// 父标签animation: antRotate 1.2s infinite linear;// 子标签animation: antSpin 1s infinite linear;@keyframe antSpin { to { opacity: 1 }}@keyframe antRotate { to { transform: rotate(405) }}// animation-delay: 逐个延迟0.4s

9. http状态码

1**: 服务器收到请求, 需请求者进一步操作

2**: 请求成功

3**: 重定向, 资源被转移到其他URL了

4**: 客户端错误, 请求语法错误或没有找到相应资源

5**: 服务端错误, server error

304: Not Modified. 指定日期后未修改, 不返回资源

10. Object.create实现（原型式继承，特点：实例的proto指向构造函数本身）

11. async和await：

Generator函数的语法糖，将*改成async，将yield换成await。

是对Generator函数的改进, 返回promise。

异步写法同步化，遇到await先返回，执行完异步再执行接下来的.

内置执行器, 无需next()

12. 算法和数据结构：

算法：
解决具体问题所需要的解决方法。执行效率最快的最优算法。时间复杂度。输入，输出，有穷性，确定性，可行性。冒泡排序，二叉树遍历，最长回文，二分查找，指针，链表等，堆栈，队列等。力扣，codewar，算法导论。

数据结构：
逻辑结构：集合、线性、树形、图形结构
物理结构：顺序、链式存储结构

13. 封装JSONP

function jsonp ({url, param, callback}) { return new Promise((resolve, reject) => { var script = document.createElement(\'script\') window.callback = function (data) { resolve(data) document.body.removeChild(\'script\') } var param = {...param, callback} var arr = [] for (let key in param) { arr.push(`${key}=${param[key]}`) } script.src = `${url}?${arr.join(\'&\')}` document.body.appendChild(script) })}