008.前端面試排雷之唱、跳、rap三步曲（ 三 ）rap篇

😊前面兩篇講述的，簡歷、面試，那麼這一篇將會告訴你，怎麼練習。人的記憶都是線性的記憶，對於大部分人來講，筆、背、看，都是絕對正義的方法。

請思考如何成爲一個合格的"程序員"

"侷限"。面試了不少人，發現不少萌新甚至一些3年經驗以上的人，都有一個誤區，那就是太過侷限本身。把本身侷限在前端，侷限在React、Vue、Css、ECMAscript、Node。舉個例子，不知道多少人還記得當年很火的ActionScript。當年大部分網頁的交互，都是用這個完成的。惋惜最後被html+javascript+css給乾死了。flash工程師們，我並非要詆譭大家，可是就如今的市場而言，確實縮水了。我可不敢保證如今的前端，會不會步入ActionScript的後塵。世事難料，誰知道呢。

"爲了錢"。我不排斥爲了錢，轉行來作前端的人，你們都是要恰飯的嘛。就算你只是爲了討生活，也請敬畏這門技術。不要張口就來，誇誇其談。你面對的老大不見的都是不懂行，你面對的就是一位開發了N個項目+保持長久學習的人。既然爲了錢，那麼你更加應該保持旺盛的學習精力。學好ts，工資+1k，學好node，工資+3k，學好react，工資+1k。學好算法，工資+5k，學好網絡基礎，工資+5k…...

"ctrl+v/ctrl+c"。複製/粘貼的代碼，其實一點問題都沒有，在一些特殊場景之下，這是很實用的技巧。例如：短線項目、快速上線項目。可是請概括總結，沉澱出本身的代碼。當你提煉出一些符合當前pm逼數的代碼，我相信你的工做會更加遊刃有餘。

分重點

例子：

Q:
ES6方法Object.getOwnPropertyNames、Object.keys、for...in三者之間的區別？

A:
- Object.getOwnPropertyNames：獲取對象可枚舉和不可枚舉的屬性名
- Object.keys()：獲取對象可枚舉的屬性名
- for...in：遍歷對象可枚舉屬性

擴展：
- 什麼是可枚舉屬性，
- 什麼是不可枚舉屬性
- 如何設置
- 用途

參考：
- [Object.getOwnPropertyNames()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames)
- [Object.keys()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)
- [for...in](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in)
複製代碼

將一個問題拆分爲Q、A、擴展、參考。養成一個習慣，那就是不僅是回答問題，也要思考問題會被如何擴展。通常來講，一個正常的面試官，最多隻會將一個問題擴展三次。當擴展到第四次時，大部分人都很難回答出來。你能夠嘗試一下，將一個問題從深度擴展四次以後的狀況會是怎樣。

分析業務

例如：

// 初次業務
// 簡單的input輸入框，btn提交
export default function Search(){
  let [val,setVal] = useState('');
  function handleEmit(e){
    props.emit(val)
  };
  function handleChange(e){
    setVal(e.target.value)
  };
  return(
    <>
        <Input detailValue={value} placeholder='用戶名' name='value' onChang={()=>handleChange(e)}>
        <Button onClick={()=>handleEmit()}>提交<Button>
    </>
  )
}
複製代碼

// 增長業務
// 增長搜索條件，根據手機號搜索
export default function Search(props){
  let [val,setVal] = useState({
    value: '',
    phone: '',
  });
  function handleEmit(e){
    props.emit({
      value: e.target.value,
      name: e.target.name,
    })
  };
  return(
    <>
        <Input defaultValue={val.value} placeholder='用戶名' name='value' onChang={()=>handleChange(e)}>
        <Input defaultValue={val.phone} placeholder='手機號' name='phone' onChang={()=>handleChange(e)}>
        <Button onClick={()=>handleEmit()}>提交<Button>
    </>
  )
}
複製代碼

當這種業務無限擴展的時候，每次改具體的業務代碼是一件特別乏味的事情。你徹底能夠

const map = [
    {
	value: '',
	placeholder: '',
	type: 'input',
	name: 'phone'
    },
    {
	value: '',
	placeholder: '',
	type: 'input',
	name: 'value'
    }
];

<Inputs map={map} emit={(e)=>{}}/> 複製代碼

這就是分析業務，在可預見的狀況下，擴展你代碼的可用、健壯、穩定。UI = render(data)是階段最適合GUI編程的方法，沒有之一。

題海戰術

千言萬語，就是一個字，練，給我往裏死練。武功祕籍目錄以下，練去吧。

• scriptoj.mangojuice.top
• www.nowcoder.com
• leetcode-cn.com/

總結

長路漫漫其修遠兮，但願你不僅是作一個程序員，但願你學會這種思惟，再將來的生活裏乘風破浪。人性很複雜，代碼很簡單。加油⛽️。