<JavaScript>几道javascript练习题

漂泊旅途 發表於 2019-11-20 22:35:00

<h2 id="articleHeader0">问题1: 作用域（Scope）</h2>
考虑以下代码：
<div class="cnblogs_code">
<pre>(function() {
var a = b = 5;
})();

console.log(b);</pre>
</div>
 
控制台（console）会打印出什么？
答案
上述代码会打印出5。
这个问题的陷阱就是，在立即执行函数表达式（IIFE）中，有两个赋值，但是其中变量a使用关键词var来声明。这就意味着a是这个函数的局部变量。与此相反，b被分配给了全局作用域（译注：也就是全局变量）。
这个问题另一个陷阱就是，在函数中没有使用”严格模式” ('use strict';)。如果严格模式开启，那么代码就会报错 ” Uncaught ReferenceError: b is not defined” 。请记住，如果这是预期的行为，严格模式要求你显式地引用全局作用域。所以，你需要像下面这么写：
<div class="cnblogs_code">
<pre>(function() {
'use strict';
var a = window.b = 5;
})();

console.log(b);</pre>
</div>
 
<h2 id="articleHeader1">问题2: 创建 “原生(native)” 方法</h2>
在 String 对象上定义一个 repeatify 函数。这个函数接受一个整数参数，来明确字符串需要重复几次。这个函数要求字符串重复指定的次数。举个例子：
<div class="cnblogs_code">
<pre>console.log('hello'.repeatify(3));</pre>
</div>
 
应该打印出hellohellohello.
答案
一个可行的做法如下：
<div class="cnblogs_code">
<pre>String.prototype.repeatify = String.prototype.repeatify || function(times) {
var str = '';

for (var i = 0; i < times; i++) {
 str += this;
}

return str;
};</pre>
</div>
 
这个问题测试了开发人员对 javascript 中继承及原型(prototype)属性的知识。这也验证了开发人员是否有能力扩展原生数据类型功能（虽然不应该这么做）。
在这里，另一个关键点是，看你怎样避免重写可能已经定义了的方法。这可以通过在定义自己的方法之前，检测方法是否已经存在。
<pre class="hljs javascript"><code>String.prototype.repeatify = String.prototype.repeatify || function(times) {/* code here */};</code></pre>
当你被问起去扩展一个Javascript方法时，这个技术非常有用。
另一个：重复输出一个给定的字符串（str第一个参数）n 次（num第二个参数），如果第二个参数num不是正数的时候，返回空字符串。
<div class="cnblogs_code">
<pre>function repeatStringNumTimes(str, num) {
return str;
}
repeatStringNumTimes("abc", 3);</pre>
</div>
 
提供测试情况：
<div class="cnblogs_code">
<pre>repeatStringNumTimes("*", 3) //应该返回 "***".
repeatStringNumTimes("abc", 3) //应该返回 "abcabcabc".
repeatStringNumTimes("abc", 4) //应该返回 "abcabcabcabc".
repeatStringNumTimes("abc", 1) //应该返回 "abc".
repeatStringNumTimes("*", 8) //应该返回 "********".
repeatStringNumTimes("abc", -2) //应该返回 "".</pre>
</div>
 
解题思路：
三种方法：
<blockquote>使用 <code>while</code> 循环 使用递归 使用ES6 <code>repeat()</code></blockquote>
<h3 id="articleHeader2">方法1：通过 <code>while</code> 循环重复输出一个字符串</h3>
这可能是最常规的解题思路。while 语句只要指定的条件计算结果为true的时候，就执行其语句。while 语句结构大概是这样的：
<pre class="hljs lisp"><code>while (condition)
statement</code></pre>
在每次通过循环之前计算条件结果。如果条件为true，则执行语句。如果条件为false，则执行继续 while 循环之后的任何语句。
只要条件为true，语句就会执行。这里是解决方案：
<div class="cnblogs_code">
<pre>function repeatStringNumTimes(string, times) {
// 第1步. 常见一个空字符，用来寄存重复的字符串
var repeatedString = "";

// 第2步. 设置 while 循环的条件为(times > 0) 作为检查
while (times > 0) { // 只要 times 大于 0, 语句就会执行
// 执行语句 statement
repeatedString += string; // 等价于 repeatedString = repeatedString + string; 
times--; // 递减，等价于 times = times - 1; 
}
/* while循环逻辑
 条件 T/F repeatedString += string 结果 次数
1th (3 > 0) true "" + "abc" "abc" 2
2th (2 > 0) true "abc" + "abc" "abcabc" 1
3th (1 > 0) true "abcabc" + "abc" "abcabcabc" 0
4th (0 > 0) false
}
*/

// 第3步. 返回重复字符串
return repeatedString; // "abcabcabc"
}

repeatStringNumTimes("abc", 3);
去掉注释后：

function repeatStringNumTimes(string, times) {
var repeatedString = "";
while (times > 0) {
repeatedString += string;
times--;
}
return repeatedString;
}
repeatStringNumTimes("abc", 3);</pre>
</div>
 
好，轻松完成！不过这里还可以有几个变种：
对于老前端来说，首先一个可能会将字符串拼接，修改为数组join()拼接字符串，例如：
<div class="cnblogs_code">
<pre>function repeatStringNumTimes(string, times) {
var repeatedArr = []; //
while (times > 0) {
repeatedArr.push(string);
times--;
}
return repeatedArr.join("");
}
repeatStringNumTimes("abc", 3)</pre>
</div>
 
很多老前端都有用数组join()拼接字符串的“情怀”，因为很早以前普遍认为数组join()拼接字符串比字符串+拼接速度要快得多。不过现在未必，例如，V8 下+拼接字符串，要比数组join()拼接字符串快。我用这两个方法测试了3万次重复输出，只相差了几毫秒。
另一个变种可以用 for 循环：
<div class="cnblogs_code">
<pre>function repeatStringNumTimes(string, times) {
var repeatedString = "";
for(var i = 0; i < times ;i++) {
repeatedString += string;
}
return repeatedString;
}
repeatStringNumTimes("abc", 3)</pre>
</div>
 
<h3 id="articleHeader3">方法2：通过条件判断和递归重复输出一个字符串</h3>
递归是一种通过重复地调用函数本身，直到它达到达结果为止的迭代操作的技术。为了使其正常工作，必须包括递归的一些关键特征。
第一种是基本情况：一个语句，通常在一个条件语句（如if）中，停止递归。
第二种是递归情况：调用递归函数本身的语句。
这里是解决方案：
<div class="cnblogs_code">
<pre>function repeatStringNumTimes(string, times) {
// 步骤1.检查 times 是否为负数，如果为 true 则返回一个空字符串 
if (times < 0) {
return "";
}

// 步骤2.检查times是否等于1，如果是，返回字符串本身。
if (times === 1) {
return string;
}

// 步骤3. 使用递归
else {
return string + repeatStringNumTimes(string, times - 1); // return "abcabcabc";
}
/*
递归方法的第一部分你需要记住，你不会只调用一次，您将有好几个嵌套调用
 times string + repeatStringNumTimes(string, times - 1)
 1st call 3 "abc" + ("abc", 3 - 1)
 2nd call 2 "abc" + ("abc", 2 - 1)
 3rd call 1 "abc" => if (times === 1) return string;
 4th call 0 "" => if (times <= 0) return "";
递归方法的第二部分
 4th call will return ""
 3rd call will return "abc"
 2nd call will return "abc"
 1st call will return "abc"
最后调用是串联所有字符串
return "abc" + "abc" + "abc"; // return "abcabcabc";
*/
}
repeatStringNumTimes("abc", 3);</pre>
</div>
 
去掉注释后：
<div class="cnblogs_code">
<pre>function repeatStringNumTimes(string, times) {
if(times < 0)
return "";
if(times === 1)
return string;
else
return string + repeatStringNumTimes(string, times - 1);
}
repeatStringNumTimes("abc", 3);</pre>
</div>
 
<h3 id="articleHeader4">方法3：使用ES6 <code>repeat()</code> 方法重复输出一个字符串</h3>
这个解决方案比较新潮，您将使用 String.prototype.repeat() 方法：
repeat() 方法构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本。这个方法有一个参数 count 表示重复次数，介于0和正无穷大之间的整数 : [0, +∞) 。表示在新构造的字符串中重复了多少遍原字符串。重复次数不能为负数。重复次数必须小于 infinity，且长度不会大于最长的字符串。
这里是解决方案：
<div class="cnblogs_code">
<pre>function repeatStringNumTimes(string, times) {
//步骤1.如果 times 为正数，返回重复的字符串
if (times > 0) { // (3 > 0) => true
return string.repeat(times); // return "abc".repeat(3); => return "abcabcabc";
}

//Step 2. Else 如果times是负数，如果为true则返回一个空字符串
else {
return "";
}
}

repeatStringNumTimes("abc", 3);</pre>
</div>
 
去掉注释后：
<div class="cnblogs_code">
<pre>function repeatStringNumTimes(string, times) {
if (times > 0)
return string.repeat(times);
else
return "";
}
repeatStringNumTimes("abc", 3);</pre>
</div>
 
您可以使用三元表达式作为 if/else 语句的快捷方式，如下所示：
<div class="cnblogs_code">
<pre>function repeatStringNumTimes(string, times) {
return times > 0 ? string.repeat(times) : "";
}
repeatStringNumTimes("abc", 3);</pre>
</div>
 
<h2 id="articleHeader5">问题3: 变量提升（Hoisting）</h2>
执行以下代码的结果是什么？为什么？
<div class="cnblogs_code">
<pre>function test() {
console.log(a);
console.log(foo());

var a = 1;
function foo() {
 return 2;
}
}

test();</pre>
</div>
 
答案
这段代码的执行结果是undefined 和 2。
这个结果的原因是，变量和函数都被提升(hoisted) 到了函数体的顶部。因此，当打印变量a时，它虽存在于函数体（因为a已经被声明），但仍然是undefined。换言之，上面的代码等同于下面的代码：
<div class="cnblogs_code">
<pre>function test() {
var a;
function foo() {
 return 2;
}

console.log(a);
console.log(foo());

a = 1;
}

test();</pre>
</div>
 
<h2 id="articleHeader6">问题4: 在javascript中，<code>this</code>是如何工作的</h2>
以下代码的结果是什么？请解释你的答案。
<div class="cnblogs_code">
<pre>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());</pre>
</div>
 
答案
这段代码打印结果是：Aurelio De Rosa 和 John Doe 。原因是，JavaScript中关键字this所引用的是函数上下文，取决于函数是如何调用的，而不是怎么被定义的。
在第一个console.log()，getFullname()是作为obj.prop对象的函数被调用。因此，当前的上下文指代后者，并且函数返回这个对象的fullname属性。相反，当getFullname()被赋值给test变量时，当前的上下文是全局对象window，这是因为test被隐式地作为全局对象的属性。基于这一点，函数返回window的fullname，在本例中即为第一行代码设置的。
<h2 id="articleHeader7">问题5: call() 和 apply()</h2>
修复前一个问题，让最后一个console.log() 打印输出Aurelio De Rosa.
答案
这个问题可以通过运用call()或者apply()方法强制转换上下文环境。如果你不了解这两个方法及它们的区别，我建议你看看这篇文章 function.call和function.apply之间有和区别?。下面的代码中，我用了call(),但apply()也能产生同样的结果：
<pre class="hljs css"><code>console.log(test.call(obj.prop));</code></pre>
问题6: 闭包（Closures）
考虑下面的代码：
<div class="cnblogs_code">
<pre>var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
nodes.addEventListener('click', function() {
 console.log('You clicked element #' + i);
});
}</pre>
</div>
 
请问，如果用户点击第一个和第四个按钮的时候，控制台分别打印的结果是什么？为什么？
答案
上面的代码考察了一个非常重要的 JavaScript 概念：闭包（Closures）。对于每一个JavaScript开发者来说，如果你想在网页中编写5行以上的代码，那么准确理解和恰当使用闭包是非常重要的。如果你想开始学习或者只是想简单地温习一下闭包，那么我强烈建议你去阅读 Colin Ihrig 这个教程：JavaScript Closures Demystified
也就是说，代码打印两次You clicked element #NODES_LENGTH，其中NODES_LENGTH是nodes的结点个数。原因是在for循环完成后，变量i的值等于节点列表的长度。此外，因为i在代码添加处理程序的作用域中，该变量属于处理程序的闭包。你会记得，闭包中的变量的值不是静态的，因此i的值不是添加处理程序时的值（对于列表来说，第一个按钮为0，对于第二个按钮为1，依此类推）。在处理程序将被执行的时候，在控制台上将打印变量i的当前值，等于节点列表的长度。
<h2 id="articleHeader8">问题7: 闭包（Closures）</h2>
修复上题的问题，使得点击第一个按钮时输出0，点击第二个按钮时输出1，依此类推。
答案
有多种办法可以解决这个问题，下面主要使用两种方法解决这个问题。
第一个解决方案使用立即执行函数表达式（IIFE）再创建一个闭包，从而得到所期望的i的值。实现此方法的代码如下：
<div class="cnblogs_code">
<pre>var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
nodes.addEventListener('click', (function(i) {
 return function() {
 console.log('You clicked element #' + i);
 }
})(i));
}</pre>
</div>
 
另一个解决方案不使用IIFE，而是将函数移到循环的外面。这种方法由下面的代码实现：
<div class="cnblogs_code">
<pre>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.addEventListener('click', handlerWrapper(i));
}</pre>
</div>
 
问题8：数据类型
考虑如下代码：
<div class="cnblogs_code">
<pre>console.log(typeof null);
console.log(typeof {});
console.log(typeof []);
console.log(typeof undefined);</pre>
</div>
 
答案
前面的问题似乎有点傻，但它考察 typeof 操作符的知识。很多JavaScript开发人员不知道typeof的一些特性。在此示例中，控制台将显示以下内容：
<pre class="hljs scala"><code>object
object
object
undefined</code></pre>
最令人惊讶的输出结果可能是第三个。大多数开发人员认为typeof []会返回Array。如果你想测试一个变量是否为数组，您可以执行以下测试：
<div class="cnblogs_code">
<pre>var myArray = [];
if (myArray instanceof Array) {
// do something...
}</pre>
</div>
 
<h2 id="articleHeader9">问题9：事件循环</h2>
下面代码运行结果是什么？请解释。
<div class="cnblogs_code">
<pre>function printing() {
console.log(1);
setTimeout(function() { console.log(2); }, 1000);
setTimeout(function() { console.log(3); }, 0);
console.log(4);
}
printing();</pre>
</div>
 
答案
输出结果：
<pre class="hljs"><code>1
4
3
2</code></pre>
想知道为什么输出顺序是这样的，你需要弄了解setTimeout()做了什么，以及浏览器的事件循环原理。浏览器有一个事件循环用于检查事件队列，处理延迟的事件。UI事件（例如，点击，滚动等），Ajax回调，以及提供给setTimeout()和setInterval()的回调都会依次被事件循环处理。因此，当调用setTimeout()函数时，即使延迟的时间被设置为0，提供的回调也会被排队。回调会呆在队列中，直到指定的时间用完后，引擎开始执行动作（如果它在当前不执行其他的动作）。因此，即使setTimeout()回调被延迟0毫秒，它仍然会被排队，并且直到函数中其他非延迟的语句被执行完了之后，才会执行。
有了这些认识，理解输出结果为“1”就容易了，因为它是函数的第一句并且没有使用setTimeout()函数来延迟。接着输出“4”，因为它是没有被延迟的数字，也没有进行排队。然后，剩下了“2”，“3”，两者都被排队，但是前者需要等待一秒，后者等待0秒（这意味着引擎完成前两个输出之后马上进行）。这就解释了为什么“3”在“2”之前。
<h2 id="articleHeader10">问题10：算法</h2>
写一个isPrime()函数，当其为质数时返回true，否则返回false。
答案
我认为这是面试中最常见的问题之一。然而，尽管这个问题经常出现并且也很简单，但是从被面试人提供的答案中能很好地看出被面试人的数学和算法水平。
首先，因为JavaScript不同于C或者Java，因此你不能信任传递来的数据类型。如果面试官没有明确地告诉你，你应该询问他是否需要做输入检查，还是不进行检查直接写函数。严格上说，应该对函数的输入进行检查。
第二点要记住：负数不是质数。同样的，1和0也不是，因此，首先测试这些数字。此外，2是质数中唯一的偶数。没有必要用一个循环来验证4,6,8。再则，如果一个数字不能被2整除，那么它不能被4，6，8等整除。因此，你的循环必须跳过这些数字。如果你测试输入偶数，你的算法将慢2倍（你测试双倍数字）。可以采取其他一些更明智的优化手段，我这里采用的是适用于大多数情况的。例如，如果一个数字不能被5整除，它也不会被5的倍数整除。所以，没有必要检测10,15,20等等。如果你深入了解这个问题的解决方案，我建议你去看相关的Wikipedia介绍。
最后一点，你不需要检查比输入数字的开方还要大的数字。我感觉人们会遗漏掉这一点，并且也不会因为此而获得消极的反馈。但是，展示出这一方面的知识会给你额外加分。
现在你具备了这个问题的背景知识，下面是总结以上所有考虑的解决方案：
<div class="cnblogs_code">
<pre>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;
}</pre>
</div>
 
<h2 id="articleHeader11">问题11：数据类型</h2>
<div class="cnblogs_code">
<pre>var a = {n : 1};
var b = a;
a.x = a = {n : 2};
console.log(a.x);
console.log(b.x);</pre>
</div>
 
解析：
<div class="cnblogs_code">
<pre>var a = {n : 1};
var b = a;
// 此时b = {n:1};
//如果此时a.n=4，那么b.n也等于4
a.x = a = {n : 2};
// 从右往左赋值，a = {n:2}; 新对象
// b = {n:2}，//此时笔者认为b应该还是{n:1}待考证确认
// a.x 中的a是{n:1}; {n:1}.x = {n:2}; 旧对象
// 因为b和a是引用的关系所以b.x也等于 {n:2}
console.log(a.x); undefined
// 此时的a是新对象，新对象上没有a.x 所以是undefined
console.log(b.x); {n:2}
var i = 10;
i += i *= i;

// i*=i 100
// i+= 这里的i是 =10不是100
console.log(i);</pre>
</div>
 
<h2 id="articleHeader12">问题12：</h2>
<div class="cnblogs_code">
<pre>if (!("a" in window)) {
var a = 1;
}

console.log(a);</pre>
</div>
 
解析：
在浏览器环境中，全局变量都是window的一个属性，即 var a = 1 等价于 window.a = 1。in操作符用来判断某个属性属于某个对象，可以是对象的直接属性，也可以是通过prototype继承的属性。
再看题目，在浏览器中，如果没有全局变量 a ，则声明一个全局变量 a (ES5没有块级作用域)，并且赋值为1。很多人会认为打印的是1。非也，大家不要忘了变量声明会被前置！什么意思呢？题目也就等价于
<div class="cnblogs_code">
<pre>var a;

if (!("a" in window)) {
a = 1;
}

console.log(a);</pre>
</div>
 
所以其实已经声明了变量a，只不过if语句之前值是undefined，所以if语句压根不会执行。 最后答案就是 undefined
<h2 id="articleHeader13">问题13：</h2>
<div class="cnblogs_code">
<pre>var a = 1,
b = function a(x) {
 x && a(--x);
};
console.log(a);</pre>
</div>
 
解析： 这道题有几个需要注意的地方：
1.变量声明、函数声明会被前置，但是函数表达式并不会，准确说类似变量声明前置，举个栗子：
<div class="cnblogs_code">
<pre>console.log('b', b); // b undefined
var b = function() {}
console.log('b', b); // b function () {}</pre>
</div>
 
2.具名的函数表达式的名字只能在该函数内部取到，举个例子(排除老的IE?)：
<div class="cnblogs_code">
<pre>var foo = function bar () {}

console.log('foo', foo);
// foo function bar(){}

console.log('bar', bar);
// Uncaught ReferenceError: bar is not defined</pre>
</div>
 
综合这两点，再看题目，最后输出的内容就为 1
<h2 id="articleHeader14">问题14：</h2>
<div class="cnblogs_code">
<pre>function a(x) {
return x * 2;
}
var a;
console.log(a);</pre>
</div>
 
解析： 函数声明会覆盖变量声明，但不会覆盖变量赋值，举个栗子简单粗暴：
<div class="cnblogs_code">
<pre>function foo(){
return 1;
}
var foo;
console.log(typeof foo); // "function"</pre>
</div>
 
函数声明的优先级高于变量声明的优先级，但如果该变量foo赋值了，那结果就完全不一样了：
<div class="cnblogs_code">
<pre>function foo(){
return 1;
}
var foo = 1;
console.log(typeof foo); // "number"</pre>
</div>
 
变量foo赋值以后，变量赋值初始化就覆盖了函数声明。这个需要注意 再看题目
<div class="cnblogs_code">
<pre>function a(x) {
return x * 2;
}
var a;
console.log(a); // function a(x) {...}</pre>
</div>
 
<h2 id="articleHeader15">问题15：</h2>
<div class="cnblogs_code">
<pre>function b(x, y, a) {
arguments[2] = 10;
console.log(a);
}
b(1, 2, 3);</pre>
</div>
 
解析： 这题考察 arguments 对象的用法(详看JavaScript中的arguments对象) 一般情况，arguments与函数参数是动态绑定关系(为什么说是一般稍后会解释)，所以很好理解，最后输出的是10
但是但是但是，我们不要忘了一个特殊情况–严格模式，在严格模式中 arguments 与相当于函数参数的一个拷贝，并没有动态绑定关系，举个栗子：
<div class="cnblogs_code">
<pre>'use strict'
// 严格模式！！

function b(x, y, a) {
arguments[2] = 10;
console.log(a);
}
b(1, 2, 3); // 3</pre>
</div>
 
<h2 id="articleHeader16">问题16：</h2>
<div class="cnblogs_code">
<pre>function a() {
console.log(this);
}
a.call(null);</pre>
</div>
 
解析：
<div class="cnblogs_code">
<pre>function a() {
console.log(this);
}
a.call(null);</pre>
</div>
 
关于 a.call(null); 根据ECMAScript262规范规定： 如果第一个参数传入的对象调用者是null或者undefined的话，call方法将把全局对象（浏览器上是window对象）作为this的值。所以，不管你什么时候传入null或者 undefined，其this都是全局对象window。所以，在浏览器上答案是输出 window 对象。
但是但是但是，我们依旧不能忘记一个特殊情况–严格模式，在严格模式中，null 就是 null，undefined 就是 undefined ，举个栗子：
<div class="cnblogs_code">
<pre>'use strict';
// 严格模式！！

function a() {
console.log(this);
}
a.call(null); // null
a.call(undefined); // undefined</pre>
</div>
 
参考文章： 1.10道典型的JavaScript面试题 2.对匿名函数的深入理解（彻底版） 见评论区 3.你真的知道JS吗？ 
来源：https://www.cnblogs.com/isAndyWu/p/11898735.html

頁: [1]

琼殿技术论坛's Archiver

<JavaScript>几道javascript练习题