七个简单但棘手的 JS 面试问题

作者：Dmitri Pavlutin
翻译：疯狂的技术咋

原文：https://dmitripavlutin.com/si...

未经允许严禁转载

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

编码面试
有毒的主管或猪队友

不是 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。如果你在阅读本文时难以回答某些问题，则意味着这些是你接下来必须要去学习的内容！

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

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...

七个简单但棘手的 JS 面试问题

1. 意外的全局变量

问题

答案

2. 数组长度属性

问题

答案

3.鹰眼测试

问题

答案

这个问题背后的故事

4.自动插入分号

问题

答案

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

问题

答案

6.浮点数

问题

答案

7. 提升

问题

答案

8.关键要点

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

疯狂的技术宅

引用和评论

为什么浮点数运算会产生误差

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

前站 - 前端导航，搜索社区，阅读文章，提升技术

前端开发工具

100个React最佳实践小技巧

开发插件集合