刷《一年半经验,百度、有赞、阿里面试总结》·手记 (4)

代码实现:

const swap = (arr, i, j) => { let tmp = arr[i] arr[i] = arr[j] arr[j] = tmp } const permutation = arr => { const _permutation = (arr, start) => { if(start === arr.length){ console.log(arr) return } for(let i = start; i < arr.length; ++i){ // 全排列:去重操作 if(arr.slice(start, i).indexOf(arr[i]) !== -1){ continue } swap(arr, i, start) // 和开始元素进行交换 _permutation(arr, start + 1) swap(arr, i, start) // 恢复数组 } return } return _permutation(arr, 0) } permutation([1, 2, 2]) console.log("**********") permutation([1, 2, 3, 4]) 4.2 背包问题

题目:我现在有一个背包,容量为m,然后有n个货物,重量分别为w1,w2,w3...wn,每个货物的价值是v1,v2,v3...vn,w和v没有任何关系,请求背包能装下的最大价值。

这个还在学习中,背包问题博大精深。。。

4.3 图的连通分量

题目:我现在有一个canvas,上面随机布着一些黑块,请实现方法,计算canvas上有多少个黑块。

这一题可以转化成图的联通分量问题。通过getImageData获得像素数组,从头到尾遍历一遍,就可以判断每个像素是否是黑色。同时,准备一个width * height大小的二维数组,这个数组的每个元素是1/0。如果是黑色,二维数组对应元素就置1;否则置0。

然后问题就被转换成了图的连通分量问题。可以通过深度优先遍历或者并查集来实现。之前我用C++实现了,这里不再冗赘:

并查集

5. Web工程化 5.1 Dialog组件思路

题目:现在要你完成一个Dialog组件,说说你设计的思路?它应该有什么功能?

可以指定宽度、高度和位置

需要一个遮盖层,遮住底层内容

由头部、尾部和正文构成

需要监听事件和自定义事件,非单向数据流:例如点击组件右上角,修改父组件的visible属性,关闭组件。

关于工程化组件封装,可以去试试ElementUI。这个是ElementUI的Dialog组件:

5.2 React的Diff算法和虚拟DOM

题目: react 的虚拟dom是怎么实现的

原答案写的挺好滴,这里直接贴了。

首先说说为什么要使用Virturl DOM,因为操作真实DOM的耗费的性能代价太高,所以react内部使用js实现了一套dom结构。 在每次操作在和真实dom之前,使用实现好的diff算法,对虚拟dom进行比较,递归找出有变化的dom节点,然后对其进行更新操作。 为了实现虚拟DOM,我们需要把每一种节点类型抽象成对象,每一种节点类型有自己的属性,也就是prop,每次进行diff的时候,react会先比较该节点类型: 假如节点类型不一样,那么react会直接删除该节点,然后直接创建新的节点插入到其中; 假如节点类型一样,那么会比较prop是否有更新,假如有prop不一样,那么react会判定该节点有更新,那么重渲染该节点,然后在对其子节点进行比较,一层一层往下,直到没有子节点。

参考链接:React源码之Diff算法

最后,欢迎来我的博客和我扯犊子:godbmw.com。直接戳本篇原文的地址:刷《一年半经验,百度、有赞、阿里面试总结》·手记

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

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