模擬面試、簡歷指導、入職指導、計畫指導、答疑解惑 可私信找我~已幫助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
})


結語

我是林三心

廣州的兄弟可以約飯哦，或者約球~我負責打鐵，你負責進球，謝謝~