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

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 deepClone(obj){
    var tmp = obj instanceof Array ? [] : {};
    for(let key in obj){
        if(obj.hasOwnProperty(key)){
            tmp[key] = typeof obj[key] === "Object" ? deepClone(obj[key]) : obj[key];
        }
    }
    return tmp;
}
1
2
3
4
5
6
7
8
9
64、写一个防抖或者节流函数。

 //防抖  隔段时间之后才执行
        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的值相等。（考察柯里化）。

 function sum(a, b, c) {
            if (arguments[1]) {//如果存在第二个参数
                var result = 0;
                if (arguments.length > 0) {
                    for (let i = 0; i < arguments.length; i++) {
                        result += arguments[i];
                    }
                }
                return result;
            } else {
                return function (b) {
                    return function (c) {
                        return a + b + c;
                    }
                }
            }
        }

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状态。