这10个JavaScript面试题，看看你会几个？

英文 | https://medium.com/javascript-in-plain-english/10-javascript-interview-questions-for-2020-697b40de9480

翻译 | web前端开发（ID：web_qdkf)

JavaScript正在成为世界上最受欢迎的编程语言。随着对JS开发人员的需求增长，你必须为此做好准备。以下是你梦寐以求的十大JavaScript基础面试题。

1、var和let有什么区别？

尽管这似乎很容易，但您不会相信我因为没有回答这个问题而不得不拒绝多少候选人。区别在于范围级别。var是功能范围的，但let（和const）是块范围的。要了解差异，请查看以下示例：

function doStuff() {  // both a and b will be available for this function, but not outside  let a = 5;  var b = 5;
  console.log(a + b); // 10}
doStuff(); // 10;console.log(a); // ReferenceErrorconsole.log(b); // ReferenceError
function doMoreStuff() {  if (2 + 2 === 4) {    // Here, a will be available for the whole function    var a = 5;    // But b will be available only inside this if block    let b = 5;  }  console.log(a); // 5  console.log(b); // ReferenceError}
doMoreStuff();// 5// ReferenceError
for (let i = 0; i < 5; i++) {  // i is reccreated on every interation  // and setTimeout gets a new i every time  setTimeout(() => console.log(i), 100);}/*01234*/
for (var j = 0; j < 5; j++) {  // j is scoped to the outside function (which is the file itself)  // thus, it is not recreated and setTimeout gets the same reference to j  setTimeout(() => console.log(j), 100);}/*55555*/

2、==和===有什么区别？

如果你的答案是“ ==按值比较，===也按类型比较”，那是不正确的。JS引擎的理解方式， == 允许强制类型和 === 不允许。类型强制是解释器的自动类型转换。这是JS中最令人困惑的原因（[] == ![]确实如此）。你可以在以下代码段中观察到差异：

/* Here, '5' will be converted to 5 */5 == '5'; // true5 === '5'; // false
/* Here, true will be converted to 1 */1 == true; // true1 > false; // true0 === false; // false
// Here, JS will try to convert both of these to number// Number('true') = NaN (Not a Number), but Number(true) = 1'true' == true; // false'true' === true; // false

3、“ this”关键字是什么意思？

您可能很想回答这个问题，它指向类体内的类实例，但这也不对。首先，JS中的类是语法糖，不会引入任何新功能。this关键字在任何函数中均可用，并指向包含此函数的对象。通过一个示例可能更容易理解：

const myObject = {  a: 'b',  b: 'c',  doStuff: function() {    // Here, this refers to myObject    console.log(this.a + this.b);  }}
myObject.doStuff(); // bc
// BUT:const anotherObject = {  a: 'abacaba',  b: '!'};anotherObject.doStuff = myObject.doStuff;anotherObject.doStuff(); // abacaba!
// Arrow functions do not have their own this and refer to the outer one:const arrowObject = {  a: 'b',  // here, this refers to the root function (file itself), which has no idea about a  doMoreStuff: () => console.log(this.a)};
arrowObject.doMoreStuff(); // undefined

4、什么是构造函数？

JS中的构造函数也不是与类相关的函数，并且与this关键字紧密相关。使用new关键字调用构造函数，并返回任何this值。请注意，在构造函数this中，函数并不指向外部对象，而是用作占位符对象：

function Car(name, make) {
  // Here, this is not a reference to outer object
  // But a placeheloder object you can use to construct the
  // desired value
  this.name = name;
  this.make = make;
  // you do not have to return anything, as this is automatically returned
}


const myCar = new Car('Outback', 'Subaru');
console.log(myCar.name); // Outback

5、如何将基于回调的函数转换为基于Promise的函数？

解决问题更多的是练习，但前提是你必须知道。回调函数只是你打算在以后调用的简单函数。当你必须等待某些事情（例如来自API的响应）时，通常会使用它们。但是，基于回调函数的代码太复杂了，这就是为什么引入Promises函数的原因。

我不在这里讨论，但是如果你现在知道Promises是什么，请查看本文（地址https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise）。在下一个示例中，要求你将getData回调函数转换为Promise：

// the function itselffunction getData(callback, errorCallback) {  try {    // Do some network/api stuff...    callback(result)  } catch (e) {    errorCallback(e);  }}
// Here is how you would use it:getData(result => console.log(result), error => console.error(error));
// Here is how to create a Promise-based function from it:
function getDataAsync() {  return new Promise((resolve, reject) => {    getData(resolve, reject);  });}
getDataAsync()  .then(result => console.log(result))  .catch(error => console.error(error));
// OR
async functoin main() {  const result = await getDataAsync();  console.log(result);}

Promise构造函数接受一个回调，该回调接收两个函数：resolve和reject。在回调内部，你可以执行耗时的任务，并根据结果调用`resolve`或`reject`。

6、NaN === NaN？

假。这是无休止的争论之源，也是有关JS的最令人困惑的部分之一。简而言之，NaN代表“不是数字”，仅因为一个值不是数字，而另一个值不是数字并不意味着它们相等。缺点是你无法真正检查变量是否正在NaN使用myVariable === NaN。你可以使用该Number.isNaN功能或myVariable !== myVariable进行检查。

7、0.1 + 0.2 === 0.3？

假。这个技巧不仅适用于JS：在任何语言的浮点运算中都很常见。它与CPU处理浮点数的方式有关。实际值0.1 + 0.2类似于0.300000001并检查是否相等，你将编写Math.abs(0.3 - (0.2 + 0.1)) <= EPS，其中EPS是一个任意小的值（例如0.00001）。

8、JS中的原始数据类型是什么？

JS中的原始数据类型是不是对象且没有方法的数据。这是JS中原始数据类型的列表：

• 布尔型

• 空值

• 未定义

• 数

• 大整数

• 串

• 符号

9、什么是“严格”模式？

在JS中，你可以通过"use strict";在文件的开头放置严格模式。严格模式可以在代码中进行更严格的错误检查，并使调试更加容易。例如，此代码段可在常规JS中使用，但不严格：

x = 'abacaba'; // using an undeclared variable is not allowed in strict mode
delete x; // deleting variables is also not allowed
function(x1, x1) {} // duplicating argument names is not allowed

10、该代码的输出是什么？

function abacaba() {    return    {      a: 'b'    }}
console.log(abacaba());

undefined。发生这种情况是因为JS将在第2行的“返回”之后插入分号，并将第3-5行视为作用域而不是对象定义。

总结

在此，感谢你的阅读，也希望今天的文章对你有所帮助，祝你在面试中一切顺利！