一些JavaScript基础知识提点

最近几年前端界新的框架和工具简直眼花缭乱,这是一件好事,充分说明整个前端业界朝气蓬勃,蒸蒸日上。然而在日常的招聘工作和与同事们合作的过程中,却发现有一部分同学会有一些迷失,好像不知道应该学些什么了。

不论是从团队的要求来说,还是从我个人的情况来说,都是非常重视编程基础的。我们相信基础知识的搭建是一个漫长的过程,而在扎实的基础知识之上去认知和使用各种框架则是手到擒来的事情。因此前一阵也专门在团队内分享了一些基础知识的要点,在此也整理成文,供想要学习的同学参考。

基础知识

最近两年,我们基本上一直不停地在招聘,从来富途面试前端的同学的情况来看,在基础知识这一块整体上掌握得不是太理想。也有很多同学在面试完之后会询问为什么我们如此看重基础,一般我也会跟面试者多聊几句。

什么是基础知识呢?首当其冲的是对你手上在使用的语言的认知。比如下面的“小技巧”:

1
2
3
4
5
6
7
+"123"; //转数字
123+""; //转字符串
123.4|0; //取整
+true === 1; //转数字
+false === 0; //转数字
!1; //转布尔
!!location.hash; //转布尔

比如哪些值是假值:

1
2
3
4
5
6
console.log(false);
console.log(Boolean(NaN));
console.log(Boolean(undefined));
console.log(Boolean(null));
console.log(Boolean(0));
console.log(Boolean(''));

比如这些“bug”:

1
2
3
4
5
0.1 + 0.2 !== 0.3;
// true
1.335.toFixed(2); //1.33
1.435.toFixed(2); //1.44

也许很多人不以为然,“这不就是传说中那些刁钻的面试题么,实例没有实用价值好么?”是的,只是我不认为它们很刁钻,而是基础知识。知乎上曾经有一个问题,“面试前端的同学为什么很讨厌被问基础”,我的观点是“他们只是讨厌被问自己不会的基础”。学习知识千万不能人云亦云,人家做C的做Java的做C++的做Python的在这吐槽,你做JS的也跟着吐槽而不是学习,到头来人家的程序写得好好的,你的程序跑不起来,吃亏的是自己。不信?来看看案例:

某一次,某几位开发同学费了九牛二虎之力,终于把需求做完了,又花了好几天和测试同学大战三百回合,终于等到测试同学说“一切正常,项目可以上线了”,于是十分兴奋地发到了生产环境。然而生产环境发上去后一切都是乱套的。又经过几个小时的排查,终于发现是因为测试环境和正式环境的某些配置不一致,导致本来应该返回数字类型的变量在生产环境中返回了字符串。看,上面的+"123" === 123的知识多有用!

当然,你也可以选择使用看起来更正统的方式来将字符串转为数字。那么问题来了:Number(str)parseInt(str)在将字符串转成数字的过程中有什么区别呢?希望你不要回答“这又是一个刁钻的面试题而已”。

再看一个案例:有一个函数showError(code)用来显示错误码对应的提示,如果不传参数则使用默认提示。这是一个非常简单的案例,然而我们却经常看到这样的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function showError(code) {
// 不传参数,则默认为999
if(!code){
code = 999;
}
if(code === 999){
// "提示"
} else if(code === 998) {
// "运气不好"
} else if(code === 997) {
// "人品不好"
} else if(code === 0){
// "成功"
}
}

这段代码中的坑是不是很多人都踩过呢?谁说掌握哪些值是假值没用呢?

setTimeout和this背后

1
2
1
2
3
4
5
6
7
8
9
10
11
var ClassA = function(){
this.method1 = function(){
setTimeout(function(){
// this指向什么?
console.log(this);
},0);
};
};
var a = new ClassA();
a.method1();

这段简单的代码实际上包含了好几个知识点,一个是setTimeout的运行机制和背后JS的事件循环机制。

对象、(类)数组

数据计算

经验和模式

关注性能

软件工程

拒绝hack