同学,这道前端面试题你会做吗?

491 阅读3分钟

image.png | left | 747x306

又到了新的收获 (offer) 的季节,当前秋招正如火如荼,各位少侠是否在忙着准备面试和前端的技术题呢?

题目介绍

今天小编给大家出道题考考大家的 JavaScript 基础,如果你先知先觉,说明一定做足了功课,万一后知后觉猜到了答案,也别忘了给个点赞打赏小编这一番“深入浅出”的操作。

废话不多说,有这样一个问题:console.log(a == 1 && a == 2 && a == 3) 运行之后是否可能输出 true 呢?

问题剖析

近看之这像是一个自相矛盾的结果,不大可能出现,但直觉告诉我们这种__看上去不可以又问你可不可以的问题__答案通常都是可以!那么问题的关键就是找到那个符合条件的变量 a 。接下来我们逐步拆解这个问题:

  1. 变量 a 可能是什么类型?

JavaScript 里面有 Undefined、Null、Boolean、Number、String、Symbol 六种基本类型和 Object 类型。

  1. 这几种基本类型的值和数字进行比较,使用 == 运算符,可能发生类型转换。具体转换规则如下表:

tran.png | center | 747x304

如果 a 是 undefind 或者 null,比较结果是 false。 如果 a 是 Number 类型,直接和 1、2、3 比较,无法同时满足连续相等。 如果 a 是 Boolean 类型,会先转换成数字然后进行比较。具体规则是 true 转化为 1 ,false 转化为 0 。也无法实现连续相等。 如果 a 是 String 类型,也会先转换为数字再进行比较。一个字符串可以转换成一个数字或 NaN ,不满足条件。 如果 a 是 Object 类型,会先转换成基础值(Number、String、Boolean),用基础值再去比较。当转换成基础值的时候会调用对象的 toString 或 valueOf 方法。好像可以!

  1. 有没有办法让 a 在每一次运算之后递增? 这个比较简单,在 valueOf 或者 toString 方法返回值的时候递增就可以了。

想明白上面的问题之后,很自然地可以得到下面的实现。

const a = {
    val: 1,
    toString() {
        return a.val++;
    }
};

回顾总结

回顾一下剖析问题的整个过程,才发现这道题里面考察了很多前端基础,比如:

  1. JavaScript 里面有哪些数据类型?
  2. == 和 === 有什么区别?
  3. 不同类型之间进行比较转换的规则是怎样的?
  4. undefined 和 null 有什么区别?
  5. 对象相关的知识点...

面试题如同跟考试一样,刷题的时候如果能够举一反三多思考,能够很好地帮助我们查漏补缺,巩固基础。这个问题还有许多其他巧妙的解法(甚至你可以试图改造 console.log),大家不妨试一试。

[1] 题目来源:stackoverflow.com/questions/4… [2] 表格来源:developer.mozilla.org/en-US/docs/…

阿里巴巴 TXD 团队校招已经开始了,还等什么?!赶紧扫描下方二维码找师兄内推啊!

image.png | left | 747x722