#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]
]
*/

这个看着很神奇的样子,但是实际上用的是​​模版字符串​​。这是一种高级形式的模版字符串,是带标签的模版字符串。

发表评论

相关文章