面試題

1. 專案中的資料管理，為什麼用 redux 不用 React 自帶的 context？
2. Promise 的三個狀態，rejected 的捕獲方式，catch 會返回什麼狀態的 promise？
3. tcp 在網路模型的那一層？TCP/IP 分層中，壓縮了 OSI 分層的哪些層？為什麼壓縮這些層？
4. tcp 四次揮手，為什麼需要四次，三次為什麼不可行？
5. 比較程序和執行緒，瀏覽器中程序和執行緒的工作方式，結合事件迴圈說明。
6. setTimeout 是否準確，為什麼？
7. 說明原型鏈的工作方式，類元件如何建立或修改原型鏈？

程式碼題

1. 實現 demo，滿足如下輸出：

• demo('123') // ['123']
• demo.red('123') // ['red', '123']
• demo.red.blue('123') // ['red', 'blue', '123']
• demo.blue.red('123') // ['blue', 'red', '123']

function func(...args) {
  console.log([...args]);
}

function Demo(...props) {
  return new Proxy(func.bind({}, ...props), {
    get(obj, value) {
      //   if (!obj.hasOwnProperty(value)) {
      //     obj.value = new Demo(...props, value);
      //   }
      //   return obj.value;
      return new Demo(...props, value);
    }
  });
}

// 測試
let demo = new Demo();
demo.red.blue.red("123");		// ["red", "blue", "red", "123"]
 

2. 實現如下佈局（flex 考察）

export default function App() {
  const style = {
    box: {
      width: "200px",
      height: "200px",
      backgroundColor: "gray",
      margin: "auto",
      display: "flex",
      flexDirection: "column",
      justifyContent: "space-between",
      alignItems: "center"
    },
    point: {
      width: "30px",
      height: "30px",
      backgroundColor: "yellow"
    }
  };
  return (
    <div id="app">
      <div style={style.box}>
        <div style={style.point}></div>
        <div style={style.point}></div>
      </div>
    </div>
  );
}
 

3. 給定字串 s，和字典 wordDict。求 s 是否能由字典中的單詞拼出？

• s='leetcode', wordDict=['leet', 'code'] // true
• s='pineapple', wordDict=['pin', 'e', 'apple'] // true
• s='pineapple', wordDict=['pin', 'nea', 'apple'] // false