免费网站软件下载,如何做网站网页流程,如何制作网站的步骤,怎样创建一个自己的网站近日#xff0c;GitHub上一位名为木易杨#xff08;yygmind#xff09;的开发者#xff0c;在 GitHub 中建了一个名为Advanced-Frontend/Daily-Interview-Question项目#xff0c;该项目每天会更新一道前端大厂面试题#xff0c;并邀请开发者在issue区中作答#xff0c;…近日GitHub上一位名为木易杨yygmind的开发者在 GitHub 中建了一个名为Advanced-Frontend/Daily-Interview-Question项目该项目每天会更新一道前端大厂面试题并邀请开发者在issue区中作答以下是我们从该项目中挑选的9道题和答案希望能给大家一些帮助。
GitHub链接https://github.com/Advanced-Frontend/Daily-Interview-Question
1.写 React/Vue 项目时为什么要在组件中写 key其作用是什么
key的作用是为了在diff算法执行时更快的找到对应的节点提高diff速度。
vue和react都是采用diff算法来对比新旧虚拟节点从而更新节点。在vue的diff函数中。可以先了解一下diff算法。
在交叉对比的时候当新节点跟旧节点头尾交叉对比没有结果的时候会根据新节点的key去对比旧节点数组中的key从而找到相应旧节点这里对应的是一个key \u0026gt; index 的map映射。如果没找到就认为是一个新增节点。而如果没有key那么就会采用一种遍历查找的方式去找到对应的旧节点。一种一个map映射另一种是遍历查找。相比而言。map映射的速度更快。
vue部分源码如下
// vue项目 src/core/vdom/patch.js -488行// oldCh 是一个旧虚拟节点数组 if (isUndef(oldKeyToIdx)) oldKeyToIdx createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx) idxInOld isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
创建map函数
function createKeyToOldIdx (children, beginIdx, endIdx) { let i, key const map {} for (i beginIdx; i \u0026lt; endIdx; i) { key children[i].key if (isDef(key)) map[key] i } return map}
遍历寻找
// sameVnode 是对比新旧节点是否相同的函数 function findIdxInOld (node, oldCh, start, end) { for (let i start; i \u0026lt; end; i) { const c oldCh[i] if (isDef(c) \u0026amp;\u0026amp; sameVnode(node, c)) return i } }
本题链接https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/1
2. 解析[‘1’, ‘2’, ‘3’].map(parseInt)
第一眼看到这个题目的时候脑海跳出的答案是 [1, 2, 3]但是真正的答案是[1, NaN, NaN]。
首先让我们回顾一下map函数的第一个参数callback
var new_array arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array }[, thisArg])
这个callback一共可以接收三个参数其中第一个参数代表当前被处理的元素而第二个参数代表该元素的索引。
而parseInt则是用来解析字符串的使字符串成为指定基数的整数。
parseInt(string, radix)接收两个参数第一个表示被处理的值字符串第二个表示为解析时的基数。
了解这两个函数后我们可以模拟一下运行情况
parseInt(‘1’, 0) //radix为0时且string参数不以“0x”和“0”开头时按照10为基数处理。这个时候返回1parseInt(‘2’, 1) //基数为11进制表示的数中最大值小于2所以无法解析返回NaNparseInt(‘3’, 2) //基数为22进制表示的数中最大值小于3所以无法解析返回NaN。
map函数返回的是一个数组所以最后结果为[1, NaN, NaN]。最后附上MDN上对于这两个函数的链接具体参数大家可以到里面看https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInthttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map
本题链接
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/4
3.什么是防抖和节流有什么区别如何实现
防抖
触发高频事件后n秒内函数只会执行一次如果n秒内高频事件再次被触发则重新计算时间思路
每次触发事件时都取消之前的延时调用方法function debounce(fn) { let timeout null; // 创建一个标记用来存放定时器的返回值 return function () { clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉 timeout setTimeout(() \u0026gt; { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话就不会执行 fn 函数 fn.apply(this, arguments); }, 500); }; } function sayHi() { console.log(防抖成功); } var inp document.getElementById(inp); inp.addEventListener(input, debounce(sayHi)); // 防抖
2.节流
高频事件触发但在n秒内只会执行一次所以节流会稀释函数的执行频率。思路
每次触发事件时都判断当前是否有等待执行的延时函数。function throttle(fn) { let canRun true; // 通过闭包保存一个标记 return function () { if (!canRun) return; // 在函数开头判断标记是否为true不为true则return canRun false; // 立即设置为false setTimeout(() \u0026gt; { // 将外部传入的函数的执行放在setTimeout中 fn.apply(this, arguments); // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false在开头被return掉 canRun true; }, 500); }; } function sayHi(e) { console.log(e.target.innerWidth, e.target.innerHeight); } window.addEventListener(resize, throttle(sayHi));
本题链接https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/5
4.介绍下 Set、Map、WeakSet 和 WeakMap 的区别
Set
成员唯一、无序且不重复[value, value]键值与键名是一致的或者说只有键值没有键名可以遍历方法有add、delete、has。
WeakSet
成员都是对象成员都是弱引用可以被垃圾回收机制回收可以用来保存DOM节点不容易造成内存泄漏不能遍历方法有add、delete、has。
Map
本质上是键值对的集合类似集合可以遍历方法很多可以跟各种数据格式转换。
WeakMap
只接受对象最为键名null除外不接受其他类型的值作为键名键名是弱引用键值可以是任意的键名所指向的对象可以被垃圾回收此时键名是无效的不能遍历方法有get、set、has、delete。
本题链接https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/6
5.介绍下深度优先遍历和广度优先遍历如何实现
深度优先遍历DFS
深度优先遍历Depth-First-Search是搜索算法的一种它沿着树的深度遍历树的节点尽可能深地搜索树的分支。当节点v的所有边都已被探寻过将回溯到发现节点v的那条边的起始节点。这一过程一直进行到已探寻源节点到其他所有节点为止如果还有未被发现的节点则选择其中一个未被发现的节点为源节点并重复以上操作直到所有节点都被探寻完成。
简单的说DFS就是从图中的一个节点开始追溯直到最后一个节点然后回溯继续追溯下一条路径直到到达所有的节点如此往复直到没有路径为止。
DFS 可以产生相应图的拓扑排序表利用拓扑排序表可以解决很多问题例如最大路径问题。一般用堆数据结构来辅助实现DFS算法。
注意深度DFS属于盲目搜索无法保证搜索到的路径为最短路径也不是在搜索特定的路径而是通过搜索来查看图中有哪些路径可以选择。
步骤
访问顶点v依次从v的未被访问的邻接点出发对图进行深度优先遍历直至图中和v有路径相通的顶点都被访问若此时途中尚有顶点未被访问则从一个未被访问的顶点出发重新进行深度优先遍历直到所有顶点均被访问过为止。
实现
Graph.prototype.dfs function() { var marked [] for (var i0; i\u0026lt;this.vertices.length; i) { if (!marked[this.vertices[i]]) { dfsVisit(this.vertices[i]) } } function dfsVisit(u) { let edges this.edges marked[u] true console.log(u) var neighbors edges.get(u) for (var i0; i\u0026lt;neighbors.length; i) { var w neighbors[i] if (!marked[w]) { dfsVisit(w) } } }}
测试
graph.dfs()// 1// 4// 3// 2// 5
测试成功。
广度优先遍历BFS
广度优先遍历Breadth-First-Search是从根节点开始沿着图的宽度遍历节点如果所有节点均被访问过则算法终止BFS 同样属于盲目搜索一般用队列数据结构来辅助实现BFS。
BFS从一个节点开始尝试访问尽可能靠近它的目标节点。本质上这种遍历在图上是逐层移动的首先检查最靠近第一个节点的层再逐渐向下移动到离起始节点最远的层。
步骤
创建一个队列并将开始节点放入队列中若队列非空则从队列中取出第一个节点并检测它是否为目标节点若是目标节点则结束搜寻并返回结果若不是则将它所有没有被检测过的字节点都加入队列中若队列为空表示图中并没有目标节点则结束遍历。
实现
Graph.prototype.bfs function(v) { var queue [], marked [] marked[v] true queue.push(v) // 添加到队尾 while(queue.length \u0026gt; 0) { var s queue.shift() // 从队首移除 if (this.edges.has(s)) { console.log(visited vertex: , s) } let neighbors this.edges.get(s) for(let i0;i\u0026lt;neighbors.length;i) { var w neighbors[i] if (!marked[w]) { marked[w] true queue.push(w) } } }}
测试
graph.bfs(1)// visited vertex: 1// visited vertex: 4// visited vertex: 3// visited vertex: 2// visited vertex: 5
测试成功。
本题链接https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/9
6.异步笔试题
请写出下面代码的运行结果
// 今日头条面试题async function async1() { console.log(async1 start) await async2() console.log(async1 end)}async function async2() { console.log(async2)}console.log(script start)setTimeout(function () { console.log(settimeout)})async1()new Promise(function (resolve) { console.log(promise1) resolve()}).then(function () { console.log(promise2)})console.log(script end)
题目的本质就是考察setTimeout、promise、async await的实现及执行顺序以及JS的事件循环的相关问题。
答案
script startasync1 startasync2promise1script endasync1 endpromise2settimeout
过程详解链接https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7
7.将数组扁平化并去除其中重复数据最终得到一个升序且不重复的数组
Array.from(new Set(arr.flat(Infinity))).sort((a,b)\u0026gt;{ return a-b})
本题链接https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/8
8.JS异步解决方案的发展历程以及优缺点。
1. 回调函数callback
setTimeout(() \u0026gt; { // callback 函数体}, 1000)
缺点回调地狱不能用 try catch 捕获错误不能 return
回调地狱的根本问题在于
缺乏顺序性 回调地狱导致的调试困难和大脑的思维方式不符嵌套函数存在耦合性一旦有所改动就会牵一发而动全身即控制反转嵌套函数过多的多话很难处理错误。
ajax(XXX1, () \u0026gt; { // callback 函数体 ajax(XXX2, () \u0026gt; { // callback 函数体 ajax(XXX3, () \u0026gt; { // callback 函数体 }) })})
优点解决了同步的问题只要有一个任务耗时很长后面的任务都必须排队等着会拖延整个程序的执行。
2. Promise
Promise就是为了解决callback的问题而产生的。
Promise 实现了链式调用也就是说每次 then 后返回的都是一个全新 Promise如果我们在 then 中 return return 的结果会被 Promise.resolve() 包装。
优点解决了回调地狱的问题。
ajax(XXX1) .then(res \u0026gt; { // 操作逻辑 return ajax(XXX2) }).then(res \u0026gt; { // 操作逻辑 return ajax(XXX3) }).then(res \u0026gt; { // 操作逻辑 })
缺点无法取消 Promise 错误需要通过回调函数来捕获。
3. Generator
特点可以控制函数的执行可以配合 co 函数库使用。
function *fetch() { yield ajax(XXX1, () \u0026gt; {}) yield ajax(XXX2, () \u0026gt; {}) yield ajax(XXX3, () \u0026gt; {})}let it fetch()let result1 it.next()let result2 it.next()let result3 it.next()
4. Async/await
async、await 是异步的终极解决方案。
优点是代码清晰不用像 Promise 写一大堆 then 链处理了回调地狱的问题
缺点await 将异步代码改造成同步代码如果多个异步操作没有依赖性而使用 await 会导致性能上的降低。
async function test() { // 以下代码没有依赖性的话完全可以使用 Promise.all 的方式 // 如果有依赖性的话其实就是解决回调地狱的例子了 await fetch(XXX1) await fetch(XXX2) await fetch(XXX3)}
下面来看一个使用 await 的例子
let a 0let b async () \u0026gt; { a a await 10 console.log(2, a) // -\u0026gt; 2 10}b()aconsole.log(1, a) // -\u0026gt; 1 1
对于以上代码你可能会有疑惑让我来解释下原因
首先函数 b 先执行在执行到 await 10 之前变量 a 还是 0因为 await 内部实现了 generator generator 会保留堆栈中东西所以这时候 a 0 被保存了下来因为 await 是异步操作后来的表达式不返回 Promise 的话就会包装成 Promise.reslove(返回值)然后会去执行函数外的同步代码同步代码执行完毕后开始执行异步代码将保存下来的值拿出来使用这时候 a 0 10。
上述解释中提到了 await 内部实现了 generator其实 await 就是 generator 加上 Promise的语法糖且内部实现了自动执行 generator。如果你熟悉 co 的话其实自己就可以实现这样的语法糖。
本题链接https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/11
9.谈谈你对TCP三次握手和四次挥手的理解本题链接https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/15
更多内容请关注前端之巅。
会议推荐
2019年6月GMTC全球大前端技术大会2019即将到来。小程序、Flutter、移动AI、工程化、性能优化…大前端的下一站在哪里点击下图了解更多详情。
