😊前面两篇讲述的，简历、面试，那么这一篇将会告诉你，怎么练习。人的记忆都是线性的记忆，对于大部分人来说，笔、背、看，都是绝对正义的方法。
请思考如何成为一个合格的"程序员"
"局限"。面试了很多人，发现很多萌新甚至一些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编程的方法，没有之一。
题海战术
千言万语，就是一个字，练，给我往里死练。武功秘籍目录如下，练去吧。
总结
长路漫漫其修远兮，希望你不只是做一个程序员，希望你学会这种思维，再未来的生活里乘风破浪。人性很复杂，代码很简单。加油⛽️。
