面试题

1. 块级作用域#

js 出现了块级作用域之后，会把函数之后的内容都当做一个块来看待，用函数隔开

{
  a = 123;
  function a() {}
  a = 456;
}
console.log(a); // 123

{
  a = 123;
  function a() {}
  a = 456;
  function a() {}
}
console.log(a); // 456

上面的代码相当于

{
  a = 123;
  function a() {}
  {
    a = 456;
  }
}
console.log(a); // 123

{
  a = 123;
  function a() {}
  {
    a = 456;
  }
  function a() {}
}
console.log(a); // 456

2. promise#

掘金推荐文章中看到了这个题也不太懂

Promise.resolve().then(() => {
    console.log(0);
    return Promise.resolve(4);
}).then((res) => {
    console.log(res)
})

Promise.resolve().then(() => {
    console.log(1);
}).then(() => {
    console.log(2);
}).then(() => {
    console.log(3);
}).then(() => {
    console.log(5);
}).then(() =>{
    console.log(6);
})

// 答案是 0、1、2、3、4、5、6

评论里面的大佬说：Js引擎为了让microtask尽快的输出，做了一些优化，连续的多个then(3个)如果没有reject或者resolve会交替执行then而不至于让一个堵太久完成用户无响应，不单单v8这样其他引擎也是这样，因为其实promuse内部状态已经结束了。这块在v8源码里有完整的体现

3. 前端的通讯(待整理)#

axios(优点)
ajax
fetch(同源，.then取值的问题)
websocket(应用场景和常用api)

4. Symbol.hasInstance#

Symbol.hasInstance用于判断某对象是否为某构造器的实例。因此你可以用它自定义 instanceof 操作符在某个类上的行为。

class Array1 {
  static [Symbol.hasInstance](instance) {
    return Array.isArray(instance);
  }
}

console.log([] instanceof Array1);
// expected output: true

可用于把instanceof比较字符串类型

class String1 {
  static [Symbol.hasInstance](str) {
    return typeof str === 'string';
  }
}

console.log('hello' instanceof String1);
// expected output: true

5. event loop#

// 7, 4, 5, 6 1, 2 ,3
a()
setTimeout(() => {
    console.log(1);
    new Promise((res, rej) => {
        console.log(2);  // await就相当于这里
        res()
    }).then(() => {
        console.log(3);
    })
}, 2000)
setTimeout(() => {
    console.log(6);
},1000)
function b() {
    console.log(7);
}
async function a() {
    await b();  // await 就是 promise的同步 后面是.then的内容
    console.log(5);
}
console.log(4);

6. promise#

new Promise (function (resolve, reject) {
    reject(resolve(1) || 0);
  }).then((x) => {
    return Promise.reject(x)
  }, (x) =>{
    return Promise.reject(x + 2)
  }).then((x) => {
    console.log(x);
  }, (x) =>{
    console.log(x + 4);
  })
  // 5 promise状态更改之后，不会再更改了。在内部resolve先执行，状态先改掉了

面试复盘#

1. 阿里外包，菜鸟（电话一面）#

这个面试官很垃圾，放人鸽子，也不准时。

vdom是什么？解决了什么问题？
浏览器缓存？协商缓存？
react hook钩子 useMemo useCallback 划重点：前端性能优化（可以展开说其他用性能优化处理的函数和钩子）
跨域 jsonP cors 代理跨域 nginx
hoc的使用场景：属性代理和反向继承
1px问题，0.5px的实现
H5移动端适配问题
关注的公众号，社区，有哪些？

总结：需要背诵专业名词，单词。发音参考

2. 涂鸦智能（现场一面、二面）#

react fiber -- 为什么取消will那些生命周期
问了 http 和 webpack 都不会
input下载文件
浏览器地址输入后都发生了什么
浏览器缓存
hook的钩子 useCallback useMemo
函数组件怎么拿ref --- forwardRef
setState的执行
let const
Module框实现有几种方法
微前端隔离用什么实现的？
react-router的实现
跨域 -- iframe
ssr -- 不会
node -- 不会

总结：真的好菜，估计还要在准备很久才能去面稍微大一点的公司了。

3. 阿里直属外包（电话一面）#

先夸一下面试官，准时而且高效，问问题也很有调理，人很好。

自我介绍 -- 建议可以准备一下（突出自己的优势和特点）
跨域
浏览器缓存
es6里面挑两个特性讲一下（let const、promise）--这个真的是给自己挖坑
promise.catch之后还可以在.then吗？-- 真不知道
数组有哪些方法？数组reduce的方法都有哪些参数？-- 这个答完之后，面试官说了一句还不错呀。
用自定义hook实现一个定时器
如何实现一个左侧100px，右侧 4 ：1的自适应布局
css有哪些隐藏元素的方式

4. 阿里直属外包（电话二面）#

同样是准时高效的面试官。

在项目中进行组件封装除了picker还有什么组件。 --- 答：tab组件
那么能说一下你是如何封装的tab组件吗？
我给这个tab组件加几个功能，点击之后滚动记录当前的位置怎么做？
在哪里记录状态呢 --- 说一下useEffect的依赖项
怎么获取dom --- 如何使用 useRef forwardRef
在哪里进行改变dom呢---说useLayoutEffect 和 useEffect的区别
flex布局
期望薪资