6 个意想不到的 JavaScript 问题

更新日期: 2022-08-02阅读: 255标签: 问题

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

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

本文灵感来自wtfjs,整理了 6 个比较常见并且很有意思的问题。


1. 奇怪的 try..catch

:question:问题

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

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

:bulb:解答

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

:books:参考MDN try...catch


2. [] 和 null 都是对象

:question:问题

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

typeof [];
typeof null;

null instanceof Object;

:bulb:解答

返回结果是这样的:

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]'

:books:参考MDN typeof


3. 箭头函数返回 undefined

:question:问题

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

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

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

:bulb:解答

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

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

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

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


4. 还能使用反引号执行函数?

:question:问题

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

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

:bulb:解答

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

上面示例代码中: f 函数是模版字面量的标签,标签可以用函数解析模板字符串。标签函数的第一个参数包含一个字符串值的数组。其余的参数与表达式相关。

:books:参考MDN 模版字符串 。


5. JavaScript 中也有标签?

:question:问题

下面这种写法会有问题吗?

foo: {
  console.log("Hello");
  break foo;
  console.log("前端自习课");
}

:bulb:解答

答案是没问题,会返回 Hello 的字符串。因为 foo 被识别为一个标签,然后执行后面 console.log("Hello") ,然后执行 break foo 中断执行。

我们经常会使用带标签的语句和 break / continue 语句一起使用,从而实现结束或继续循环:

let str = '';

loop1:
for (let i = 0; i < 5; i++) {
  if (i === 1) {
    continue loop1;
  }
  str = str + i;
}

console.log(str);
// expected output: "0234"

:books:参考MDN label


6. {}{} 是 undefined

:question:问题

我们可以在控制台测试下面代码。类似这样的结构会返回最后定义的对象中的值。

{}{}; // -> 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 '{'

:bulb:解答

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

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

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

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

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

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

原文:https://juejin.cn/post/7126931491702964260


链接: https://www.fly63.com/article/detial/11976

解决mac上每次升级nodejs都要重新安装扩展包的问题

以前用起来没注意到这个现象,最近一段时间发现,每次随着使用brew upgrade自动升级了nodejs版本,原来安装的nodejs扩展包就不起作用了,还需要重新安装一遍。再加上一些扩展包存储网站被墙的问题,这个过程真是令人痛不欲生

点击form 表单中的button导致页面刷新问题

做点击按钮切换背景样式与内容的时候每次都刷新页面 ,发现button写在了form 标签当中,将input或者button的type属性改为button,点击按钮页面就不会自动重新加载了。

解决ios端点击出现闪烁或黑色背景的问题

最近开发一个简单的H5页面,在IOS端测试的时候发现,点击按钮会闪动,出现一个黑色的背景一闪而过,影响用户体验。在ios端,safari浏览器上触发click事件有300ms的延迟相应

前端开发中遇到的一些问题

页面两个标签(非block样式)之间有一个小margin,样式怎么改都去不掉 ;app上点击有背景;手机端input边框阴影;chrome模拟器里点击元素错位;git push 报错RPC failed;

在ios端点击按钮闪烁解决方法

在ios端,safari浏览器上触发click事件有300ms的延迟响应,为touch添加的样式会和click冲突而出现闪烁问题,在safari中触摸事件的相应顺序如下:

js中使用append应注意自动补全问题

一般的标签是如<td></td>、<tr></tr>、<div></div>以成对出现,如果缺少一个都会出错,而append为了保证页面代码的准确性,会对标签进行自动补全,如

如何问一个有效的问题

提问前最好自己过一遍,看有哪里描述不清晰的,哪里表达不通顺,以及是否可以通过现有的这套描述可以让对方很清晰的知道问题所在。 问题:XXX 版本的 XXX 接口调用返回的数据不符合预期。

Node中url.parse(url, true).query:[Object: null prototype]问题

在node v13.5.0中通过url模块解析get请求参数的时候,遇到query: [Object: null prototype],如果我们在node中console.log一个null prototype,就会出现[Object: null prototype]

vue常见问题汇总及解决方案

找不到某些依赖或者模块这种情况一般报错信息可以看到是哪个包抛出的信息.,一般卸载这个模块,安装重新安装下即可。为什么要 return 一个数据对象呢? 官方解释如下: data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。

解决前端常见问题:竞态条件

竞态条件一词翻译自英语 race conditions。当我们在开发前端 web 时,最常见的逻辑就是从后台服务器获取并处理数据然后渲染到浏览器页面上,过程中有不少的细节需要注意

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!