欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

javascriptvoid怎么解决(简单好玩的编程代码)

程序员文章站 2023-11-20 21:18:58
javascript 已经存在了相当长的一段时间(大约 26 年),在这段时间里,该语言已经有了很大的发展。这种演变大多是有目的,特别是在最新的迭代中,开发者社区已经设法影响了其中的一些变化,使 ja...

javascript 已经存在了相当长的一段时间(大约 26 年),在这段时间里,该语言已经有了很大的发展。

这种演变大多是有目的,特别是在最新的迭代中,开发者社区已经设法影响了其中的一些变化,使 javascript 成为一种非常灵活和好用的语言。

然而,在这些年的演变过程中,可以说仍有一些残余的过时功能,这些功能还没有被拿掉,但确实没有任何用途(或者更确切地说,在原本的用途方面效率不高)。

以下三个 javascript 特性,即使它们在运行时仍然可用,但你应避免去使用它们。

void 操作符

你可能在某一时刻看到过 void 操作符的存在。在过去,每当你点击一个链接,而这个链接将触发一个 javascript 函数时,你会添加 href=”javascript:void(0)” 以确保默认行为(即页面跳转)不会触发。

但这究竟是什么意思呢?

void 操作符是一种在 javascript 中生成 undefined 值的方法。没错,它能接受任何表达式,并且每次都返回 undefined。

我知道你在想什么:为什么不直接使用已经存在的 undefined 关键字呢?嗯,正如你看到的,在 ecmascript 5 之前,undefined 关键字并不是一个常量值。是的,你可以定义 undefined,如果你再想一想,这不就是我们曾经想做的事情吗?

当然,这样做是没有意义的,这就是为什么最终它被重新定义为一个常量值,且不可更改。然而,因为早前你是可以改变它的,所以 void 会允许你访问 undefined,即使这个常量不再起作用。

事实上,一个很好的方法是通过创建你自己的 iifes 来重新定义只属于你的命名空间的常量,避免与第三方库的任何问题,其中一个参数确实是 undefined,像这样:

(function (window, undefined) {
  // 你这里的逻辑,可以把 undefined 当作预期
})(window, void(0))

当然,今天的 void 操作符仍然有它的用途,但它是非必要的。例如,在现在的 javascript 中,最好的用例是帮助避免单行箭头函数的非预期返回。

你可能知道,一个单行箭头函数将返回该行的结果,即使你没有显式使用 return 语句。

const double = x => x * 2; // 返回 x 乘以 2 的结果

const callafunction = () => myfunction(); // 返回 myfunction 所返回的结果,即使我不想这样做

这两个函数都会返回一些东西。显然,对于 double 函数来说,你希望它返回一个值,但另一个可能不是,你可能只是想用它调用另一个函数(即 myfunction()),但你对其结果值不感兴趣。因此你可以这样做:

const callafunction = () => void myfunction(); // 返回 myfunction 所返回的结果,即使我不想这样做

而这将立即覆盖返回值,并确保你的调用值返回 undefined。

对我来说,这种行为提供了一个最小的好处,使 void 在这个时代的 javascript 中毫无用处。

我建议你避免使用它,让它保持一个废弃的状态。

with 语句

这个是 javascript 自带的结构之一,但你可能从未听说过它,因为它并没有被真正推广。事实上,即使是 mdn 官方文档也不鼓励你使用它,因为它可能导致非常混乱的代码。

with 语句允许扩展给定语句的作用域链。换句话说,它允许你将一个表达式注入到给定语句的作用域,理想情况下,可以简化所述语句。

下面是一个示例,这样你就会明白我想说什么:

function greet(user) {
  
  with(user) {
    console.log(`hello there ${name}, how are you and your ${kids.length} kids today?`)
  }
}

greet({
  name: "fernando",
  kids: ["brian", "andrew"]
})

注意 greet 函数中 with 语句的魔力。这是一个基本的示例,表明了表达式的 happy path。但是,让我们看另一个情况,事情变得有点复杂:

function greet(user, message) {
  with(user) {
    console.log(`hey ${name}, here is a message for you: ${message}`)
  }
}

// happy path
greet({
  name: "fernando"
}, "you got 2 emails")

// kinda sad path
greet({
  name: "fernando",
  message: "unrelated message"
}, "you got email")

你认为这种执行方式的输出结果会是什么?

hey fernando, here is a message for you: you got 2 emails
hey fernando, here is a message for you: unrelated message

由于你在传入的对象中添加了一个同名属性,你无意间覆盖了函数的第二个参数。我想补充的是,这完全是正常的,因为人们永远不会期望两者处于同一个作用域级别。然而,多亏了 with,我们把这两个作用域都混在了一起,但结果并不理想。

这都是为了说明要避免使用 with,虽然它可能看起来是节省代码量的好方法,但你的代码很快会变得非常复杂,这会对别人(或两周后的你)去理解你的代码造成心智负担。

labels 标签

如果你学习编程足够早(像我一样),你就经历过其他语言(如 c 语言)中对 go-to 语句的憎恨。那太糟糕了,那是一个在当年很有意义的功能,但最终随着同一问题的更新的解决方案,这种功能变得如此过时和糟糕,以至于变成了一种反模式。

因此 javascript 不得不去实现它。

go-to 语句是一种方式,让你在代码的任何地方放置一个标记,然后从其他地方跳到那里。你可以跳到一个函数的中间,或者跳到一个 if 语句里面,它就像一个神奇的入口,可以跳到你代码中的任何地方。我相信你可以看到这可能是一个问题,它的力量太大,灵活性太强,我们当然会错过使用它的机会。

然而,javascript 实现了一个类似的,但不完全相同的结构:labels 标签。

javascript 中的标签语句是一个你放在语句前的标记,然后你可以 break 或 continue。请注意,没有更多的 go-to,这是一个很好的优势。

你可以这样写:

label1: {
  console.log(1)
  let condition = true
  if(condition) {
  	break label1
  }
  console.log(2)
}
console.log("end")

而输出结果将是:

1
end

当然,这个例子看起来非常像一个 if..else 语句。而且你完全可以说,它看起来并不那么糟糕。然而,你打破了代码的正常流程,跳过了语句。如果你就是希望如此,那么使用 if..else 带来的心智负担会小很多。

当我们把标签与循环和 continue 语句的相互作用包括在内时,labels 标签的问题就变得更明显了。

let i, j;

loop1:
for(i = 0; i < 10; i++) {
  loop2:
  for(j = 0; j < 10; j++) {

    if(j == 3 && i == 2) {
      continue loop2;
    }
    console.log({i, j})
    if(j % 2 == 0) {
      continue loop1;
    }
  }
}

你能在头脑中运行上述代码并告诉我具体的输出结果吗?这并非不可能,但要花点时间。上面的脚本会打印:

{ i: 0, j: 0 }
{ i: 1, j: 0 }
{ i: 2, j: 0 }
{ i: 3, j: 0 }
{ i: 4, j: 0 }
{ i: 5, j: 0 }
{ i: 6, j: 0 }
{ i: 7, j: 0 }
{ i: 8, j: 0 }
{ i: 9, j: 0 }

从本质上讲,第二个 if 在 0 的时候评估为 true,所以 continue 语句影响了外循环,导致它移动到下一个索引值,这反过来又重置了内循环,导致它回到 0,同样的事情不断发生,重复了 10 次。第一个 if,如果你想知道的话,从来没有评估为 true,因为 j 从来没有达到 0 以外的任何值。

labels 标签可能是棘手的小家伙,即使你能正确地使用它们,并且从解释器的角度来看,它们也很有意义,但你应该为人类而不是为机器写代码。别人会来读它(甚至是三周后的你),当他们看到标签的那一刻,他们会永远恨你。当然,他们会花更多的时间来理解你代码的基本流程,但这在目前是次要问题。

本文总结

请不要误会,我喜欢 javascript 这门语言,自从 18 年前我开始从事网络开发工作以来,我一直在以不同的方式与它互动。我见证了这门语言的发展,就像一坛好酒,随着时间的推移而变得更好。然而,如果我说这门语言中没有一些我不喜欢的黑暗角落,那是假的。而这三个功能恰好表明了这一点。

好消息是,在我多年的经验中,我还没有看到 with 或标签(label)被实施并部署到生产中。这并不是说没有这样的情况,只是我从未见过,这让我觉得没有多少代码审查会让它们通过。

你有没有看到这些功能在现代 javascript 中被使用?