7个简单但棘手的JavaScript面试问题

在软件开发中,我认为最需要注意的是:

1、编码面试

2、有毒的主管或猪队友

不是 JavaScript,this,CSS,IE 浏览器,而是上述两点!

如果你参加 JavaScript 高级开发面试,那么很有可能在编码面试中被问到一些棘手的问题。

我知道这是不公平的。一些不知名的人将你放在一边来审视你。这并不是令人愉快的经历。

你能做什么?

请遵循以下建议:“通过实践变得完美”。通过投入足够的时间(最好地定期进行)来深入了解 JavaScript,可以改善你的编码,并且作为积极的结果,可以改善面试技巧。

在本文中,你将发现 7 个简单而又棘手的 JavaScript 面试问题。

尽管这些问题看上去似乎比较随意,但它们涉及了 JavaScript 的重要概念。所以你最好在下次面试之前进行练习!

1. 意外的全局变量

问题

在以下代码段中, typeof a 和 typeof b 的评估结果是什么:

function foo() {

  let a = b = 0;

  a++;

  return a;

}

foo();

typeof a; // => ???

typeof b; // => ???

答案

让我们仔细看看第2行:let a = b = 0。该语句声明了局部变量 a。但同时它也声明了 全局 变量 b。

在 foo() 或全局作用域中都没有声明变量 b。因此,JavaScript 将 b = 0 表达式解释为 window.b = 0。

b 是意外创建的全局变量。

在浏览器中,以上代码片段等效于:

const clothes = ['jacket', 't-shirt'];

clothes.length = 0;

clothes[0]; // => ???

typeof a 是 'undefined'。变量 a 仅在 foo() 作用域内部声明,而在作用域外部中不可用。

typeof b 的结果为 'number'。 b 是值为 0 的全局变量。

2. 数组长度属性

问题

clothes[0] 的值是什么:

const clothes = ['jacket', 't-shirt'];

clothes.length = 0;

clothes[0]; // => ???

答案

数组对象的 length 属性具有特殊行为

减小 length 属性的值有删除当前数组元素(索引值在新旧长度值之间)的副作用。

由于 length 的这种行为,当 JavaScript 执行 clothes.length = 0 时,会删除 clothes 数组中的所有项。

clothes[0] 是 undefined, ,因为 clothes 数组已清空。

3.鹰眼测试

问题

numbers 数组的内容是什么:

const length = 4;

const numbers = [];

for (var i = 0; i < length; i++);{

  numbers.push(i + 1);

}

numbers; // => ???

答案

仔细看一下在花括号 { 前出现的分号;:

在创建 null 语句 时,很容易忽略这个分号。null 语句是不执行任何操作的空语句。

for() 在 null 语句上迭代4次(不执行任何操作),而忽略将元素实际存入数组的代码块:{numbers.push(i + 1); }。

前面的代码等效于以下代码:

const length = 4;

const numbers = [];

var i;

for (i = 0; i < length; i++) {

  // does nothing

}

{

  // a simple block

  numbers.push(i + 1);

}

numbers; // => [5]

for() 将变量 i 递增到 4。然后 JavaScript进入代码块 { numbers.push(i + 1); } 一次,将 4 + 1 存入数组 numbers。

因此,numbers 为 [5]。

这个问题背后的故事

很久以前,当我面试第一份工作时,有人问了我这个问题。

在这次面试中,我在 1 小时内回答了 20 个编码问题。空语句问题也在其中。

当时急于解决问题,我没有看到在大括号 { 之前的分号;。所以我得出了错误的答案 [1、2、3、4]。

由于这种不公平的把戏,我有些失望。我问面试官,这种诡计背后的原因是什么?面试官回答:

“因为我们需要高度重视细节的人。”

幸运的是,我最终并没有为那家公司工作。

究竟怎么看待这件事,我将结论留给你自己做出。

4.自动插入分号

问题

arrayFromValue() 返回什么值?

function arrayFromValue(item) {

  return

    [items];

}

arrayFromValue(10); // => ???

答案

很容易忽略关键字 return 和表达式 [items] 之间的换行。

换行符会使 JavaScript 自动在 return 和 [items] 表达式之间插入分号。

这是等效代码,在 return 之后插入了分号:

function arrayFromValue(item) {

  return;

  [items];

}

arrayFromValue(10); // => undefined

函数内部的 return; 使其返回 undefined。

所以 arrayFromValue(10) 的值为 undefined。

请阅读本节中有关自动分号插入的更多信息。

5.经典问题:棘手的闭包

问题

下脚本将在控制台中输出什么:

let i;

for (i = 0; i < 3; i++) {

  const log = () => {

    console.log(i);

  }

  setTimeout(log, 100);

}

答案

如果你以前没有听说过这个棘手的问题,则你的答案很可能是 0,1 和 2,这是错误的。当我第一次试着解决它时,这也是我的答案!

执行这段代码的过程有两个阶段。

阶段1

for() 迭代 3 次。在每次迭代时,都会创建一个新函数 log(),该函数将捕获变量 i。然后,setTimout() 调度 log() 的执行。

当 for() 循环完成时,变量 i 的值为 3。

log() 是捕获变量 i 的闭包,该变量在 for() 循环作用域的外部中定义。重要的是要了解闭包在词法上捕获了变量 i 。

阶段2

第二阶段发生在 100ms 之后:

3 个固定的 log() 回调由 setTimeout() 调用。 log() 读取变量 i 的当前值 3,并把 3 log 到控制台。

这就是为什么控制台输出为 3, 3 和 3 的原因。

你知道如何将代码段修复为输出 0、1 和 3 吗?请在下面的评论中写下你的解决方案!

6.浮点数

问题

相等性检查的结果是什么?

0.1 + 0.2 === 0.3 // => ???

答案

首先,让我们看一下 0.1 + 0.2 的值:

0.1 + 0.2; // => 0.30000000000000004

0.1 和 0.2 的和并非等于 0.3,而是略大于 0.3。

由于以二进制方式对浮点数进行编码,所以像浮点数相加之类的操作会产生舍入误差。

简而言之,直接比较浮点数并不精确。

因此, 0.1 + 0.2 === 0.3 是false。

访问 0.30000000000000004.com 可以了解更多信息。

7. 提升

问题

如果在声明前访问 myVar 和 myConst,会发生什么?

myVar;  // => ???

myConst; // => ???

var myVar = 'value';

const myConst = 3.14;

答案

提升和临时死区是影响 JavaScript 变量生命周期的两个重要概念。

声明前访问 myVar 的结果为 undefined。在初始化之前,提升的 var 变量的值为 undefined 。

但是,在声明行之前访问 myConst 会引发 ReferenceError。在代码行 const myConst = 3.14 之前,const 变量处于临时死区。

请遵循详细介绍JavaScript变量提升一文中的指南,以更好地掌握提升。

8.关键要点

你可能会认为有些面试中的问题没什么用,我也有同样的感觉,特别是鹰眼测试。但是他们仍然可能会被问到。

无论如何,以上大多数问题都能真正评估你是否精通 JavaScript。如果你在阅读本文时难以回答某些问题,则意味着这些是你接下来必须要去学习的内容!

在面试中提出棘手的问题是否公平?请在评论中写下你的看法。

英文原文地址:https://dmitripavlutin.com/simple-but-tricky-javascript-interview-questions/

为了保证的可读性,本文采用意译而非直译。

更多web前端开发知识,请查阅 HTML中文网 !!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,451评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,172评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,782评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,709评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,733评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,578评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,320评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,241评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,686评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,878评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,992评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,715评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,336评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,912评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,040评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,173评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,947评论 2 355

推荐阅读更多精彩内容