自我介绍

怎么学习前端的



看过红宝书，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)
```

双指针搞定



反问环节