[转]5个JavaScript面试题

问题1：闭包

考虑下面的代码：


1

2

3

4

5

6

var nodes = document.getElementsByTagName(‘button‘);

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

   nodes[i].addEventListener(‘click‘, function() {

      console.log(‘You clicked element #‘ + i);

   });

}

请问，如果用户点击第一个和第四个按钮，控制台上会输出什么？为什么？

答案

上面代码的目的在于检测JavaScript的一个重要概念：闭包。对于每一个JavaScript开发者来说，如果你想在网页中编写5行以上的代码，那么准确理解和恰当使用闭包是非常重要的。如果你想开始学习或者只是想简单地温习一下闭包，那么我强烈建议你去阅读这个教程：Colin Ihrig 写的JavaScript Closures Demystified 。

好了，回到上面的代码。控制台会输出两次You clicked element #NODES_LENGTH，其中#NODES_LENGTH等于nodes内的元素个数。当for循环结束时，变量i的值等于nodes的长度。另外，由于i是在事件被添加时的函数作用域，因此变量i属于事件的闭包。由于闭包中变量的值不是静态的，因而i的值并不是事件被添加时所赋予的值（比如添加第一个按钮时i为0，第二个按钮时i为1）。当事件被执行时，控制台会输出变量i当前的值，即i等于nodes的长度。

问题2：闭包

修复上题的问题，使得点击第一个按钮时输出1，点击第二个按钮时输出2。

答案

有多种办法解决这个问题，下面我给出其中的两种。

第一个解决方案要用到一个IIFE来创建另外一个闭包，从而得到所希望的i的值。相应的代码如下：


1

2

3

4

5

6

7

8

var nodes = document.getElementsByTagName(‘button‘);

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

   nodes[i].addEventListener(‘click‘, (function(i) {

      return function() {

         console.log(‘You clicked element #‘ + i);

      }

   })(i));

}

另一个解决方案不使用IIFE，而是将函数移到循环的外面，代码如下：


1

2

3

4

5

6

7

8

9

10

function handlerWrapper(i) {

   return function() {

      console.log(‘You clicked element #‘ + i);

   }

}

var nodes = document.getElementsByTagName(‘button‘);

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

   nodes[i].addEventListener(‘click‘, handlerWrapper(i));

}

问题3：数据类型

考虑如下代码：


1

2

3

4

console.log(typeof null);

console.log(typeof {});

console.log(typeof []);

console.log(typeof undefined);

答案

这一个问题看起来似乎有点傻，但是它测试了typeof 操作符的知识。很多JavaScript开发者并没有意识到typeof的独特性。在本例中，控制台会输出下面的内容：

object
object
object
undefined

最让人吃惊的输出结果可能是第三个，许多开发者认为typeof [ ] 会返回Array。如果想测试变量值是否为数组，可以写下面的代码：


1

2

3

4

var myArray = [];

if (myArray instanceof Array) {

   // do something...

}

问题4：事件循环

下面代码运行结果是什么？请解释。


1

2

3

4

5

6

7

function printing() {

   console.log(1);

   setTimeout(function() { console.log(2); }, 1000);

   setTimeout(function() { console.log(3); }, 0);

   console.log(4);

}

printing();

答案

输出结果：

1
4
3
2

要弄懂数字为何以这种顺序输出，你需要弄明白setTimeout()是干什么的，以及浏览器的事件循环工作原理。浏览器有一个事件循环用于检查事件队列，处理延迟的事件。UI事件（例如，点击，滚动等），Ajax回调，以及提供给setTimeout()和setInterval()的回调都会依次被事件循环处理。因此，当调用setTimeout()函数时，即使延迟的时间被设置为0，提供的回调也会被排队。回调会呆在队列中，直到指定的时间用完后，引擎开始执行动作（如果它在当前不执行其他的动作）。因此，即使setTimeout（）回调被延迟0毫秒，它仍然会被排队，并且直到函数中其他非延迟的语句被执行完了之后，才会执行。

有了这些认识，理解输出结果为“4”就容易了，因为它是函数的第一句并且没有使用setTimeout()函数来延迟。接着输出“4”，因为它是没有被延迟的数字，也没有进行排队。然后，剩下了“2”，“3”，两者都被排队，但是前者需要等待一秒，后者等待0秒（这意味着引擎完成前两个输出之后马上进行）。这就解释了为什么“3”在“2”之前。

问题5：算法

写一个判断质数的isPrime()函数，当其为质数时返回true，否则返回false。

答案

我认为这是在面试中最常问到的一个问题。尽管这个问题反复出现并且也很简单，但是从候选人提供的答案中能很好地看出候选人的数学和算法能力水平。

首先， 因为JavaScript不同于C或者Java，因此你不能信任传递来的数据类型。如果面试官没有明确地告诉你，你应该询问他是否需要做输入检查，还是不进行检查直接写函数。严格上说，应该对函数的输入进行检查。

需要记住的第二点，负数不是质数。同样的，1和0都不是，因此，要对这些数字做检测。另外，2是唯一的既是偶数又是质数的数字。没有必要用一个循环来验证4,6,8。再者，如果一个数字不能被2整除，它同样也不能被4,6,8等整除，因此你的循环需要跳过这些数字。可以采取其他一些更明智的优化手段，我这里采用的是适用于大多数情况的。例如，如果一个数字不能被5整除，它也不会被5的倍数整除。所以，没有必要检测10,15,20等等。如果你深入了解这个问题的解决方案，我建议你去看相关的Wikipedia介绍。

最后一点，你不需要检查比输入数字的开方还要大的数字。我感觉人们会遗漏掉这一点，并且也不会因为此而获得消极的反馈。但是，展示出这一方面的知识会给你额外加分。

现在你具备了这个问题的背景知识，下面是总结以上所有考虑的解决方案：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

function isPrime(number) {

   // If your browser doesn‘t support the method Number.isInteger of ECMAScript 6,

   // you can implement your own pretty easily

   if (typeof number !== ‘number‘ || !Number.isInteger(number)) {

      // Alternatively you can throw an error.

      return false;

   }

   if (number < 2) {

      return false;

   }

   if (number === 2) {

      return true;

   } else if (number % 2 === 0) {

      return false;

   }

   var squareRoot = Math.sqrt(number);

   for(var i = 3; i <= squareRoot; i += 2) {

      if (number % i === 0) {

         return false;

      }

   }

   return true;

}

结论

本文以问题和练习的形式讨论了另外几个重要的Javascript概念，这些都是前端开发者面试的重要内容。我希望你能顺利地回答这些问题，或者从这里学到一些新的东西，以便在下一次面试中有更好的表现。

时间： 2024-08-10 21:28:46

[转]5个JavaScript面试题的相关文章

Javascript面试题解析

Javascript的一些面试题让很多同学感到头疼,下面就根据兄弟连教育(www.lampbrother.net)毕业学员面试遇到的面试题,给大家做一个简单的分享,希望对初入职场的你们有一些帮助:Javascript面试题解析. 第一题 /* 解析: + 优先级大于 ? 此题等价于: 'Value is true' ? 'Something' : 'Nothing' 所以结果是:'Something' */ var val = 'smtg'; console.log('Value is ' +

javascript 面试题

面试题: 1.下面代码运行结果 var bl = false; $.ajax(url, { //... success: function(){ bl = true; } }); while ( !bl ) { alert( bl ); } alert( bl ); // 结果大家自己去想,这道题是面试官临时写的,简单直接,很好的考察你是否理解javascript中的运行机制,很棒的一道面试题 2.扩展Array原型,编写一个去除数组重复项的方法 // 算法一,两层循环,性能差 Array.pr

一道 JavaScript 面试题

有一道 JavaScript 面试题. f = function () { return true; }; g = function () { return false; }; (function() { if (g() && [] == ![]) { f = function () { return false; }; function g() { return true; } } })(); console.info(f()); 首先看前两行 var f = function () {

小猿圈之2019年前端JavaScript面试题（二）

小猿圈前端讲师今天继续给你总结js面试题,前面一篇文章咱们已经有一片js基础部分面试题,今天小猿圈web讲师为你讲解js前端应用设计问题,一定要好好看哦,为了能赢在其他人前面. JavaScript前端应用设计问题 1.解释单向数据流和双向数据绑定. Angular1.x基于双向数据绑定,而React,Vue,Elm等基于单向数据流架构. 2.单向数据流架构在哪些方面适合MVC? MVC拥有大约50年的悠久历史,并已演变为MVP,MVVM和MV*.两者之间的相互关系是什么?如果MVC是架构模式,

一个javascript面试题

javascript面试题代码: <script type="text/javascript"> function fun(x,y){ console.log("log====fun外部x值="+x+",y的值="+y+"下一步输出y的值="+y); console.log(y); return{ fun:function(m){ console.log("x的值="+x); console.l

5个经典的JavaScript面试题

在IT界中公司对JavaScript开发者的要求还是比较高的,但是如果JavaScript开发者的技能和经验都达到了一定的级别,那他们还是很容易跳到优秀的公司的,当然薪水就更不是问题了.但是在面试之前,面试准备也应该足够的充分,毕竟不是 每个优秀的开发者都能在短时间内表现自己.在这篇文章中,我将会列出5个常见的前端开发面试题.看到这里你证明你一定是个程序员或是HR了,不防把文章看 完,了解一下自己还有什么不足之处,有什么问题希望大家可以在留言中交流. 问题1: 作用域 看一下下面的代码: (fu

一道Javascript面试题引发的血案

文章首发于szhshp的第三边境研究所,转载请注明 先来看几道面试题,公司的开发们都尝试做了一下,然而基本没有人能够全部答对. 覆盖的考点很多,也有一些难度,题目挺有意思建议手动执行一边玩玩. Question 1 for (var i = 0; i <5 ; i++) { setTimeout(function(){ console.log(i) ),1000} } console.log(i) Q:这道题目会输出什么? A:这道题目还比较简单,如果对Javascript稍微有一点深入的同学都

Javascript面试题浅析

分享几道JavaScript相关的面试题. 字符串反转 这这里提供了两种解题思路.如果各位读者还有其他的思路,可以分享交流! 第一方法: function reverse(str){ var sp = str.split(','); //保存反转之后的字符串 var new_str = ''; /*从后往前取,用逗号分隔*/ for(var i = sp.length-1;i>=0;i--){ new_str += sp[i]+','; } /*取到length-1,否则会取到最后一个逗号.*/

前端程序员经常忽视的一个JavaScript面试题

在网上找到一个有关JavaScript的面试题,特整理如下: function Foo() { getName = function () { alert (1); }; return this; } Foo.getName = function () { alert (2);}; Foo.prototype.getName = function () { alert (3);}; var getName = function () { alert (4);}; function getName

JavaScript面试题：重复输出一个给定的字符串

面试题 重复输出一个给定的字符串(str第一个参数)n 次 (num第二个参数),如果第二个参数num不是正数的时候,返回空字符串. function repeatStringNumTimes(str, num) { return str; } repeatStringNumTimes("abc", 3); 提供测试情况: repeatStringNumTimes("*", 3) //应该返回 "***". repeatStringNumTime