意想不到的 JavaScript 问题

84 阅读2分钟

1.下面代码执行后将返回什么?**2** 还是 **3**

(() => {
  try {
    return 2;
  } finally {
    return 3;
  }
})();

答案是 3,这是为什么呢?这是因为在 try...catch...finally 语句中,无论是否抛出异常 finally 子句都会执行。此外,如果抛出异常,即使没有 catch 子句处理异常,finally 子句中的语句也会执行。

2.下面 3 行代码返回结果是什么?

typeof [];
typeof null;

null instanceof Object;

typeof 操作符返回一个字符串,且必须符合 Table 37: typeof 操作符 返回值。对于没有实现 [[Call]]null、普通对象、标准特异对象和非标准特异对象,它返回字符串 'object'

console.log(typeof 42);
// expected output: "number"

console.log(typeof '前端自习课');
// expected output: "string"

console.log(typeof true);
// expected output: "boolean"

console.log(typeof undeclaredVariable);
// expected output: "undefined"

但是,可以使用 toString 方法检查对象的类型。

Object.prototype.toString.call([]);
// -> '[object Array]'

Object.prototype.toString.call(new Date());
// -> '[object Date]'

Object.prototype.toString.call(null);
// -> '[object Null]'

3.函数 **f2** 执行后为什么返回了 **undefined**

let f1 = () => '前端自习课';
f1(); // -> '前端自习课'

let f2 = () => {};
f2(); // -> undefined

我们第一眼感觉应该是返回 {},可是却返回了 undefined,这本质原因是因为箭头函数返回的 {} 是箭头函数语法的一部分,我们写一个测试用例就能看出来:

let f2 = () => {
    return '前端自习课'
};
f2(); // -> '前端自习课'

因此上面 f2 函数返回的是 undefined,当然,如果需要返回一个 {} 对象也是可以的,只需要使用括号将返回值包裹起来:

let f2 = () => ({});
f2(); // -> {}

5. {}{} 是 undefined

{}{}; // -> undefined
{}{}{}; // -> undefined
{}{}{}{}; // -> undefined
{foo: 'bar'}{}; // -> 'bar'
{}{foo: 'bar'}; // -> 'bar'
{}{foo: 'bar'}{}; // -> 'bar'
{a: 'b'}{c:' d'}{}; // -> 'd'
{a: 'b', c: 'd'}{}; // > SyntaxError: Unexpected token ':'
({}{}); // > SyntaxError: Unexpected token '{'

当解析到 {} 会返回 undefined,而解析 {foo: 'bar'}{} 时,表达式 {foo: 'bar'} 返回 'bar'

这里的 {} 有两重含义:表示对象,或表示代码块

例如,在 () => {} 中的 {} 表示代码块。所以我们必须加上括号:() => ({}) 才能让它正确地返回一个对象。

因此,我们现在将 {foo: 'bar'} 当作代码块使用,则可以在终端中这样写:

if (true) {
  foo: "bar";
} // -> 'bar

一样的结果!所以 {foo: 'bar'}{} 中的花括号就是表示代码块