最近，我的好朋友正在換工作，在網上收到了很多offer。amH28資訊網——每日最新資訊28at.com

amH28資訊網——每日最新資訊28at.com

其中之一就有來自一家名為 TikTok 公司的Offer，你可能非常熟悉該公司，也有可能不是很熟悉它。amH28資訊網——每日最新資訊28at.com

朋友在面試的時候，他們讓我的朋友當場寫代碼來實現4個復雜方法的功能。amH28資訊網——每日最新資訊28at.com

1. 嘗試實現Promise.all API

Promise.all() 方法將可迭代的 Promise 作為輸入，并返回單個 Promise，該 Promise 解析為輸入 Promise 結果的數組。amH28資訊網——每日最新資訊28at.com

當所有輸入的 Promise 都已解決，或者輸入的可迭代對象不包含 Promise 時，返回的 Promise 將得到解決。amH28資訊網——每日最新資訊28at.com

它會在任何輸入Promise拒絕或非承諾拋出錯誤時立即拒絕，并將拒絕第一個拒絕消息/錯誤。amH28資訊網——每日最新資訊28at.com

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"]

現在，自己實現了一個amH28資訊網——每日最新資訊28at.com

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)    })  })}

進行測試如下：amH28資訊網——每日最新資訊28at.com

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 succeededconst p11 = Promise.myAll([ p1, p2, p3 ])  .then(console.log) // [ 1, 2, 3 ]      .catch(console.log)// 2. One promise failedconst 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 failureconst p13 = Promise.myAll([ p1, p4, p5 ])  .then(console.log)      .catch(console.log) // err4

2.設計一個可以設置過期日期的localstorage API

localstorage不會像cookie一樣自動過期，所以過期時間需要自己維護。amH28資訊網——每日最新資訊28at.com

我的思路是：amH28資訊網——每日最新資訊28at.com

使用setItem時，保存過期時間。使用getItem時，將時間與當前時間進行比較，如果大于當前時間，則返回該值，否則，需要通過removeItem移除該值，并返回null。amH28資訊網——每日最新資訊28at.com

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  }}

現在，進行測試amH28資訊網——每日最新資訊28at.com

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 laterstorage.getItem('name') // nullstorage.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}

基本上符合題主的要求。當然，我們也可以處理異常情況，比如空間已滿、設置錯誤等。amH28資訊網——每日最新資訊28at.com

3.找到兩個節點最近的公共父節點，包括節點本身

介紹：amH28資訊網——每日最新資訊28at.com

oNode1 和 oNode2 位于同一文檔中，并且不會是同一節點。amH28資訊網——每日最新資訊28at.com

function findCommonParent(oNode1, oNode2) {  // fill here}

相信看到這道題你一定會用遞歸，但是沒有明確的思路。amH28資訊網——每日最新資訊28at.com

這個時候不要緊張。從問題中找出更有效的信息，盡量用更多的筆來畫（如果是現場面試，記得只帶一支鉛筆，有時候畫多了想法就出來了）。amH28資訊網——每日最新資訊28at.com

1.1 兩個節點處于同一級別

讓我們嘗試畫出這兩個節點之間可能的關系。如下圖所示，它們的直接父節點就是答案。amH28資訊網——每日最新資訊28at.com

amH28資訊網——每日最新資訊28at.com

1.2 兩個節點互為祖先

oNode1 是目標節點。當然，反過來也是一樣的。oNode2 也可以是 oNode1 的祖先。amH28資訊網——每日最新資訊28at.com

amH28資訊網——每日最新資訊28at.com

1.3 兩個節點之間沒有關系

如下圖所示，兩個節點之間的距離很遠，看似沒有任何關系，但從其中任意一個向上查找，肯定能找到包含oNode1或oNode2的點。amH28資訊網——每日最新資訊28at.com

amH28資訊網——每日最新資訊28at.com

1.4 遞歸實現版本

根據上面的分析，相信你很快就能寫出下面的代碼。amH28資訊網——每日最新資訊28at.com

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 遍歷實現版本

遞歸很好理解，僅僅通過遍歷就可以實現嗎？事實上，遞歸問題往往可以通過遍歷來解決。amH28資訊網——每日最新資訊28at.com

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功能

這個問題會比較簡單，我們直接寫代碼吧。amH28資訊網——每日最新資訊28at.com

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)

amH28資訊網——每日最新資訊28at.com

最后

看到這里，我想你已經明白了，如果還不明白的話，那就是我還沒有說清楚，下次，我爭取說的更加清楚一些。當然，如果你覺得這個內容對你有幫助的話，請記得點贊我，關注我，以便學習能夠內容，同時，也不會錯過我們的優質內容。amH28資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-55029-0.htmlTikTok 面試：四個你可能感興趣的前端題

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 深入理解python函數，一切皆對象

下一篇： Go測試的20個實用建議，你采納了嗎？