7 个 JavaScript 面试题,看到第 3 个直接崩溃,全答对算我输

教程大全  / 只看大图  / 倒序浏览   ©

#楼主# 2019-11-6

跳转到指定楼层

马上注册,分享更多源码,享用更多功能,让你轻松玩转云大陆。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
假如你符合 JavaScript 高级开发人员的资格,在编码面试中很有可能会被问到一些刁钻的问题。
我知道这不公平。一些不知名的人把你放在角落上下打量,似乎想看你是什么做成的。这是一次不愉快的经历。
145001zz1135o4jhc3tzzz.jpg


你能做什么?

遵循这个建议:“熟能生巧”。通过投入足够的时间,更好地定期深入了解 JavaScript,将改善你的编码,并顺便提高你的面试技巧。
在这篇文章中,你会发现7个乍一看很简单,但实际上很棘手的 JavaScript 面试题。
虽然一开始这些问题看起来是随机的,但是它们试图与JavaScript 的重要概念挂钩。所以你最好在下次面试前练习一下!
1. 意外创建的全局变量

问题:
在以下代码中,typeof atypeof b的值分别是什么:
function foo() {
let a = b = 0;
a++;
return a;
}
foo();
typeof a; // => ???
typeof b; // => ???
答案:
让我们仔细看看第 2 行:let a = b = 0。这个语句的确声明了一个局部变量 a。但是,它的确声明了一个全局变量 b
foo() 作用域或全局作用域中都没有声明变量 b 。因此 JavaScript 将表达式 b = 0 解释为 window.b = 0
145001bm2d7mmhjel1pcl1.jpg


b 是一个偶然创建的全局变量。
在浏览器中,上述代码片段相当于:
function foo() {
let a; window.b = 0; a = window.b; a++;
return a;
}
foo();
typeof a; // => 'undefined'
typeof window.b; // => 'number'
typeof a 'undefined'。变量 a 仅在 foo() 范围内声明,在外部范围内不可用。
typeof b 等于 'number'b 是一个值为 0 的全局变量。
2. 数组 length 属性

问题:
clothes[0] 的值是什么:
const clothes = ['jacket', 't-shirt'];
clothes.length = 0;
clothes[0]; // => ???
答案:
数组对象的 length 属性有一个特殊的行为:
减少 length 属性的值有一个副作用,就是会删除索引位于新旧长度值之间的元素。
由于 length 的这种行为,当 JavaScript 执行 clothes.length = 0 时,数组 clothes 中的所有项都被删除了。
clothes[0] undefined,由于 clothes 数组被清空了。
3. 鹰眼测试

问题:
numbers 数组的内容是什么:
const length = 4;
const numbers = [];
for (var i = 0; i < length; i++);{
numbers.push(i + 1);
}
numbers; // => ???
答案:
让我们仔细看看出现在左花括号 { 前面的分号; :
145001zqzsfqflmz9dhm3m.jpg


很容易忽略这个分号,而它创建了一个空语句。空语句是不做任何事情的语句。
for() 在空语句(什么也不做)上循环了 4 次,忽略了实际上往数组里添加元素的代码块 :
{
numbers.push(i + 1);
}
上述代码等同于:
const length = 4;
const numbers = [];
var i;
for (i = 0; i < length; i++) {
// does nothing
}
{
// a simple block
numbers.push(i + 1);
}
numbers; // => [5]
for() 递增变量 i 直到 4。然后 JavaScript 进入代码块 { numbers.push(i + 1); },将 4 + 1 添加到 numbers 数组中。
这样 numbers 就是 [5]。
4. 自动插入分号

问题:
arrayFromValue() 返回什么值?
function arrayFromValue(item) {
return
[items];
}
arrayFromValue(10); // => ???
答案:
很容易忽略 return 关键字和 [items] 表达式之间的换行。
换行使 JavaScript 自动在 return[items] 表达式之间插入一个分号。
这里有一段等价的代码,它在 return 后插入分号:
function arrayFromValue(item) {
return; [items];
}
arrayFromValue(10); // => undefined
函数中的 return; 导致它返回 undefined
因此 arrayFromValue(10) 的值是 undefined
查看 这篇文章(https://dmitripavlutin.com/7-tips-to-handle-undefined-in-javascript/#24-function-return-value) 阅读更多关于自动插入分号的内容。
5. 经典问题:坑爹的闭包

问题:
以下脚本将会在控制台输出什么:
let i;
for (i = 0; i < 3; i++) {
const log = () => {
console.log(i);
}
setTimeout(log, 100);
}
答案:
假如你之前没有听说过这个棘手的问题,你的答案很可能是 0, 1 和 2,这是不正确的。当我第一次尝试解答它时,我的答案也是这样!
执行这个代码段包含两个步骤。
步骤 1:

  • for() 迭代 3 次。在每次迭代过程中,都会创建一个新的函数 log(),它捕获变量 i。然后setTimout() 执行 log()
  • 当 for() 循环完成时,i 变量的值为 3
log() 是一个捕获变量 i 的闭包,它在 for() 循环的外部作用域定义。重要的是要理解闭包从词法上捕获了变量 i
步骤 2:
第 2 步在 100 毫秒后发生:
setTimeout() 调用了队列中的 3 个 log() 回调。log() 读取变量 i 当前值,即 3,并记录到控制台 3
这就是为什么控制台输出 3, 3 和 3
你知道怎样让代码输出 0, 1 和 2 吗?请在评论里写出你的方案。
6. 浮点数问题

问题:
等号判断的结果是什么?
0.1 + 0.2 === 0.3 // => ???
答案:
首先,我们看看 0.1 + 0.2 的值:
0.1 + 0.2; // => 0.30000000000000004
0.10.2 的和,不完全等于 0.3,而是略大于 0.3
由于浮点数在二进制中的编码机制,像浮点数的加法这样的操作会受到舍入误差的影响。
简单地说,直接比较浮点数是不精确的。
因此 0.1 + 0.2 === 0.3false.
查看 0.30000000000000004.com 获取更多信息。
7. 变量提升

问题:
假如在声明之前访问 myVarmyConst 会发生什么?
myVar; // => ???
myConst; // => ???
var myVar = &#x27;value&#x27;;
const myConst = 3.14;
答案:
变量提升和暂时性死区是影响 JavaScript 变量生命周期的两个重要概念。
145002u5vbbzbbnvss3nvx.jpg


在声明之前访问 myVar 结果为 undefined。一个被提升的 var 变量,在它的初始化之前,有一个 undefined 的值。
但是,在声明之前访问 myConst 会抛出 ReferenceError。在声明行 const myConst = 3.14之前,const 变量处于暂时死区。
查看指南 JavaScript 变量提升详解(https://dmitripavlutin.com/javascript-hoisting-in-details/) ,彻底掌握变量提升的概念。
版权

原作者:Dmitri Pavlutin
原文链接:https://dmitripavlutin.com/simple-but-tricky-javascript-interview-questions
译者:KaysonLi
链接:https://juejin.im/post/5dbe818a6fb9a0203c34e4bb
分享淘帖
回复

使用道具

您的回复是对作者最大的奖励

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于作者

亲亲阳光非

新手猿

  • 主题

    7

  • 帖子

    7

  • 关注者

    0

Archiver|手机版|小黑屋|云大陆 | 赣ICP备18008958号-4|网站地图
Powered by vrarz.com!  © 2019-2020版权所有云大陆