2024-05-24 Interview

這次面試，面試官問了我四題：

1. 箭頭函式是什麼
2. 程式題
3. 如何避免程式短時間內請求過多 HTTP
4. 忘了，但記得沒答好

先把筆記寫好。之後再慢慢補。

箭頭函式是什麼

其實不難。簡化的 es6 語法、省略的回傳、還有砍掉 this binding。這些箭頭函式的特點回答好就可以了。

程式題

參見：[JS] 箭頭函式（arrow function）和它對 this 的影響 | PJCHENder 未整理筆記

// https://pjchender.dev/javascript/js-arrow-function/
let id = 21;
let data = {
  id: 21,
};

fn.call(data);
arrowFn.call(data);

function fn() {
  console.log(this.constructor.name);
  setTimeout(function () {
    console.log(this.constructor.name);
  }, 100);
}

function arrowFn() {
  console.log(this.constructor.name);
  setTimeout(() => {
    console.log(this.constructor.name);
  }, 100);
}

因為不懂 this.constructor.name 所以答不出來。即使發現 this.constructor.name 是函式名稱後也……

如何避免程式短時間內請求過多 HTTP

可以用 throttle 與 debounce：

/**
 * @see [throttle](https://www.explainthis.io/zh-hant/swe/throttle)
 */
function throttle(fn, delay = 500) {
    let timer = null;
    return (...args) => {
        if (timer) {
            return;
        }
        timer = setTimeout(() => {
            fn(...args);
            timer = null;
        }, delay);
    };
}

/**
 * @see [debounce](https://www.explainthis.io/zh-hant/swe/debounce)
 */
function debounce(fn, delay = 500) {
    let timer = null;
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn(...args);
        }, delay);
    };
}

忘了，但記得沒答好

感覺這次不行了……