首页 > 快手电商生态前端实习一面面经
头像
Red_Ferrari
编辑于 2021-04-05 21:36
+ 关注

快手电商生态前端实习一面面经

自我介绍

怎么学习前端的



看过红宝书,js有几种数据类型

7种基本数据类型: 基本类型(单类型): String、Number、boolean、null、undefined,新的ES6 symbol,更新的Bigint

引用类型:Object



引用类型有哪些具体类型?怎么区分,怎么存储的

只记得Array、Function了(还有Data、RegExp,Number、String也可以作为引用类型,下面问到了),使用object.prototype.toString得到"[object XXX]"判断,通过地址指向内存中的堆空间



var a = new String('')和var a = ''区别

前者对象,后者字符串



=== 和 ==区别

前者类型要相同,后者不需要,后者包含类型转换,主要包括Number、String和bool类型的转换



输出结果是多少?

```
let a = {
age: 1
}
let b = a
a.age = 2
console.log(b.age)
```

2,原因是引用类型,浅拷贝,复制的是地址



怎么样实现深拷贝

最简单方法,利用JSON.stringify和JSON.parse方法,只适用于对象内部无引用类型的情况

递归实现,讲了思路



Symbol是什么,你用过symbol

唯一的对象,手写call、apply时使用,防止属性属性冲突



讲一讲JS的变量提升

包括变量声明提升和函数声明提升,必须是var 声明的一般变量

输出多少

```
var foo = 1;
function bar() {
if (!foo) {
var foo = 10;
}
console.log(foo);
}
bar();
```

我错的离谱,写的结果是1?

分步打印找到原因

```
var foo = 1;
function bar() {
console.log(foo); // undefined
console.log(this.foo); // 1
if (!foo) {
console.log(foo); // undefined
var foo = 10; // 变量提升
}
console.log(foo); // 10
}
bar();
console.log(foo); // 1
```



又做错了,菜鸡痛哭

```
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
console.log(a);
```

输出 10?

```
var a = 1;
function b() {
console.log(a); // f(){}
a = 10;
console.log(a); // 10
return;
function a() {}
}
b();
console.log(a); // 1
```

面试官看我不会,换了道简单的

```
var foo1 = 1;
var foo2 = 2;
var foo3 = 3;
function bar() {
// case1
console.log(foo1);
var foo1 = 10;
console.log(foo1);

//c ase2
console.log(foo2);

// case3
console.log(foo3);
foo3 = 30;
console.log(foo3);
}
bar();
```

输出结果,这次终于问了

```
undefined
10
2
3
30
```



事件循环

```
setTimeout(_ => console.log(4))

new Promise(resolve => {
resolve()
console.log(1)
}).then(_ => {
console.log(3)
Promise.resolve().then(_ => {
console.log('6')
}).then(_ => {
Promise.resolve().then(_ => {
console.log('5')
})
})
})

console.log(2)
```

输出结果

```
1
2
3
6
5
4
```

讲了讲详细步骤,并提出在老版本node中会出现以下顺序

```
1
2
3
4
6
5
```



HTTP缓存

讲了强制缓存和协商缓存的不同,HTTP1.0 expires,HTTP1.1 cache-control  Last-Modified 和 ETag

怎么不使用缓存而是发送请求

只讲了强制缓存可以通过cache-control no-cache关键字,协商缓存不太清楚



10万个DOM元素渲染,怎么保证操作界面不卡

我当时说的思路是利用懒加载的原理,监听DOM元素在可视窗口中间的时候再渲染。其实这只是一小部分思路,详细参考[页面需要渲染10万条数据,应该怎么实现?](https://juejin.cn/post/6844903866111098888)



Vue如何实现双向绑定的

讲了Vue2.x中的Object.defineProperty的 get 与 set,劫持对象属性,监听数据变化,实现双向绑定,新版本用了proxy



设计模式你了解哪些?

讲了单例模式、工厂模式、装饰者模式、发布-订阅模式、观察者模式。



详细介绍一下单例模式

单例模式确保只有一个实例,如游戏,实现方式闭包的方式实现将已存在实例返回



手写代码

```
/**
* 实现函数 partialUsingArguments,调用之后满足如下条件:
1、返回一个函数 result
2、调用 result 之后,返回的结果与调用函数 fn 的结果一致
3、fn 的调用参数为 partialUsingArguments 的第一个参数之后的全部参数以及 result 的调用参数
*/
```

我的第一版思路,将两个参数数组进行拼接,通过闭包返回结果,面试官提示如果参数为空,怎么办,我增加了args = args || [];这一句

```
function partialUsingArguments(fn, ...args) {
args = args || [];
return function (..._args) {
return fn(args.concat(_args));
}
}
```

面试官说如果参数不是数组,是对象怎么办,提示ES6还有什么拼接方法

```
function partialUsingArguments(fn, args) {
return function (_args) {
return fn([...args, ..._args]);
}
}
```



promise有哪些方法

讲了promise.all并行触发,成功的时候返回结果数组,失败的时候则返回最先失败的值,有promise.race,返回最先的结果,装了个逼说有最新的promise.any(忘了怎么用的了,查了以下说是只要有一个 promise 是 fulfilled 时,则返回一个 resolved promise;所有的 promise 都是 rejected 时,则返回一个 rejected promise数组,与all相反)



本来想让我写promise的手写题的,面试官想了想说考一点常规的题目,合并有序数组

```
var arr1 = [1, 5] var arr2 = [2, 5, 7, 7 ,8] const r = mergeArray(arr1, arr2) console.log(r)
```

```
function mergeArray(arr1, arr2) {
const len1 = arr1.length, len2 = arr2.length;
let index1 = 0, index2 = 0;
let res = [];
while (index1 < len1 && index2 < len2) {
if (arr1[index1] <= arr2[index2]) {
res.push(arr1[index1]);
index1++;
} else {
res.push(arr2[index2]);
index2++;
}
}
while (index1 < len1) {
res.push(arr1[index1]);
index1++;
}
while (index2 < len2) {
res.push(arr2[index2]);
index2++;
}
return res;
}
var arr1 = [1, 5]
var arr2 = [2, 5, 7, 7 ,8]
const r = mergeArray(arr1, arr2)
console.log(r)
```

双指针搞定



反问环节

更多模拟面试

全部评论

(1) 回帖
加载中...
话题 回帖

推荐话题

相关热帖

近期热帖

历年真题 真题热练榜 24小时
技术(软件)/信息技术类
查看全部

近期精华帖

热门推荐