你需要知道的 10 个 JavaScript 技巧和窍门

刺骨的言语ヽ痛彻心扉 2022-09-10 09:23 205阅读 0赞

![6a297b2af7c192d9cb5c6933ecd82b91.png][]

英文 | https://javascript.plainenglish.io/top-10-javascript-tips-and-tricks-you-need-to-know-27896d2a313f

翻译 | 杨小二

JavaScript 非常了不起，许多程序员都在使用它来解决问题。

在本文中，我们将介绍10个在解决 JavaScript 问题时非常方便实用的JavaScript 技巧。

## **1、三元运算符** ##

三元运算符是一个JavaScript运算符，需要三个操作数：条件后跟一个问号（?），则表达式如果执行truthy后跟一个冒号（:），最后是表达，如果执行条件为假。

此运算符经常用作if语句的快捷方式。

使用 if-else 语句。

**1、 三元运算符**

三元运算符是一个 JavaScript 运算符，它需要三个操作数：一个条件，后跟一个问号 (?)，然后是后跟一个冒号 (:)，如果一个条件为真，则执行表达式，如果条件为假，则不执行表达式。

此运算符经常用作 if 语句的快捷方式。

使用 if-else 语句。

![6ed53da6796d9485564215a0755f7ceb.png][]

使用三元运算符。

![e66882e0dbea54710bbff9bf059affa7.png][]

**2、将数字转换为字符串**

可能你会遇到需要将数字转换为字符串的情况。好吧，JavaScript 为你提供了解决方案。

![72eac9045e57e225142433eb41caf61f.png][]

要将数字转换为字符串，你只需将一个空字符串附加到变量 number 即可。

检查下面显示的片段。

![f1ee4f18770cf21959c04f14fbf0c289.png][]

**3、用空对象填充数组**

我们可以在 JavaScript 中创建和填充数组，同时，为数组提供空对象或值。

你需要使用语法Array(number of values to fill)。

要使用值填充空数组，你可以按照下面的代码片段所示进行操作。

![e15f3f5b67acb497ed9a3e55cc407f79.png][]

同样，我们可以声明要填充数组的数据类型。例如，当我们只想用字符串填充数组时，我们可以按照下面的代码片段所示这样做。

当你想要填充其他数据类型（如数字）时，这同样适用。

![b38f4b97c6fdc7ec549c3049bad5e398.png][]

**4、从数组中过滤唯一值**

有时，我们只想从数组中过滤唯一值。假设我们有一个包含重复值的数组并且只想要数组中的确切值，我们该怎么做？

我们可以使用 Array.from() 和新的 Set 来实现，如下所示。

![6692234cb6ed7967caa267551546543b.png][]

**5、创建动态对象和值**

使用 JavaScript，我们可以动态创建对象键和值并相应地更新它们。

![29f5ea74fc09f8a0b54a1c52b41bc430.png][]

**6、切片数组**

以数组中的一个实例为例，我们只需要数组中的一些数字，以我们只需要数组的前 10 个数字为例。我们怎么能做到这一点？

![536429c2ec3dd60c00f5fa4675bb7a4b.png][]

**7、切片数组中的最后一个元素**

与我们上面看到的非常相似，我们也可以对数组中的最后一个元素进行切片。

以我们想要数组中的最后两个元素为例，我们可以按如下所示进行。

![499165484adece815fb93e693492b393.png][]

**8、将对象转换为数组**

有时可能非常有用，但有一种方法可以将对象转换为数组。

我大部分时间不使用它，但有时会很方便。我们需要在 Objects.keys() 中传递对象。

它的作用是只枚举键并忽略值。

![b1f25eafcde51151476e8e6ec7d9e32f.png][]

**9、 性能检查**

这个技巧让我们可以检查代码的整体性能。它显示你的代码执行或运行所需的时间。

有时可以派上用场。

![4c02951cc3269c2726427ce6492912d2.png][]

**10、自调用函数**

这是一个在创建后立即执行的函数。它不会等待实例被调用。

也称为匿名函数或立即调用函数。

![b442fd89693c154ef8a6b8faf138a095.png][]

**结论**

这些是关于 JavaScript 的一些令人惊奇的技巧和窍门，我觉得它们很神奇而且很有用。

我很想知道你使用了哪些有用的技巧和窍门，欢迎在留言区与我一起来分享讨论。

感谢你抽出时间阅读本文。

#  #

**学习更多技能**

**请点击下方公众号**

![fd2e634fc37c6369b2b81b5b991ad5cd.gif][]

![927e9e38b3408a3b5eefa04b5d41bd20.png][]

![8400218171669c93b20169a76ee83df3.png][]

[6a297b2af7c192d9cb5c6933ecd82b91.png]: /images/20220829/bec87caf6b0647ffa6e0b82c011bef11.png
[6ed53da6796d9485564215a0755f7ceb.png]: /images/20220829/5b68760136bc4259b065f0ec7fc93e82.png
[e66882e0dbea54710bbff9bf059affa7.png]: /images/20220829/48f84bb025c444d5a725b84f83063351.png
[72eac9045e57e225142433eb41caf61f.png]: /images/20220829/0044b66b521f4ccfafe67796bc2b51ab.png
[f1ee4f18770cf21959c04f14fbf0c289.png]: /images/20220829/9a28bcc87e454f47858ca68f472e1ecb.png
[e15f3f5b67acb497ed9a3e55cc407f79.png]: /images/20220829/eae86b33377f4c238d4269036db68e9d.png
[b38f4b97c6fdc7ec549c3049bad5e398.png]: /images/20220829/378c128ff5404b2d86f90566abb5dee6.png
[6692234cb6ed7967caa267551546543b.png]: /images/20220829/bdbf0c0f92a64e7990aa0d641b4f46a2.png
[29f5ea74fc09f8a0b54a1c52b41bc430.png]: /images/20220829/ebbd2f3b5c3343debb0389aeaf776139.png
[536429c2ec3dd60c00f5fa4675bb7a4b.png]: /images/20220829/f79941518ac040e09a6af49386e38df6.png
[499165484adece815fb93e693492b393.png]: /images/20220829/d789d469d2124a2ea18022f2d6e5a490.png
[b1f25eafcde51151476e8e6ec7d9e32f.png]: /images/20220829/4a0d38699d77410b99758fd3e5200de9.png
[4c02951cc3269c2726427ce6492912d2.png]: /images/20220829/86f43c754f514c8b88af82e72274d7f6.png
[b442fd89693c154ef8a6b8faf138a095.png]: /images/20220829/d75c44e10e314408a4164212b0cc6777.png
[fd2e634fc37c6369b2b81b5b991ad5cd.gif]: /images/20220829/2df936ecc38049ee9491bbe74449c1c7.png
[927e9e38b3408a3b5eefa04b5d41bd20.png]: /images/20220829/4333306385e5486b93390893ef8f565f.png
[8400218171669c93b20169a76ee83df3.png]: /images/20220829/b3f837b7f4af4cec8e4590bb5b4847b6.png