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