JavaScript面试问题：常见问题

朴灿烈づ我的快乐病毒、 2022-11-27 04:25 274阅读 0赞

In JavaScript there are little technicalities that don’t quite make sense at first until you discover them. Now, everyone has their own list of JavaScript Gotchas, but things like “JavaScript is case sensitive” isn’t a real gotcha. To me, that is how it should be. It’s not a confusing trick. It’s just technical in that way.

在JavaScript中，只有很少的技术性乍一看才有意义，直到您发现它们为止。 现在，每个人都有自己JavaScript陷阱列表，但是“ JavaScript区分大小写”之类的东西并不是真正的陷阱。 对我来说，应该是这样。 这不是一个令人困惑的把戏。 这样只是技术问题。

A true “gotcha” to me is when `1 == 1` and `1 == '1'` is true, but `[] == []` is not true. Albeit, this is one of the more simple “gotchas”, it still doesn’t immediately appear intuitive until you delve into the “why”.

对我来说，真正的“陷阱”是当`1 == 1`和`1 == '1'`为真，但是`[] == []`不为真。 尽管这是更简单的“陷阱”之一，但在您深入研究“为什么”之前，它仍然不会立即显得直观。

In this guide, we’ll go through some of the common gotchas that you might find in a JavaScript interview. Interviewers probably won’t directly ask these questions, but they might ask you something relative to them or to do a problem involving them.

在本指南中，我们将介绍您在JavaScript采访中可能会发现的一些常见陷阱。 采访者可能不会直接问这些问题，但他们可能会问您一些与他们有关的问题，或者是涉及他们的问题。

## var vs. let **(**var vs. let**)** ##

This is one of the most basic gotchas - at first the [`var` and `let`][var_ and _let] keywords seemed so similar to me, I couldn’t tell there was any difference. But, here is a common way to show the difference:

这是最基本的陷阱之一-首先是[`var` ， `let`][var_ and _let]关键字看起来与我非常相似，我无法分辨出有什么区别。 但是，这是显示差异的常用方法：

// let
    for(let i=0; i<10; i++) {
      //...
    }
    console.log(i) // Reference Error: i is not defined
    
    // var
    for(var j=0; j<10; j++) {
      //...
    }
    console.log(j) // 10

One big difference is that `let` is block-scoped - meaning it’s limited to whatever block it is defined in. In order for the `console.log` to know what `i` is, you would have to hoist the `i` out of the `for` loop. That’s exactly what `var` does behind the scenes. The `var` keyword is function-scoped, as in, only limited by the parent function. And is automatically hoisted outside the block it is declared in.

一个大区别是， `let`是块作用域的-这意味着它仅限于任何阻止它在为了定义的`console.log`知道`i`是，你将不得不扯起 `i`出了`for`循环。 这就是`var`在幕后所做的。 `var`关键字是函数范围的，例如，仅受父函数限制。 并自动提升到声明它的块之外。

## 加法与串联 **(**Addition vs Concatenation**)** ##

1 + 1; // 2, obviously
    1 + "1"; // "11"

As you can see, JavaScript converts numbers to strings. Or does it?

如您所见，JavaScript将数字转换为字符串。 还是呢？

1 - "1"; // 0 (number)
    1 * "1"; // 1 (number)
    1 / "1"; // 1 (number)
    "1" * "1"; // 1 (yep, still a number)

No, in fact JavaScript converts strings to numbers in most cases. In the case of the `+` operator, it’s concatenated instead of added. Concatenated, like strings: `"your" + "name" // "your name"`.

不，实际上JavaScript在大多数情况下会将字符串转换为数字。 对于`+`运算符，将其串联而不是添加。 像字符串一样串联： `"your" + "name" // "your name"` 。

## 娜·高察斯 **(**NaN Gotchas**)** ##

`NaN` stands for “not a number”. It’s one of the more confusing (“number"s?) to deal with in JavaScript. For instance:

`NaN`代表“不是数字”。 这是在JavaScript中处理起来比较混乱的数字(例如“？”)之一，例如：

NaN === NaN; // false
    NaN == NaN; // false as well
    typeof NaN; // number
    "" == NaN; // false

In fact anything equal to "NaN” is false, event though there are plenty of things that are “not a number”. That’s why instead you must use `isNaN()`. But even that can be confusing:

实际上，任何等于“ NaN”的东西都是错误的，尽管有很多事情不是“数字”，这就是为什么必须使用`isNaN()`的原因，但是即使那样也会造成混淆：

isNaN("string"); // true - what we would expect, as a string is not a number
    isNaN(123); // false - also expected
    // false means it's a number, right?
    
    isNaN(""); // false - hmm...
    isNaN("45"); // false - this is a string, I thought
    isNaN([]); // false - wait so an empty array is a number?
    
    isNaN([1, 2]); // true
    isNaN({}); // true
    isNaN(() => {}); // true

## 平等/真实与虚假 **(**Equality / Truthy vs Falsy**)** ##

You may already be familiar with the differences between `==` and `===`. `==` checks only the value, while `===` includes type checking. That’s why `1 === "1"` is false, but `1 == "1"` is true. But, did you know this is true: `null == undefined`. But of course, this is loose checking with the `==`.

您可能已经熟悉`==`和`===`之间的区别。 `==`仅检查值，而`===`包括类型检查。 这就是为什么`1 === "1"`为假，而`1 == "1"`为真。 但是，您知道这是真的吗： `null == undefined` 。 但是，当然，这是使用`==`宽松检查。

There’s also the `!=` which would be saying “not equal”. This is true: `null !== undefined`, but this is false `null != undefined`. Following? Basically, the first one is saying, “null is not exactly equal to undefined”, yet the second says, “null isn’t not loosely equal to undefined” (double negative, means they are loosely equal).

还有`!=`会说“不相等”。 这是正确的： `null !== undefined` ，但这是错误的`null != undefined` 。 以下？ 基本上，第一个是说：“ null并不完全等于未定义”，但是第二个是说：“ null并不完全等于未定义”(双重否定，表示它们大致相等)。

But let’s look at more comparisons that get even more convoluted. These all checkout as true:

但是，让我们看一下更复杂的比较。 这些全部签出为true：

false == '0' // true
    0 == false   // true
    '' == 0      // true
    false == ''  // true
    [] == ''     // true, but we'll get to this
    
    '1' == true  // true
    1 == true    // true
    'false' == true // true

These are the confusing comparison checks, but they aren’t technically truthy vs. falsy. They are just value checks, because remember `[]==[]` results is false and yet, “\[\]” is a truthy value. The way to check for truthy vs falsy, is putting things in an `if` block. For instance:

这些是比较令人困惑的比较检查，但从技术上讲，它们不是真实的还是虚假的。 它们只是值检查，因为记住`[]==[]`结果是错误的，但是“ \[\]”是真实值。 检查真假与虚假的方法是将事情放在`if`块中。 例如：

if ("") {
      console.log(true);
    } else {
      console.log(false);
    }
    // logs false
    
    //But look at this
    if ([]) {
      console.log(true);
    }
    // logs true - an empty array is still truthy
    
    if ([] == "") {
      console.log(true);
    }
    // logs true - but look at the first one - it logged false

An empty object, `{}`, also logs true. JavaScript is quite interesting when it comes to equality and types, but I suggest using the triple equals `===` or `!==` for your comparisons.

空对象`{}`也记录为true。 当涉及到相等和类型时，JavaScript非常有趣，但是我建议使用三等号`===`或`!==`进行比较。

Now, the last example is a good picture of a key distinction. The loose equality checks, checks for value, not necessarily falsy/truthy. `if` blocks check for falsy/truthy. See, in JavaScript this is true: `[] == false`. But as we saw above, an `if` block checks an empty array as truthy. Obviously, `if(false)` will not go anywhere.

现在，最后一个示例很好地说明了关键区别。 松散的平等检查，检查价值，不一定虚假/真实。 `if`块检查虚假/真实。 在JavaScript中，这是真的： `[] == false` 。 但是正如我们在上面看到的， `if`块将空数组检查为真。 显然， `if(false)`不会随处可见。

## 自动分号插入 **(**Automatic Semicolon Insertion**)** ##

I’ve noticed that if I forgot to add a semicolon to end one line of code, it doesn’t give me an error. Behind the scenes [Automatic Semicolon Insertion][] inserts the missing semicolon, which is okay, but could create a bad habit. Some statements need the semicolon or JavaScript might not know they have ended, while others, as we will see, haven’t ended at all, but JavaScript thought it had.

我注意到，如果我忘记添加分号来结束一行代码，它不会给我一个错误。 在幕后， [自动分号插入会][Automatic Semicolon Insertion]插入丢失的分号，这可以，但是可能会养成不良习惯。 一些需要分号的语句或JavaScript可能不知道它们已经结束，而正如我们将看到的，其他一些语句甚至还没有结束，但是JavaScript认为已经结束了。

function increment(num) {
      return
      ++num
    }
    console.log(increment(3))

Now that’s not the best example in the world, but it might surprise you that it returns `undefined`. That’s because a semicolon is secretly inserted at the end of “return” and the next line of code is never reached. A little bit like this:

现在，这并不是世界上最好的示例，但是它返回`undefined`可能会让您感到惊讶。 这是因为在“返回”的末尾秘密插入了分号，并且从未到达下一行代码。 有点像这样：

function increment(num) {
      return;
      ++num;
    }
    console.log(increment(3));

## 全局变量 **(**Global Variables**)** ##

Finally, JavaScript has this weird behavior of creating global variables out of thin air. This circles back to our first gotcha dealing with `let` vs `var` keywords.

最后，JavaScript具有这种奇怪的行为，就是凭空创建全局变量。 这回到我们处理`let` vs `var`关键字的第一个陷阱。

Remember we said that `let` is block-scoped, while `var` is function-scoped? What then is this?

还记得我们说过， `let`是块作用域的，而`var`是函数作用域的吗？ 那是什么

for(i = 0; i < 10; i++) {
      // ...
    }
    console.log(i); // 10

Notice what we did? There is no definition to the “i” variable: `i=0`. What’s the result? A global variable was created. This is a dangerous thing, because now our `i` variable is global.

注意到我们做了什么？ “ i”变量没有定义： `i=0` 。 结果如何？ 创建了一个全局变量。 这是一件危险的事情，因为现在我们的`i`变量是全局变量。

This is also true in any function: `function someFn() { someVar = 0; }`. The `someVar` here becomes a global variable and it’s akin to saying `window.var = 0`.

在任何函数中也是如此： `function someFn() { someVar = 0; }` `function someFn() { someVar = 0; }` 。 这里的`someVar`变为全局变量，类似于说`window.var = 0` 。

## 结论 **(**Conclusion**)** ##

JavaScript has some tricky stuff to navigate and the truth is interviewers will quiz you on them, even if you wouldn’t practically ever see them in a real-life scenario. But, what are you to do?

JavaScript有一些棘手的内容需要浏览，而事实是，即使您在现实生活中几乎看不到它们，面试官也会向您提问。 但是，你要做什么？

The good news is, there is plenty of documentation and video-teachings out there to show you these things. I would recommend doing a search for things like “JavaScript tough interview questions” or “JavaScript tricky questions”. And even if you don’t get them in an interview, at least you know them for future problems if they ever come up. Plus, you can trick your friends with them as well!

好消息是，这里有大量的文档和视频教学可以向您展示这些内容。 我建议搜索“ JavaScript艰难的面试问题”或“ JavaScript棘手的问题”之类的内容。 即使您没有让他们参加面试，至少您知道他们将来会遇到的问题。 另外，您也可以与他们一起欺骗您的朋友！

Best of luck and when in doubt, just remember these are things all developers face - you aren’t alone!

祝您好运，当有疑问时，请记住所有开发人员都面临的这些问题-您并不孤单！

> 翻译自: [https://www.digitalocean.com/community/tutorials/js-gotchas][https_www.digitalocean.com_community_tutorials_js-gotchas]

[var_ and _let]: https://www.digitalocean.com/community/tutorials/js-var-let-const
[Automatic Semicolon Insertion]: http://www.bradoncode.com/blog/2015/08/26/javascript-semi-colon-insertion/
[https_www.digitalocean.com_community_tutorials_js-gotchas]: https://www.digitalocean.com/community/tutorials/js-gotchas