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

14. 手动实现map(forEach以及filter也类似)

// for循环实现Array.prototype.myMap = function () { var arr = this var [fn, thisValue] = Array.prototype.slice.call(arguments) var result = [] for (var i = 0; i < arr.length; i++) { result.push(fn.call(thisValue, arr[i], i, arr)) } return result}var arr0 = [1, 2, 3]console.log(arr0.myMap(v => v + 1)) // forEach实现(reduce类似)Array.prototype.myMap = function (fn, thisValue) { var result = [] this.forEach((v, i, arr) => { result.push(fn.call(thisValue, v, i, arr)) }) return result}var arr0 = [1, 2, 3]console.log(arr0.myMap(v => v + 1))

15. js实现checkbox全选以及反选

<body> <button>反选</button> <input type="checkbox" />全选 <input type="checkbox" />1 <input type="checkbox" />2 <input type="checkbox" />3 <script> var checkbox = document.getElementsByClassName(\'check\') var checkAll = document.getElementById(\'all\') var checkOther = document.getElementById(\'other\') checkAll.onclick = function() { var flag = true for (var i = 0; i < checkbox.length; i++) { if (!checkbox[i].checked) flag = false } if (flag) { for (var i = 0; i < checkbox.length; i++) { checkbox[i].checked = false } } else { for (var i = 0; i < checkbox.length; i++) { checkbox[i].checked = true } } } checkOther.onclick = function() { for (var i = 0; i < checkbox.length; i++) { checkbox[i].checked = !checkbox[i].checked } }</script> </body>

16. 对原型链的理解?prototype上都有哪些属性

在js里,继承机制是原型继承。继承的起点是 对象的原型(Object prototype)。

一切皆为对象,只要是对象,就会有 proto 属性,该属性存储了指向其构造的指针。

Object prototype也是对象,其 proto 指向null。

对象分为两种:函数对象和普通对象,只有函数对象拥有『原型』对象(prototype)。

prototype的本质是普通对象。

Function prototype比较特殊,是没有prototype的函数对象。

new操作得到的对象是普通对象。

当调取一个对象的属性时,会先在本身查找,若无,就根据 proto 找到构造原型,若无,继续往上找。最后会到达顶层Object prototype,它的 proto 指向null,均无结果则返回undefined,结束。

由 proto 串起的路径就是『原型链』。

通过prototype可以给所有子类共享属性

17. 为什么使用继承

通常在一般的项目里不需要,因为应用简单,但你要用纯js做一些复杂的工具或框架系统就要用到了,比如webgis、或者js框架如jquery、ext什么的,不然一个几千行代码的框架不用继承得写几万行,甚至还无法维护。

18. setTimeout时间延迟为何不准

单线程, 先执行同步主线程, 再执行异步任务队列

19. 事件循环述,宏任务和微任务有什么区别?

先主线程后异步任务队列

先微任务再宏任务

20. let const var作用域

块级作用域, 暂时性死区

21. 节流和防抖

函数节流是指一定时间内js方法只跑一次。比如人的眨眼睛,就是一定时间内眨一次。这是函数节流最形象的解释。

// 函数节流 滚动条滚动var canRun = true;document.getElementById("throttle").onscroll = function(){ if(!canRun){ // 判断是否已空闲,如果在执行中,则直接return return; } canRun = false; setTimeout(function(){ console.log("函数节流"); canRun = true; }, 300);};

函数防抖是指频繁触发的情况下,只有足够的空闲时间,才执行代码一次。比如生活中的坐公交,就是一定时间内,如果有人陆续刷卡上车,司机就不会开车。只有别人没刷卡了,司机才开车。

// 函数防抖var timer = false;document.getElementById("debounce").onscroll = function(){ clearTimeout(timer); // 清除未执行的代码,重置回初始化状态 timer = setTimeout(function(){ console.log("函数防抖"); }, 300);};

22. 实现一个sleep函数

// 这种实现方式是利用一个伪死循环阻塞主线程。因为JS是单线程的。所以通过这种方式可以实现真正意义上的sleep()。function sleep(delay) { var start = (new Date()).getTime(); while ((new Date()).getTime() - start < delay) { continue; }} function test() { console.log(\'111\'); sleep(2000); console.log(\'222\');} test()

23. 闭包

概念: 内层函数能够访问外层函数作用域的变量

缺点: 引起内存泄漏(释放内存)

作用:

使用闭包修正打印值

实现柯里化

实现node commonJs 模块化, 实现私有变量

保持变量与函数活性, 可延迟回收和执行

24. Immutable.js

Facebook出品, 倡导数据的不可变性, 用的最多就是List和Map.

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwwfxg.html