字节网上面经整理（100道面试题）二篇

古城微笑少年丶 2023-09-23 14:38 132阅读 0赞

51、说说js异步加载。  
52、说说CSS3的剪切属性。  
background-clip ：表示背景图片从哪儿截断不显示，border-box(默认值)/padding-box/content-box/text（用文字的部分截背景图片，除了文字体的区域展示背景图片，其他都不展示，只有在-webkit下好使（-webkit-4/background-clip），要配合-webkit-text-fill-color:transparent使用,此时文字变成了背景的一部分，文字阴影在背景的上面）  
53、用typeof能检测的8种值。  
String Number Boolean Object fuction null undefined Symbol  
54、为什么出现浮动，如何清除浮动？  
浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。  
清除浮动方法：  
1.给父元素加上display:inline-block  
2.使用伪元素  
3.给父元素添加overflow:hidden  
4.添加一个clear样式  
55、说说你知道的垂直居中的方法。  
56、如何在一个图片列表使用懒加载进行性能优化。  
57、说说原型链。  
58、说说三栏布局。  
59、数组和链表的区别。  
数组的存储区间是连续的，存储数据之前需要先申请一个存储空间，数组的增加和删除比较困难，查找比较简单，数组的空间是从栈分配的。  
链表的存储空间是分散的，可以在任何地方，链表中的元素有两个属性，一个是值，一个是指针，存储空间不需要指定大小，是动态申请的，空间是从堆分配的。  
60、说说ES6有哪些新增的东西。  
61、说说贪心算法和分治算法。  
贪心算法是解决问题的时候总是选择最好的，并希望通过一系列的最优选择，选择问题的全局最优解。  
分治算法：把一个复杂的问题分成相同或相似的子问题，再把小问题分词更小的问题，直到最后的小问题可以简单的求解，然后把处理结果合并。  
61、说说进程和线程，进程间通信的方法。调度算法。  
进程是资源分配的最小单位，线程是程序执行的最小单位。  
进程有自己的独立地址空间，每启动一个进程，系统就会为它分配地址空间，建立数据表来维护代码段、堆栈段和数据段，这种操作非常昂贵。而线程是共享进程中的数据的，使用相同的地址空间，因此CPU切换一个线程的花费远比进程要小很多，同时创建一个线程的开销也比进程要小很多。  
线程之间的通信更方便，同一进程下的线程共享全局变量、静态变量等数据，而进程之间的通信需要以通信的方式（IPC)进行。不过如何处理好同步与互斥是编写多线程程序的难点。  
但是多进程程序更健壮，多线程程序只要有一个线程死掉，整个进程也死掉了，而一个进程死掉并不会对另外一个进程造成影响，因为进程有自己独立的地址空间。  
进程间的通信方法：管道，消息队列，共享内存，信号量，socket，信号，文件锁。  
调度算法：操作系统常见的调度算法  
62、说说cookie session.  
63、写一个深克隆。

//防抖 隔段时间之后才执行  
function debounce(callback, wait) \{  
var timer;  
return function () \{  
var self = this;  
var arg = arguments;  
clearTimeout(timer);  
timer = setTimeout(function () \{  
callback.apply(self, arg);  
\}, wait)  
\}

\}  
//节流 如果大于或等于规定的时间就执行  
function thorttle(callback, wait) \{  
var time  
var self = this;  
return function () \{  
if (!time || Date.now() - time > wait) \{  
callback.apply(self, arguments);  
time = Date.now();  
\}  
\}  
\}

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
65、写一个函数，使得sum(1,2,3).valueOf的值和sum(1)(2)(3).valueOf的值相等。（考察柯里化）。

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
//柯里化 固定函数的某些参数，得到该函数剩余参数返回的新函数，如果没有剩余参数则调用  
function curry(callback)\{  
var self = this;  
var args = Array.prototype.slice.call(arguments,1);  
return function()\{  
var curArgs = Array.from(arguments);//当前调用的参数  
var totalArgs = args.concat(curArgs);//所有参数  
if(totalArgs.length >= callback.length)\{  
//没有剩余参数了就调用  
callback.apply(null,totalArgs);  
\}else\{  
//还有参数  
totalArgs.unshift(callback);  
self.curry.callback(self,totalArgs);  
\}  
\}  
\}

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
66、写一个Event Bus。  
组件通信，一个触发与监听的过程

//实现一个Eventbus 事件的监听和触发  
class EventEmitter \{  
constructor() \{  
//存储事件  
this.events = this.events || new Map();  
\}  
//监听事件  
addListener(type, fn) \{  
if (!this.events.get(type)) \{  
this.events.set(type, fn);  
\}  
\}  
//触发事件  
emit(type)\{  
let handle = this.events.get(type);  
handle.apply(this,\[...arguments\].slice(1));  
\}  
\}

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
67、写jsonp原理。  
68、用promise封装ajax。

69、手写实现promise/promise.all。

class MyPromise \{  
constructor(fn) \{  
this.state = "pending";  
this.value = undefined;  
let resolve = data => \{  
if (this.state !== "pending") \{  
return;  
\}  
this.state = "resolve";  
this.value = data;  
\}  
let reject = reason => \{  
if (this.state !== "pending") \{  
return;  
\}  
this.state = "rejected";  
this.value = reason;  
\}  
try \{  
fn(resolve, reject);  
\} catch (err) \{  
reject(err);  
\}  
\}  
//then  
then(onResolved, onRejected) \{  
switch (this.state) \{  
case "resolved":  
onResolved(this.value);  
break;  
case "rejected":  
onRejected(this.value);  
break;  
default:  
break;  
\}  
\}  
\}

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
33  
34  
35  
36  
37  
38  
70、用reduce实现map。

71、写一个函数实现第i次执行输出i。

var test = (function()\{  
var i=0;  
return function()\{  
return i++;  
\}  
\})();  
console.log(test());  
console.log(test());  
1  
2  
3  
4  
5  
6  
7  
8  
72、写一个函数实现大数相加。

73、实现一个双向数据绑定。

//实现一个双向数据绑定  
var input = document.getElementById('input');  
var span = document.getElementById('span');  
var obj = \{\};  
Object.defineProperty(obj,'text',\{  
enumerable:true,  
configurable:true,  
get()\{  
console.log('数据更新了');  
\},  
set(newVal)\{  
input.value = newVal;  
span.innerHTML = newVal;  
\}  
\})  
input.addEventListener('keyup',function(e)\{  
obj.text = e.target.value;  
\})

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
74、如何判断一行汉字有没有出现省略号。  
75、手动实现Array.reduce()  
76、实现bind。

//实现bind  
//目标函数和原函数的参数要结合  
//返回一个新函数  
//当new的时候，构造函数依然是A，不是你的目标对象，  
function myBind(target)\{  
var self = this;  
var args = \[\].slice.call(arguments,1);  
var tmp = function()\{\};  
var fn = function()\{  
var arg = \[\].slice.call(arguments,0);  
//检测this的原型链上有没有tmp构造函数的原型  
self.apply(this instanceof tmp ? this : (target|| window),args.concat(arg));  
\}  
tmp.prototype = self.prototype;  
fn.prototype = new tmp();  
return fn;  
\}

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
77、如何实现回型数组。  
78、手写匹配URL的正则，包括协议、域名、端口、path、hash、queryString。  
79、跳台阶问题。一次可以跳1个或者2个，有多少种跳法。  
80、实现一个双向链表。  
81、寻找2个二叉树节点的第一个公共父节点。  
82、找出二叉树第k小的节点。  
83、写出二叉树的后序遍历。  
84、2个有序链表去重合并。  
85、根据时间按顺序每秒钟输出一个元素寄下标。  
86、查找最长无重复字符串。  
87、CSS实现一个模态窗口，从下面向上弹的动画。  
88、说说rem和em区别。  
89、说说盒模型。  
90、CSS实现三角形原理？写一个  
91、一个页面2个Tab键，点击可以切换不同内容。  
92、git merge和git rabase的区别。  
git merge：将两个分支，合并提交为一个新提交，并且新提交有2个parent。  
git rebase：会取消分支中的每个提交，并把他们临时存放，然后把当前分支更新到最新的origin分支，最后再把所有提交应用到分支上。  
93、单行和多行的css省略号。  
94、promise捕获错误的方式。  
promise中捕获错误用try catch,但是它只能捕获到同步的错误，异步错误类似于setTimeout无法捕获到。在then的第一个函数里抛出的错误，在catch里可以捕获到，第二个函数抛出错误后面的catch不能捕获到。  
95、用过jest单元测试吗？  
96、说说项目中的移动端适配。  
97、content-type：From-data、json等 及其之间的区别。

后台需要Form-data(表单数据)，传送的数据为key:value。  
json：请求格式是一个json的字符串，后台需要json格式的数据。  
x-www-form-urlencoded：当action为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2…），然后把这个字串append到url后面，用?分割，加载这个新的url。  
multipart/form-data：enctype="multipart/form-data"是上传二进制数据;它告诉我们传输的数据要用到多媒体传输协议，由于多媒体传输的都是大量的数据，所以规定上传文件必须是post方法，的type属性必须是file。  
98、H5 request animation.frame。  
99、自己实现new函数。

function createNew()\{  
let obj = \{\};//创建一个新对象  
//将第一个参数拿出来  
let constructor = \[\].shift.call(arguments);  
//连接到原型链  
obj.\_\_proto\_\_ = constructor.prototype;  
//绑定this值  
let result = constructor.apply(obj,arguments);  
//返回新对象  
return typeof result === "object" ? result : obj;  
\}  
1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
100、vuex的mutation和action的区别，为什么要设立两个而不是直接都用mutation操作state。  
“相应视图---->修改state”，拆分成两部分，视图触发action,action再触发mutation。mutation专注于修改state，理论上是修改state的唯一途径，action是处理业务代码，异步请求。mutation是同步实现对state状态的更改，action是异步通过提交一个mutation让其更改state状态。