#yyds干货盘点#javascript的奇葩问题

Posted 2022-09-08 尼羲

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了#yyds干货盘点#javascript的奇葩问题相关的知识，希望对你有一定的参考价值。

作为前端开发工程师，javascript 是我们的主要开发语言，它本身语法比较简单，并且生态系统也非常完善，在社区的影响力越来越大。

在我们使用过程中，经常会遇到各种奇怪的问题，让我们经常摸不着头脑。

奇怪的 `try..catch`

下面代码执行后将返回什么？2 还是 3？

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

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

`[]` 和 `null` 都是对象

下面 3 行代码返回结果是什么？

typeof [];
typeof null;

null instanceof Object;

返回结果是这样的：

typeof []; // -> object
typeof null; // -> object

null instanceof Object; // false

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]

箭头函数返回 `undefined`

函数 f2 执行后为什么返回了 undefined？

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

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

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

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

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

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

还能使用反引号执行函数？

调用函数除了下面的方式，还有其他方式吗？

function f(...args) 
  return args;


f(1, 2, 3); // -> [ 1, 2, 3 ]

当然还有啦，我们可以使用反引号调用：

f`Hello string $前端自习课, Hello boolean $false, Hello array $[1, 2, 3]`;
/*
[
    ["Hello string ",  ", Hello boolean ", ", Hello array ", ""],
    "前端自习课",
    false,
    [1, 2, 3]
]
*/