程序员面试必备：12 个 JS 常见题目及解答！

Posted 2021-05-01 北大青鸟合肥云登

英文：Toptal，编译：众成翻译/xiaosheng222

www.zcfy.cc/article/37-essential-javascript-interview-questions-and-answers

1、使用typeof bar ===“object”来确定bar是否是一个对象时有什么潜在的缺陷？这个陷阱如何避免？

尽管typeof bar ===“object”是检查bar是否是对象的可靠方法，但JavaScript中令人惊讶的问题null也被认为是一个对象！

因此，对于大多数开发人员来说，下面的代码会将true（而不是false）打印到控制台：

var bar = null;
console.log(typeof bar === "object"); // logs true!

只要知道这一点，就可以通过检查bar是否为空来轻松避免该问题：

console.log((bar !== null) && (typeof bar === "object")); // logs false

为了让我们的答案更加的完整，还有两件事值得注意： 首先，如果bar是一个函数，上面的解决方案将返回false。在大多数情况下，这是所期望的行为，但是在您希望函数返回true的情况下，您可以将上述解决方案修改为：

console.log((bar !== null) && ((typeof bar === "object") || (typeof bar === "function")));

其次，如果bar是数组，则上述解决方案将返回true（例如，如果var bar = [];）。在大多数情况下，这是所希望的行为，因为数组确实是对象，但是在您想要对数组也是false的情况下，可以将上述解决方案修改为：

console.log((bar !== null) && (typeof bar === "object") && (toString.call(bar) !== "[object Array]"));

但是，还有一个替代方法对空值，数组和函数返回false，但对于对象则为true：

console.log((bar !== null) && (bar.constructor === Object));

或者，如果您使用jQuery：

console.log((bar !== null) && (typeof bar === "object") && (! $.isArray(bar)));

ES5使得数组的情况非常简单，包括它自己的空检查：

console.log(Array.isArray(bar));

2、下面的代码将输出到控制台的是什么，为什么？

(function(){
  var a = b = 3;
})();

console.log("a defined? " + (typeof a !== 'undefined'));
console.log("b defined? " + (typeof b !== 'undefined'));

由于a和b都在函数的封闭范围内定义，并且由于它们所在的行以var关键字开头，因此大多数JavaScript开发人员会希望typeof a和typeof b在上面的示例中都未定义。

但是，情况并非如此。这里的问题是大多数开发人员错误地理解语句var a = b = 3;以下简写为：

var b = 3;
var a = b;

但实际上，var a = b = 3;其实是速记：

b = 3;
var a = b;

因此（如果您不使用严格模式），代码片段的输出将为：

a defined? false
b defined? true

但是如何在封闭函数的范围之外定义b？那么，因为声明var a = b = 3;是语句b = 3的简写;并且var a = b; b最终成为一个全局变量（因为它不在var关键字后面），因此它仍然在作用域内，即使在封闭函数之外。

注意，在严格模式下（即，使用strict），语句var a = b = 3;会产生一个ReferenceError的运行时错误：b没有定义，从而避免了可能导致的任何头headfakes/bugs。 （这就是为什么你应该在你的代码中使用strict，一个重要的例子！）

3、下面的代码将输出到控制台的是什么？，为什么？

var myObject = {
    foo: "bar",
    func: function() {
        var self = this;
        console.log("outer func: this.foo = " + this.foo);
        console.log("outer func: self.foo = " + self.foo);
        (function() {
            console.log("inner func: this.foo = " + this.foo);
            console.log("inner func: self.foo = " + self.foo);
        }());
    }
};
myObject.func();

以上代码将输出到控制台：

outer func: this.foo = bar
outer func: self.foo = bar
inner func: this.foo = undefined
inner func: self.foo = bar

在外部函数中，this和self都引用myObject，因此都可以正确地引用和访问foo。

但在内部函数中，这不再指向myObject。因此，this.foo在内部函数中是未定义的，而对局部变量self的引用仍然在范围内并且可以在那里访问。

4、在功能块中封装JavaScript源文件的全部内容的重要性和原因是什么？

这是一种日益普遍的做法，被许多流行的JavaScript库（jQuery，Node.js等）所采用。这种技术在文件的全部内容周围创建一个闭包，这可能最重要的是创建一个私有名称空间，从而有助于避免不同JavaScript模块和库之间的潜在名称冲突。

这种技术的另一个特点是为全局变量提供一个容易引用（可能更短）的别名。例如，这通常用于jQuery插件。 jQuery允许您使用jQuery.noConflict()来禁用对jQuery名称空间的$引用。如果这样做了，你的代码仍然可以使用$使用闭包技术，如下所示：

(function($) { /* jQuery plugin code referencing $ */ } )(jQuery);

5、在JavaScript源文件的开头包含'use strict'的意义和有什么好处？

这里最简单也是最重要的答案是use strict是一种在运行时自动执行更严格的JavaScript代码解析和错误处理的方法。如果代码错误被忽略或失败，将会产生错误或抛出异常。总的来说，这是一个很好的做法。

严格模式的一些主要优点包括：

• 使调试更容易。 如果代码错误本来会被忽略或失败，那么现在将会产生错误或抛出异常，从而更快地发现代码中的问题，并更快地指引它们的源代码。

• 防止意外全局。 如果没有严格模式，将值赋给未声明的变量会自动创建一个具有该名称的全局变量。这是JavaScript中最常见的错误之一。在严格模式下，尝试这样做会引发错误。

• 消除隐藏威胁。在没有严格模式的情况下，对null或undefined的这个值的引用会自动强制到全局。这可能会导致许多headfakes和pull-out-your-hair类型的错误。在严格模式下，引用null或undefined的这个值会引发错误。

• 不允许重复的参数值。 严格模式在检测到函数的重复命名参数（例如，函数foo（val1，val2，val1）{}）时会引发错误，从而捕获代码中几乎可以肯定存在的错误，否则您可能会浪费大量的时间追踪。

• 注意：它曾经是（在ECMAScript 5中）strict模式将禁止重复的属性名称（例如var object = {foo：“bar”，foo：“baz”};）但是从ECMAScript 2015 开始，就不再有这种情况了。

• 使eval()更安全。  eval()在严格模式和非严格模式下的行为方式有些不同。最重要的是，在严格模式下，在eval()语句内部声明的变量和函数不会在包含范围中创建（它们是以非严格模式在包含范围中创建的，这也可能是问题的常见来源）。

• 抛出无效的使用错误的删除符。 删除操作符（用于从对象中删除属性）不能用于对象的不可配置属性。当试图删除一个不可配置的属性时，非严格代码将自动失败，而在这种情况下，严格模式会引发错误。

6、考虑下面的两个函数。他们都会返回同样的值吗？为什么或者为什么不？

function foo1(){
  return {
      bar: "hello"
  };
}

function foo2(){
  return
  {
      bar: "hello"
  };
}

令人惊讶的是，这两个函数不会返回相同的结果。而是：

console.log("foo1 returns:");
console.log(foo1());
console.log("foo2 returns:");
console.log(foo2());

会产生：

foo1 returns:
Object {bar: "hello"}
foo2 returns:
undefined

这不仅令人惊讶，而且特别令人烦恼的是，foo2()返回未定义而没有引发任何错误。

原因与JavaScript中分号在技术上是可选的事实有关（尽管忽略它们通常是非常糟糕的形式）。因此，在foo2()中遇到包含return语句的行（没有其他内容）时，会在return语句之后立即自动插入分号。

由于代码的其余部分是完全有效的，即使它没有被调用或做任何事情（它只是一个未使用的代码块，它定义了一个属性栏，它等于字符串“hello”），所以不会抛出任何错误。

这种行为也被认为是遵循了在JavaScript中将一行开头大括号放在行尾的约定，而不是在新行的开头。如此处所示，这不仅仅是JavaScript中的一种风格偏好。

7、什么是NaN？它的类型是什么？如何可靠地测试一个值是否等于NaN？

NaN属性表示“不是数字”的值。这个特殊值是由于一个操作数是非数字的（例如“abc”/ 4）或者因为操作的结果是非数字而无法执行的。

虽然这看起来很简单，但NaN有一些令人惊讶的特征，如果人们没有意识到这些特征，就会导致bug。

一方面，虽然NaN的意思是“不是数字”，但它的类型是，数字：

console.log(typeof NaN === "number"); // logs "true"

此外，NaN相比任何事情 - 甚至本身！ - 是false：

console.log(NaN === NaN); // logs "false"

测试数字是否等于NaN的半可靠方法是使用内置函数isNaN()，但即使使用 isNaN()也不是一个好的解决方案。.

一个更好的解决方案要么是使用value!==值，如果该值等于NaN，那么只会生成true。另外，ES6提供了一个新的Number.isNaN()函数 ，它与旧的全局isNaN()函数不同，也更加可靠。

8、下面的代码输出什么？解释你的答案。

console.log(0.1 + 0.2);
console.log(0.1 + 0.2 == 0.3);

对这个问题的一个有教养的回答是：“你不能确定。它可能打印出0.3和true，或者可能不打印。 JavaScript中的数字全部用浮点精度处理，因此可能不会总是产生预期的结果。“

上面提供的示例是演示此问题的经典案例。令人惊讶的是，它会打印出来：

0.30000000000000004
false

一个典型的解决方案是比较两个数字与特殊常数Number.EPSILON之间的绝对差值：

function areTheNumbersAlmostEqual(num1, num2) {
    return Math.abs( num1 - num2 ) < Number.EPSILON;
}
console.log(areTheNumbersAlmostEqual(0.1 + 0.2, 0.3));

讨论写函数的可能方法isInteger(x)，它确定x是否是一个整数。

这听起来很平凡，事实上，ECMAscript 6为此正好引入了一个新的Number.isInteger()函数，这是微不足道的。但是，在ECMAScript 6之前，这有点复杂，因为没有提供与Number.isInteger()方法等价的方法。

问题在于，在ECMAScript规范中，整数只在概念上存在;即数值始终作为浮点值存储。

考虑到这一点，最简单，最清洁的ECMAScript-6之前的解决方案（即使将非数字值（例如字符串或空值）传递给该函数，该解决方案也具有足够的可靠性以返回false）将成为以下用法按位异或运算符：

function isInteger(x) { return (x ^ 0) === x; }

下面的解决方案也可以工作，尽管不如上面那样高雅

function isInteger(x) { return Math.round(x) === x; }

请注意，在上面的实现中Math.ceil()或Math.floor()可以同样使用（而不是Math.round()）。

或者：

function isInteger(x) { return (typeof x === 'number') && (x % 1 === 0); }

一个相当常见的不正确的解决方案如下：

function isInteger(x) { return parseInt(x, 10) === x; }

虽然这个基于parseInt的方法对许多x值很有效，但一旦x变得相当大，它将无法正常工作。问题是parseInt()在解析数字之前将其第一个参数强制转换为字符串。因此，一旦数字变得足够大，其字符串表示将以指数形式呈现（例如1e + 21）。因此，parseInt()将尝试解析1e + 21，但是当它到达e字符时将停止解析，因此将返回值1.观察：

> String(1000000000000000000000)
'1e+21'

> parseInt(1000000000000000000000, 10)
1

> parseInt(1000000000000000000000, 10) === 1000000000000000000000
false

9、执行下面的代码时，按什么顺序将数字1-4记录到控制台？为什么？

(function() {
    console.log(1);
    setTimeout(function(){console.log(2)}, 1000);
    setTimeout(function(){console.log(3)}, 0);
    console.log(4);
})();

这些值将按以下顺序记录：

1
4
3
2

我们先来解释一下这些可能更为明显的部分：

• 首先显示1和4，因为它们是通过简单调用console.log()而没有任何延迟记录的

  
  

• 在3之后显示，因为在延迟1000毫秒（即1秒）之后记录2，而在0毫秒的延迟之后记录3。

  
  

好的。但是，如果在延迟0毫秒后记录3，这是否意味着它正在被立即记录？而且，如果是这样，不应该在4之前记录它，因为4是由后面的代码行记录的吗？

答案与正确理解JavaScript事件和时间有关。

浏览器有一个事件循环，它检查事件队列并处理未决事件。例如，如果在浏览器繁忙时（例如，处理onclick）在后台发生事件（例如脚本onload事件），则该事件被附加到队列中。当onclick处理程序完成时，将检查队列并处理该事件（例如，执行onload脚本）。

同样，如果浏览器繁忙，setTimeout()也会将其引用函数的执行放入事件队列中。

当值为零作为setTimeout()的第二个参数传递时，它将尝试“尽快”执行指定的函数。具体来说，函数的执行放置在事件队列中，以在下一个计时器滴答时发生。但请注意，这不是直接的;该功能不会执行，直到下一个滴答声。这就是为什么在上面的例子中，调用console.log(4)发生在调用console.log(3)之前（因为调用console.log(3)是通过setTimeout调用的，所以稍微延迟了一点）。

10、编写一个简单的函数（少于160个字符），返回一个布尔值，指示字符串是否是palindrome。

如果str是回文，以下一行函数将返回true;否则，它返回false。

function isPalindrome(str) {
  str = str.replace(/\W/g, '').toLowerCase();
  return (str == str.split('').reverse().join(''));
}

例如：

console.log(isPalindrome("level")); // logs 'true'
console.log(isPalindrome("levels")); // logs 'false'
console.log(isPalindrome("A car, a man, a maraca")); // logs 'true'

11、写一个sum方法，当使用下面的语法调用时它将正常工作。

console.log(sum(2,3)); // Outputs 5
console.log(sum(2)(3)); // Outputs 5

有（至少）两种方法可以做到这一点：

METHOD 1

function sum(x) {
  if (arguments.length == 2) {
    return arguments[0] + arguments[1];
  } else {
    return function(y) { return x + y; };
  }
}

在JavaScript中，函数提供对参数对象的访问，该对象提供对传递给函数的实际参数的访问。这使我们能够使用length属性在运行时确定传递给函数的参数的数量

如果传递两个参数，我们只需将它们相加并返回。

否则，我们假设它是以sum(2)(3)的形式被调用的，所以我们返回一个匿名函数，它将传递给sum()（在本例中为2）的参数和传递给匿名函数的参数（这种情况3）。

METHOD 2

function sum(x, y) {
  if (y !== undefined) {
    return x + y;
  } else {
    return function(y) { return x + y; };
  }
}

当函数被调用时，JavaScript不需要参数的数量来匹配函数定义中参数的数量。如果传递的参数数量超过了函数定义中参数的数量，则超出的参数将被忽略。另一方面，如果传递的参数数量少于函数定义中的参数数量，则在函数内引用时，缺少的参数将具有未定义的值。因此，在上面的例子中，通过简单地检查第二个参数是否未定义，我们可以确定函数被调用的方式并相应地继续。

12、考虑下面的代码片段

for (var i = 0; i < 5; i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  btn.addEventListener('click', function(){ console.log(i); });
  document.body.appendChild(btn);
}

(a) 当用户点击“按钮4”时，什么被记录到控制台？为什么？

(b) 提供一个或多个可按预期工作的替代实现。

答：

(a) 无论用户点击哪个按钮，数字5将始终记录到控制台。这是因为，在调用onclick方法（对于任何按钮）时，for循环已经完成，并且变量i已经具有值5.（如果受访者知道足够的话就可以获得奖励点数关于执行上下文，变量对象，激活对象和内部“范围”属性如何影响闭包行为。）

(b) 使这项工作的关键是通过将它传递给新创建的函数对象来捕获每次通过for循环的i的值。以下是四种可能的方法来实现这一点：

for (var i = 0; i < 5; i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  btn.addEventListener('click', (function(i) {
    return function() { console.log(i); };
  })(i));
  document.body.appendChild(btn);
}

或者，您可以将新的匿名函数中的整个调用包装为btn.addEventListener：

for (var i = 0; i < 5; i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  (function (i) {
    btn.addEventListener('click', function() { console.log(i); });
  })(i);
  document.body.appendChild(btn);
}

或者，我们可以通过调用数组对象的原生forEach方法来替换for循环：

['a', 'b', 'c', 'd', 'e'].forEach(function (value, i) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  btn.addEventListener('click', function() { console.log(i); });
  document.body.appendChild(btn);
});

最后，最简单的解决方案，如果你在ES6 / ES2015上下文中，就是使用let i而不是var i：

for (let i = 0; i < 5; i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  btn.addEventListener('click', function(){ console.log(i); });
  document.body.appendChild(btn);
}

面试比棘手的技术问题要多，所以这些仅仅是作为指导。并不是每个值得聘用的“A”候选人都能够回答所有问题，能够回答所有问题的也不能保证是“A”候选人。最后，招聘仍然是一门艺术，一门科学 - 还有很多工作要做。