模拟面试、简历指导、入职指导、项目指导、答疑解惑 可私信找我~已帮助100+名同学完成改造！

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~

题目

一面

const obj = { a: { b: 1, c: 2, d: { e: 5 } }, b: [1, 3, {a: 2, b: 3}], c: 3 }


flatten(obj){} 结果返回如下:

// { // 'a.b': 1, // 'a.c': 2, // 'a.d.e': 5, // 'b[0]': 1, // 'b[1]': 3, // 'b[2].a': 2, // 'b[2].b': 3 // c: 3 // }


二面

三面

const data = { name: 'tom', age: 18, address: 'xxx' }


解答

一面

1、['10', '10', '10', '10', '10'].map(parseInt) 的输出值是什么？

可转化为：

['10', '10', '10', '10', '10'].map((num, index) =>parseInt(num, index))
// [10, NaN, 2, 3, 4]
'10'0 -> 10: 进制为0，则默认10进制
'10'1 -> NaN: 1进制不存在
'10'2 -> 2: 2 * 1 + 2 * 0
'10'3 -> 3: 3 * 1 + 3 * 0
'10'4 -> 4: 4 * 1 + 4 * 0

2、你们现在的技术栈是什么？为什么要使用ts？

typescript 是 JavaScript 的超集，它本质其实是是在 JavaScript 上添加了 可选静态类型 和 基于类的面向对象编程

typescript 的特点

3、setTimeout的执行过程（事件循环，同步、异步）？

事件循环

简单来说就是：排队。代码有前后顺序，必须按照顺序去执行 异步

异步任务可以不阻塞后面的代码执行，而是可以同时进行，并且执行完后会有一个异步的回调。

想起一个故事可以很好的解释 同步 和 异步

4、对Promise的理解，与async、await的区别，async、await是怎么实现的？

Promise的理解

顾名思义， Promise 就是 承诺 的意思，表现在了Promise的状态一旦改变则不会再变了，如果状态为 fulfilled 则执行 then ，如果状态为 rejected 则执行 catch ，Promise 也支持 链式调用 。我觉得Promise最大的用处就是 解决了回调地狱，提高了代码的可读性 。常用的方法有 resolve、reject、then、catch、race、all、allSettled、any、finally

async await async/await 的作用是 用同步的方式执行异步的操作 ，它的实现原理，我个人理解就是利用了 Promise 的不断嵌套，再加上 generator函数 的步骤控制，实现了按顺序执行异步操作的效果

补充：async函数返回的是一个Promise

5、解释 requestAnimationFrame/requestIdleCallback，分别有什么用？

6、react性能优化？

7、说说对flex的理解？

弹性布局 ，设置了 display: flex 的盒子为 弹性盒子 ，子元素会自动变成 弹性项目 ，盒子有一根主轴，默认是水平，并且有一个交叉轴（跟主轴垂直）。

弹性盒子的样式：

弹性项目的样式：

8、回流、重绘是什么？如何减少回流和重绘？

重绘回流

避免重绘、回流

9、判断一个对象是数组的方法？

10、怎么寻找react页面卡顿的原因？

11、编程题：实现一个对象的 flatten 方法，如下：

const obj = { a: { b: 1, c: 2, d: { e: 5 } }, b: [1, 3, {a: 2, b: 3}], c: 3 }


flatten(obj){} 结果返回如下:

// { // 'a.b': 1, // 'a.c': 2, // 'a.d.e': 5, // 'b[0]': 1, // 'b[1]': 3, // 'b[2].a': 2, // 'b[2].b': 3 // c: 3 // }


解题

const isObject = (target) => {
returntypeof target === 'object' && target !== null
}
const flatten = (obj) => {
if (!isObject) return
const res = {}
const dfs = (cur, prefix) => {
if (isObject(cur)) {
if (Array.isArray(cur)) {
cur.forEach((item, index) => dfs(item, `${prefix}[${index}]`))
} else {
for(let key in cur) {
dfs(cur[key], `${prefix}${prefix ? '.' : ''}${key}`)
}
}
} else {
res[prefix] = cur
}
}
dfs(obj, '')
return res
}



二面

1、说说对web worker的理解

2、service worker和强缓存相比，有哪些优势？

service缓存没用过。。

3、说说对堆栈溢出的理解？

常见的情况发生在 大数量递归 或 死循环 时，就会造成 栈溢出 ，因为每次执行代码都需要分配一定空间的内存，以上两种情况都会使执行空间超出最大限度，从而报错

4、position中的sticky是什么，还有哪些其他的？

5、ts中，any和unknown分别是什么意思？泛型怎么使用？

6、bind有什么用？连续多个bind，最后this指向是什么？

bind 的作用是改变函数执行的指向，且不会立即执行，而是返回一个新的函数，可以自主调用这个函数的执行（此函数不可当做构造函数）

连续多个bind之后this指向始终指向第一个

7、webpack的plugin怎么实现？

一个plugin就是一个类，类里有一个 apply方法 ，每次打包时都会调用这个apply，而这个apply方法接受一个参数对象，其中有一个 plugin 方法，此方法中有许多 钩子函数 ，且可以决定静态文件的生成，修改等等

8、编程题：

现已知一个字符串是由正整数和加减乘除四个运算符(+ - * /)组成。例如存在字符串 const str = '11+2-3 4+5/2 4+10/5'，现在需要将高优先级运算，用小括号包裹起来，例如结果为 '11+2-(3 4)+(5/2 4)+(10/5)'。注意可能会出现连续的乘除运算，需要包裹到一起。请用 javascript 实现这一过程

解答 我比较菜，用的方法也是临时想出来的，没有优化，大家将就着看吧：

const checkType = (str) => {
if (['*', '/'].includes(str)) return'high'
if (['+', '-'].includes(str)) return'low'
return'number'
}
const addBrackets = (formula) => {
const strs = formula.split('')
let i = 0, j = 1, high = false, res = []
while(j < strs.length) {
const jType = checkType(strs[j])
if (jType === 'low' && !high) {
i = ++j
j++
}elseif (jType === 'low' && high) {
res.push(j++)
i = j++
high = false
}elseif (jType === 'high') {
j++
!high && res.push(i)
high = true
}else {
j++
}
}
if (high) res.push(strs.length)
let add = 0
for(let i = 0; i < res.length; i++) {
const index = res[i]
strs.splice(index + add, 0, add % 2 ? ')' : '(')
add++
}
return strs.join('')
}

三面

1、手写体：使用TypeScript 实现一个 get 函数来获取它的属性值

const data = { name: 'tom', age: 18, address: 'xxx' }


解答：

constget = <T extends object, K extends keyof T>(obj: T, key: K): T[K] => {
return obj[key]
}


2、ts中的 any 、 unknown 的区别？

3、有用过ts中的 keyof 吗？

将一个interface的所有key，汇聚成一个联合类型，可以用来对传入key的限制，比如：

interface Target {
name: string,
age: number
}
const fn = (obj: Target, key: keyof Target) => {}
const obj: Target = { name: 'sunshine', age: 18 }
fn(obj, name) // 成功
fn(obj, age) // 成功
fn(obj, height) // 报错



4、for in/for of的区别？

5、Promise值穿透

then或catch没有传入函数的话，会发生值穿透，原理是Promise内部检测如果传入的是非函数，则会拿上一次的结果包装成一个返回Promise的函数，达到穿透效果

例如：

Promise.resolve('foo')
.then(Promise.resolve('bar'))
.then(function(result){
console.log(result) // foo
})


但是如果传入的是函数的话：

Promise.resolve('foo')
.then(() =>Promise.resolve('bar'))
.then(function(result){
console.log(result) // bar
})


结语

我是林三心

广州的兄弟可以约饭哦，或者约球~我负责打铁，你负责进球，谢谢~