10道典型的JavaScript面试题
seekmiki
8年前
<p style="text-align:center"><img src="https://simg.open-open.com/show/a9c7bc0b2525a1126c226be0efacf844.jpg"></p> <p>在IT界中，JavaScript开发人员的需求量一直居高不下。如果你的能力能够胜任这一角色，那么你有很多机会换一家公司，并提高薪水。但在你被一家公司聘用之前，你必须展示你的技能，以通过面试环节。在本文中，我将向您展示10个 JavaScript 技能典型问题以及其相关解决方案，来面试前端工程师。它们很有意思！</p> <h2>问题1: 作用域（Scope）</h2> <p>考虑以下代码：</p> <pre> <code class="language-javascript">(function() { var a = b = 5; })(); console.log(b);</code></pre> <p>控制台（console）会打印出什么？</p> <h3>答案</h3> <p>上述代码会打印出 5 。</p> <p>这个问题的陷阱就是，在立即执行函数表达式（IIFE）中，有两个赋值，但是其中变量 a 使用关键词 var 来声明。这就意味着 a 是这个函数的局部变量。与此相反， b 被分配给了全局作用域（译注：也就是全局变量）。</p> <p>这个问题另一个陷阱就是，在函数中没有使用”严格模式” ( 'use strict'; )。如果 严格模式 开启，那么代码就会报错 ” Uncaught ReferenceError: b is not defined” 。请记住，如果这是预期的行为，严格模式要求你显式地引用全局作用域。所以，你需要像下面这么写：</p> <pre> <code class="language-javascript">(function() { 'use strict'; var a = window.b = 5; })(); console.log(b);</code></pre> <h2>问题2: 创建 “原生(native)” 方法</h2> <p>在 String 对象上定义一个 repeatify 函数。这个函数接受一个整数参数，来明确字符串需要重复几次。这个函数要求字符串重复指定的次数。举个例子：</p> <pre> <code class="language-javascript">console.log('hello'.repeatify(3));</code></pre> <p>应该打印出 hellohellohello .</p> <h3>答案</h3> <p>一个可行的做法如下：</p> <pre> <code class="language-javascript">String.prototype.repeatify = String.prototype.repeatify || function(times) { var str = ''; for (var i = 0; i < times; i++) { str += this; } return str; };</code></pre> <p>这个问题测试了开发人员对 javascript 中继承及原型( prototype )属性的知识。这也验证了开发人员是否有能力扩展原生数据类型功能（虽然不应该这么做）。</p> <p>在这里，另一个关键点是，看你怎样避免重写可能已经定义了的方法。这可以通过在定义自己的方法之前，检测方法是否已经存在。</p> <pre> <code class="language-javascript">String.prototype.repeatify = String.prototype.repeatify || function(times) {/* code here */};</code></pre> <p>当你被问起去扩展一个Javascript方法时，这个技术非常有用。</p> <p>愚人码头译注：重复输出一个给定的字符串的解决方案可以看看这篇文章。也许面试官考你的是知识的广度和对新知识的掌握情况。</p> <h2>问题3: 变量提升（Hoisting）</h2> <p>执行以下代码的结果是什么？为什么？</p> <pre> <code class="language-javascript">function test() { console.log(a); console.log(foo()); var a = 1; function foo() { return 2; } } test();</code></pre> <h3>答案</h3> <p>这段代码的执行结果是 undefined 和 2 。</p> <p>这个结果的原因是，变量和函数都被提升(hoisted) 到了函数体的顶部。因此，当打印变量 a 时，它虽存在于函数体（因为 a 已经被声明），但仍然是 undefined 。换言之，上面的代码等同于下面的代码：</p> <pre> <code class="language-javascript">function test() { var a; function foo() { return 2; } console.log(a); console.log(foo()); a = 1; } test();</code></pre> <h2>问题4: 在javascript中，`this`是如何工作的</h2> <p>以下代码的结果是什么？请解释你的答案。</p> <pre> <code class="language-javascript">var fullname = 'John Doe'; var obj = { fullname: 'Colin Ihrig', prop: { fullname: 'Aurelio De Rosa', getFullname: function() { return this.fullname; } } }; console.log(obj.prop.getFullname()); var test = obj.prop.getFullname; console.log(test());</code></pre> <h3>答案</h3> <p>这段代码打印结果是： Aurelio De Rosa 和 John Doe 。原因是，JavaScript中关键字 this 所引用的是函数上下文，取决于函数是如何调用的，而不是怎么被定义的。</p> <p>在第一个 console.log() ， getFullname() 是作为 obj.prop 对象的函数被调用。因此，当前的上下文指代后者，并且函数返回这个对象的 fullname 属性。相反，当 getFullname() 被赋值给 test 变量时，当前的上下文是全局对象 window ，这是因为 test 被隐式地作为全局对象的属性。基于这一点，函数返回 window 的 fullname ，在本例中即为第一行代码设置的。</p> <h2>问题5: call() 和 apply()</h2> <p>修复前一个问题，让最后一个 console.log() 打印输出 Aurelio De Rosa .</p> <h3>答案</h3> <p>这个问题可以通过运用 call() 或者 apply() 方法强制转换上下文环境。 下面的代码中，我用了 call() ,但 apply() 也能产生同样的结果：</p> <pre> <code class="language-javascript">console.log(test.call(obj.prop));</code></pre> <h2>问题6: 闭包（Closures）</h2> <p>考虑下面的代码：</p> <pre> <code class="language-javascript">var nodes = document.getElementsByTagName('button'); for (var i = 0; i < nodes.length; i++) { nodes[i].addEventListener('click', function() { console.log('You clicked element #' + i); }); }</code></pre> <p>请问，如果用户点击第一个和第四个按钮的时候，控制台分别打印的结果是什么？为什么？</p> <h3>答案</h3> <p>上面的代码考察了一个非常重要的 JavaScript 概念：闭包（Closures）。对于每一个JavaScript开发者来说，如果你想在网页中编写5行以上的代码，那么准确理解和恰当使用闭包是非常重要的。</p> <p>也就是说，代码打印两次 You clicked element #NODES_LENGTH ，其中 NODES_LENGTH 是nodes的结点个数。原因是在for循环完成后，变量 i 的值等于节点列表的长度。此外，因为 i 在代码添加处理程序的作用域中，该变量属于处理程序的闭包。你会记得，闭包中的变量的值不是静态的，因此 i 的值不是添加处理程序时的值（对于列表来说，第一个按钮为0，对于第二个按钮为1，依此类推）。在处理程序将被执行的时候，在控制台上将打印变量 i 的当前值，等于节点列表的长度。</p> <h2>问题7: 闭包（Closures）</h2> <p>修复上题的问题，使得点击第一个按钮时输出0，点击第二个按钮时输出1，依此类推。</p> <h3>答案</h3> <p>有多种办法可以解决这个问题，下面主要使用两种方法解决这个问题。</p> <p>第一个解决方案使用立即执行函数表达式（IIFE）再创建一个闭包，从而得到所期望的i的值。实现此方法的代码如下：</p> <pre> <code class="language-javascript">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)); }</code></pre> <p>另一个解决方案不使用IIFE，而是将函数移到循环的外面。这种方法由下面的代码实现：</p> <pre> <code class="language-javascript">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)); }</code></pre> <h2>问题8：数据类型</h2> <p>考虑如下代码：</p> <pre> <code class="language-javascript">console.log(typeof null); console.log(typeof {}); console.log(typeof []); console.log(typeof undefined);</code></pre> <h3>答案</h3> <p>前面的问题似乎有点傻，但它考察 typeof 操作符的知识。很多JavaScript开发人员不知道 typeof 的一些特性。在此示例中，控制台将显示以下内容：</p> <pre> <code class="language-javascript">object object object undefined</code></pre> <p>最令人惊讶的输出结果可能是第三个。大多数开发人员认为 typeof [] 会返回 Array 。如果你想测试一个变量是否为数组，您可以执行以下测试：</p> <pre> <code class="language-javascript">var myArray = []; if (myArray instanceof Array) { // do something... }</code></pre> <h2>问题9：事件循环</h2> <p>下面代码运行结果是什么？请解释。</p> <pre> <code class="language-javascript">function printing() { console.log(1); setTimeout(function() { console.log(2); }, 1000); setTimeout(function() { console.log(3); }, 0); console.log(4); } printing();</code></pre> <h3>答案</h3> <p>输出结果：</p> <p>想知道为什么输出顺序是这样的，你需要弄了解 setTimeout() 做了什么，以及浏览器的事件循环原理。浏览器有一个事件循环用于检查事件队列，处理延迟的事件。UI事件（例如，点击，滚动等），Ajax回调，以及提供给 setTimeout() 和 setInterval() 的回调都会依次被事件循环处理。因此，当调用 setTimeout() 函数时，即使延迟的时间被设置为 0 ，提供的回调也会被排队。回调会呆在队列中，直到指定的时间用完后，引擎开始执行动作（如果它在当前不执行其他的动作）。因此，即使 setTimeout() 回调被延迟 0 毫秒，它仍然会被排队，并且直到函数中其他非延迟的语句被执行完了之后，才会执行。</p> <p>有了这些认识，理解输出结果为“1”就容易了，因为它是函数的第一句并且没有使用 setTimeout() 函数来延迟。接着输出“4”，因为它是没有被延迟的数字，也没有进行排队。然后，剩下了“2”，“3”，两者都被排队，但是前者需要等待一秒，后者等待0秒（这意味着引擎完成前两个输出之后马上进行）。这就解释了为什么“3”在“2”之前。</p> <h2>问题10：算法</h2> <p>写一个 isPrime() 函数，当其为质数时返回 true ，否则返回 false 。</p> <h3>答案</h3> <p>我认为这是面试中最常见的问题之一。然而，尽管这个问题经常出现并且也很简单，但是从被面试人提供的答案中能很好地看出被面试人的数学和算法水平。</p> <p>首先， 因为JavaScript不同于C或者Java，因此你不能信任传递来的数据类型。如果面试官没有明确地告诉你，你应该询问他是否需要做输入检查，还是不进行检查直接写函数。严格上说，应该对函数的输入进行检查。</p> <p>第二点要记住：负数不是质数。同样的，1和0也不是，因此，首先测试这些数字。此外，2是质数中唯一的偶数。没有必要用一个循环来验证4,6,8。再则，如果一个数字不能被2整除，那么它不能被4，6，8等整除。因此，你的循环必须跳过这些数字。如果你测试输入偶数，你的算法将慢2倍（你测试双倍数字）。可以采取其他一些更明智的优化手段，我这里采用的是适用于大多数情况的。例如，如果一个数字不能被5整除，它也不会被5的倍数整除。所以，没有必要检测10,15,20等等。</p> <p>最后一点，你不需要检查比输入数字的开方还要大的数字。我感觉人们会遗漏掉这一点，并且也不会因为此而获得消极的反馈。但是，展示出这一方面的知识会给你额外加分。</p> <p>现在你具备了这个问题的背景知识，下面是总结以上所有考虑的解决方案：</p> <pre> <code class="language-javascript">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; }</code></pre> <h2>结论</h2> <p>本文我们讨论了5个在对Javascript开发者面试中常问起的典型问题。实际中的问题会因面试的不同而不同，来自面试的真实问题可能会有所不同，但是涵盖的概念和主题通常都是十分相似的。我希望你愉悦地测试你的能力。万一你不知道所有的答案，不要担心：没有学习和经验不能解决的问题。 如果你在面试中被问到了其他有趣的问题，不要犹豫马上来和我们分享吧。这会帮助到很多的开发者。</p> <p>在这篇文章中，在一些问题和练习的帮助下，我讨论了其他 JavaScript 重要概念，这些概念通常是前端开发人员角色面试的一部分。我希望你成功地回答所有这些问题，或者你学到了新的东西，以便你可以在你的下一次面试中表现更好。</p> <p>原文：</p> <ul> <li><a href="/misc/goto?guid=4959739423755382891" rel="nofollow,noindex">5 Typical JavaScript Interview Exercises</a></li> <li><a href="/misc/goto?guid=4959739423839585279" rel="nofollow,noindex">5 More JavaScript Interview Exercises</a></li> </ul> <p> </p> <p>来自：http://www.css88.com/archives/7052</p> <p> </p>