10 个你应该知道的强大的JavaScript代码片段

JavaScript 现在非常流行，尤其是在 Web 开发中。随着新的 ECMAScript 版本，JavaScript 语法有了很大的改进。因此，JavaScript语言现在具有许多强大且有趣的功能，我们可以作为开发人员在代码中使用它们。

另一件好事是，如今大多数主要浏览器都对新的 JavaScript 功能提供了良好的支持。无论您是哪种类型的开发人员，至少具备 JavaScript 的基本知识都是一个很好的优势。

如今，开发人员使用不同的代码片段来解决程序中的问题并创建他们需要的功能。无论他们使用哪种编程语言，这始终是事实。然而，最重要的是你要编写计算机和人类都能理解的干净代码。

因此，在本文中，我想与您分享一个可供开发人员使用的 JavaScript 代码片段列表。

现在，让我们开始吧。

1、检查是偶数还是奇数

有时，在某些情况下，您需要检查一个数字是偶数还是奇数。例如，您可能希望创建一个用户只输入奇数的输入字段。

下面的 JavaScript 代码片段允许我们检查一个数字是否是偶数。

const isEven = num => num % 2 === 0;
console.log(isEven(2));  //returns trueconsole.log(isEven(3)); //returns false

如您所见，上面的箭头函数有一个名为 num 的参数。如果输入的数字是偶数，则返回 true。如果是奇数，则返回 false。

2、检查参数是否为数字

要检查函数参数是否为数字，我们可以在 JavaScript 中使用并组合三种方法。这些方法是 isNaN() 、 parseFloat() 和 isFinite()。

您可以在 MDN 文档中了解有关它们的更多信息。

function isNumber(num){  return !isNaN(parseFloat(num)) && isFinite(num);}isNumber(7); //returns trueisNumber("Hello"); //returns false

如上所示，如果参数 num 是数字，则函数返回 true。否则，它返回 false。

3、求平均值

假设您想在程序中创建一个可以计算多个数字的平均值的函数。好吧，您可以使用reduce 和 rest 参数来做到这一点。

这是示例：

const averageNum = (...args) => args.reduce((a, b) => a + b) / args.length;
averageNum(55, 8, 37, 4); //returns 26averageNum(66, 8, 3, 99); //returns 44

如您所见，其余参数允许我们知道我们传递给函数的参数（数字）的数量。另一方面，reduce 方法允许我们获得所有传递的数字的总值。

结果，我们能够将数字的总值除以传递的参数数量，从而得到平均值。

4、使用 JavaScript 滚动到顶部

如今，大多数网站都有滚动到顶部的功能。您只需单击一个按钮，它就会将您滚动到页面顶部。

JavaScript 中的 window.scrollTo(0, 0) 方法允许我们这样做。您只需要将 x 和 y 设置为 0。

这是一个例子：

const scrollToTop = () => window.scrollTo(0, 0);
scrollToTop();

5、复制到剪贴板

在许多情况下，您可能希望您的程序或网站的用户轻松地将文本复制到剪贴板。好吧，您可以使用 navigator.clipboard.writeText 在 JavaScript 中执行此操作。

这是代码示例：

const copyText = (text) =>  navigator.clipboard.writeText(text);
copyText("Hello JavaScript");

6、轻松展平数组

您可以使用 flat() 方法轻松地在 JavaScript 中展平数组。此方法接受一个可选的数字参数，即扁平化级别（2 次、3 次等）。

看看下面的例子：

let numbersArray = [8, [100, 9], [7, 3], 5];numbersArray.flat(); //returns [8, 100, 9, 7, 3, 5]let twoLevels = ["Hello", [6, [8, 9], "Java"], 66];twoLevels.flat(2); //returns ['Hello', 6, 8, 9, 'Java', 66]

7、轻松反转字符串

您可以在 JavaScript 中轻松反转字符串。您可以使用 split() 、 reverse() 和 join() 方法来做到这一点。

这是代码示例：

const reverseStr = str => str.split('').reverse().join('');
reverseStr('Hello JavaScript'); //returns 'tpircSavaJ olleH'

正如您在上面看到的，我们使用方法 split 将字符串转换为数组，使用方法 reverse 反转数组项，并使用方法 Join 再次将该数组转换回字符串。

结果，该函数返回一个反转的字符串。所以这是一种在 JavaScript 中反转字符串的简单方法。

8、检测互联网带宽

带宽经常被误认为是互联网速度，而它是在特定时间段内通过互联网连接传输的数据量。您可以使用 navigator 对象轻松检测 JavaScript 中的网络带宽。

看看下面的代码示例：

navigator.connection.downlink;

输出：

下载链接属性返回以兆比特每秒为单位的估计带宽。正如您在上面看到的，我得到了 5.65，但您可以根据您的网速、浏览器等获得不同的值。

9、返回网页上的选定文本

您可以使用 window 对象中的 getSelection() 方法轻松获取网页上的选定文本。

这是代码示例：

const selectedText = () => window.getSelection().toString();
selectedText();

当您运行此函数时，它会返回您使用鼠标在网页上选择的文本。

10、振动你的手机

你知道你可以使用 JavaScript 来振动你的手机吗？

navigator 对象中的方法 vibrate() 允许您这样做。

这是代码示例：

//vibrating the device for 600 millisecondswindow.navigator.vibrate(600);

上面的代码片段将使您的手机振动 600 毫秒。

总结

正如您在上面的列表中看到的那样。这是一些有用且功能强大的代码片段，无论您是哪种类型的开发人员，都可以在 JavaScript 代码中使用它们。

最后，希望我今天分享的内容，对您有所帮助，感谢您阅读本文。