TikTok 面試：四個你可能感興趣的前端題
作者：佚名
最近，我的好朋友正在換工作，在網上收到了很多offer。其中之一就有來自一家名為 TikTok 公司的Offer，你可能非常熟悉該公司，也有可能不是很熟悉它。
最近，我的好朋友正在換工作，在網上收到了很多offer。
其中之一就有來自一家名為 TikTok 公司的Offer，你可能非常熟悉該公司，也有可能不是很熟悉它。
朋友在面試的時候，他們讓我的朋友當場寫代碼來實現4個復雜方法的功能。
1. 嘗試實現Promise.all API
Promise.all() 方法將可迭代的 Promise 作為輸入，并返回單個 Promise，該 Promise 解析為輸入 Promise 結果的數組。
當所有輸入的 Promise 都已解決，或者輸入的可迭代對象不包含 Promise 時，返回的 Promise 將得到解決。
它會在任何輸入Promise拒絕或非承諾拋出錯誤時立即拒絕，并將拒絕第一個拒絕消息/錯誤。
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'foo');
});
Promise.all([promise1, promise2, promise3]).then((values) => {
console.log(values);
});
// expected output: Array [3, 42, "foo"]現在，自己實現了一個
Promise.myAll = (promises) => {
return new Promise((rs, rj) => {
// counter
let count = 0
// Storage results
let result = []
const len = promises.length
if (len === 0) {
return rs([])
}
promises.forEach((p, i) => {
// Some array items may not be Promise and need to be converted manually
Promise.resolve(p).then((res) => {
count += 1
// Collect the return value of each Promise
result[ i ] = res
// Set the value of Promise to result, when all Promises are successful
if (count === len) {
rs(result)
}
// As long as one promise fails, the result is failure
}).catch(rj)
})
})
}進行測試如下：
const p1 = Promise.resolve(1)
const p2 = new Promise((resolve) => {
setTimeout(() => resolve(2), 1000)
})
const p3 = new Promise((resolve) => {
setTimeout(() => resolve(3), 3000)
})
const p4 = Promise.reject('err4')
const p5 = Promise.reject('err5')
// 1. All promise succeeded
const p11 = Promise.myAll([ p1, p2, p3 ])
.then(console.log) // [ 1, 2, 3 ]
.catch(console.log)
// 2. One promise failed
const p12 = Promise.myAll([ p1, p2, p4 ])
.then(console.log)
.catch(console.log) // err4
// 3. Two promises failed. The final output is err4. The return value of the first failure
const p13 = Promise.myAll([ p1, p4, p5 ])
.then(console.log)
.catch(console.log) // err42.設計一個可以設置過期日期的localstorage API
localstorage不會像cookie一樣自動過期，所以過期時間需要自己維護。
我的思路是：
使用setItem時，保存過期時間。使用getItem時，將時間與當前時間進行比較，如果大于當前時間，則返回該值，否則，需要通過removeItem移除該值，并返回null。
const storage = {
prefix: 'fatFish',
timeSign: '|fatFish|',
setItem (key, value, time) {
// Protect the key from being overwritten
key = `${this.prefix}${key}`
// There is no incoming time, the default expiration time is one month, of course, it can be other times or not set
time = time ? new Date(time).getTime() : Date.now() + 24 * 60 * 60 * 31 * 1000
// Constructs a string of the form 1646094676134|fatFish|"Front-end Fat Fish"
window.localStorage.setItem(key, `${time}${this.timeSign}${JSON.stringify(value)}`)
},
getItem (key) {
key = `${this.prefix}${key}`
let value = window.localStorage.getItem(key)
if (value) {
let index = value.indexOf(this.timeSign)
let time = +value.slice(0, index)
// Determine if time has expired
if (time > Date.now()) {
value = JSON.parse(value.slice(index + this.timeSign.length))
} else {
value = null
window.localStorage.removeItem(key)
}
}
return value
}
}現在，進行測試
storage.setItem('name', 'front-end-fat-head', Date.now() + 100 * 1000) // fatFishname 1646095230191|fatFish|"front-end-fat-head"
storage.getItem('name') // front-end-fat-head
// 100s later
storage.getItem('name') // null
storage.setItem('obj', { name: 'front-end-fat-head', age: 100 }, Date.now() + 100 * 1000) // fatFishobj 1646095311366|fatFish|{"name":"front-end-fat-head","age":100}
storage.getItem('obj') // {name: 'front-end-fat-head', age: 100}基本上符合題主的要求。當然，我們也可以處理異常情況，比如空間已滿、設置錯誤等。
3.找到兩個節點最近的公共父節點，包括節點本身
介紹：
oNode1 和 oNode2 位于同一文檔中，并且不會是同一節點。
function findCommonParent(oNode1, oNode2) {
// fill here
}相信看到這道題你一定會用遞歸，但是沒有明確的思路。
這個時候不要緊張。從問題中找出更有效的信息，盡量用更多的筆來畫（如果是現場面試，記得只帶一支鉛筆，有時候畫多了想法就出來了）。
1.1 兩個節點處于同一級別
讓我們嘗試畫出這兩個節點之間可能的關系。如下圖所示，它們的直接父節點就是答案。
1.2 兩個節點互為祖先
oNode1 是目標節點。當然，反過來也是一樣的。oNode2 也可以是 oNode1 的祖先。
1.3 兩個節點之間沒有關系
如下圖所示，兩個節點之間的距離很遠，看似沒有任何關系，但從其中任意一個向上查找，肯定能找到包含oNode1或oNode2的點。
1.4 遞歸實現版本
根據上面的分析，相信你很快就能寫出下面的代碼。
function findCommonParent(oNode1, oNode2) {
// Cases 1 and 2
if (oNode1.contains(oNode2)) {
return oNode1
// Cases 1 and 2
} else if (oNode2.contains(oNode1)) {
return oNode2
} else {
// Case 3, if you look up one of the nodes, you will find a common ancestor node
return findCommonParent(oNode1.parentNode, oNode2)
}
}1.5 遍歷實現版本
遞歸很好理解，僅僅通過遍歷就可以實現嗎？事實上，遞歸問題往往可以通過遍歷來解決。
function findCommonParent (oNode1, oNode2) {
// Using oNode2 here is the same
// If a node contains another node, return directly, otherwise keep looking up
while (!oNode1.contains(oNode2)) {
oNode1 = oNode1.parentNode
}
return oNode1
}4.使用reduce實現map功能
這個問題會比較簡單，我們直接寫代碼吧。
Input: [1, 2, 3]
Output: [2, 4, 6]Array.prototype.map2 = function (callback, ctx = null) {
if (typeof callback !== 'function') {
throw('callback must be a function')
}
return this.reduce((result, cur, index, array) => {
return result.concat(callback.call(ctx, cur, index, array))
}, [])
}
let arr = [ 1, 2 ]
let arr2 = arr.map2(function (it, i, array) {
console.log(it, i, array, this)
return it * 2
}, { name: 'fatfish' })
console.log(arr2)
最后
看到這里，我想你已經明白了，如果還不明白的話，那就是我還沒有說清楚，下次，我爭取說的更加清楚一些。當然，如果你覺得這個內容對你有幫助的話，請記得點贊我，關注我，以便學習能夠內容，同時，也不會錯過我們的優質內容。
責任編輯：華軒
來源：
web前端開發
