专栏首页张培跃JavaScript面试题补充(6---10)

JavaScript面试题补充(6---10)

问题6: 闭包(Closures)

考虑下面的代码:

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

也就是说,代码打印两次You clicked element #NODES_LENGTH,其中NODES_LENGTH是nodes的结点个数。原因是在for循环完成后,变量i的值等于节点列表的长度。此外,因为i在代码添加处理程序的作用域中,该变量属于处理程序的闭包。你会记得,闭包中的变量的值不是静态的,因此i的值不是添加处理程序时的值(对于列表来说,第一个按钮为0,对于第二个按钮为1,依此类推)。在处理程序将被执行的时候,在控制台上将打印变量i的当前值,等于节点列表的长度。

问题7: 闭包(Closures)

修复上题的问题,使得点击第一个按钮时输出0,点击第二个按钮时输出1,依此类推。

答案

有多种办法可以解决这个问题,下面主要使用两种方法解决这个问题。

第一个解决方案使用立即执行函数表达式(IIFE)再创建一个闭包,从而得到所期望的i的值。实现此方法的代码如下:

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,而是将函数移到循环的外面。这种方法由下面的代码实现:

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));
}

问题8:数据类型

考虑如下代码:

console.log(typeof null);
console.log(typeof {});
console.log(typeof []);
console.log(typeof undefined);

答案

前面的问题似乎有点傻,但它考察 typeof 操作符的知识。很多JavaScript开发人员不知道typeof的一些特性。在此示例中,控制台将显示以下内容:

object
object
object
undefined

最令人惊讶的输出结果可能是第三个。大多数开发人员认为typeof []会返回Array。如果你想测试一个变量是否为数组,您可以执行以下测试:

var myArray = [];
if (myArray instanceof Array) {
   // do something...
}

问题9:事件循环

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

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毫秒,它仍然会被排队,并且直到函数中其他非延迟的语句被执行完了之后,才会执行。

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

问题10:算法

写一个isPrime()函数,当其为质数时返回true,否则返回false

答案

我认为这是面试中最常见的问题之一。然而,尽管这个问题经常出现并且也很简单,但是从被面试人提供的答案中能很好地看出被面试人的数学和算法水平。

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

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

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

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

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;
}

结论

本文我们讨论了5个在对Javascript开发者面试中常问起的典型问题。实际中的问题会因面试的不同而不同,来自面试的真实问题可能会有所不同,但是涵盖的概念和主题通常都是十分相似的。我希望你愉悦地测试你的能力。万一你不知道所有的答案,不要担心:没有学习和经验不能解决的问题。 如果你在面试中被问到了其他有趣的问题,不要犹豫马上来和我们分享吧。这会帮助到很多的开发者。

在这篇文章中,在一些问题和练习的帮助下,我讨论了其他 JavaScript 重要概念,这些概念通常是前端开发人员角色面试的一部分。我希望你成功地回答所有这些问题,或者你学到了新的东西,以便你可以在你的下一次面试中表现更好。

本文分享自微信公众号 - 张培跃(zhangpeiyue8)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-06-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 关于JavaScript中的闭包及应用场景

    先来看一下关于闭包的定义:闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式,就是在一个函数内部创建另一个函数。

    用户1272076
  • 37个JavaScript基本面试问题和解答(建议收藏)

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

    用户1272076
  • JavaScript的装逼优化技巧之惰性加载函数

    天下武功唯快不破!编程也是同理!程序的优化,其实最终优化的是代码执行速度。而执行速度的提升往往是从很多代码细节当中不断堆砌出来的。相反,垃圾代码也是同理。

    用户1272076
  • StarGAN - 图像到图像的翻译

    通过输入来自两个不同领域的训练数据,StarGANs模型可以学习将某一个领域的图片转换成为另一个领域。

    AI研习社
  • 测试数据——猜想大验证(3)

    有数据,不妨测试一下,非常有趣: 1.各个信用等级的逾期率 ? 其他的都比较符合预期,但A的偏高,我也很纳闷,把数据调出来,从高到低排是这样的: ? 借的量巨大...

    用户1075292
  • 测试数据——有效范围(2)

    测试数据库搞好,学习了一下逾期率的官方定义: • 对于某支标,如果某一期没有正常还款,则悲观逾期率=所有未还本金/借款本金; • 对于一批标,悲观逾期率=当前逾...

    用户1075292
  • 数据分析:未来,你可能发生信用卡逾期吗?

    信用无价,无论是在现在还是在未来! 进入移动互联金融时代,持卡人的消费、还款等使用行为已经成为个人征信的重要依据之一。逾期还款会给持卡人留下不良信用记录,会对持...

    沉默的白面书生
  • 「小程序JAVA实战」 小程序私有页面的生命周期以及导航(10)

    PS:这块主要是对配置的生命周期的熟悉,了解下redirectTo 和 navigateTo 之前的区别。

    IT故事会
  • JS面向对象高级特性

    本篇是通过学习视频《一头扎进javascirpt高级篇》整理的一些相关知识,大致包括下面几个方面:   1 对象的创建方法   2 对象的对象属性、私有属...

    用户1154259
  • 使用jsonpath解析json

    为了能像写XPath一样写json路径,Stefan Goessner开发了jsonpath(https://goessner.net/articles/Jso...

    SeanCheney

扫码关注云+社区

领取腾讯云代金券