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

news2024/11/17 11:42:41

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 代码中使用它们。

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/70616.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

跨域解决方法

1.JSONP 前端通过script标签的src属性将回调函数传给服务器,服务器拿到回调函数后,会将数据作为回调函数的参数并将该回调函数返回,前端这边拿到回调函数执行,就可以获取服务端的数据 非直接方式获取数据 并且只支持get&#xf…

PostgreSQL数据库存储结构

PostgreSQL数据库集簇是——多个数据库的集合。 初始化库集簇:INITDB –D $PGDATA来完成。(相当于oracle数据库dbca建库) pg_ctl -d $PGDATA可以启动数据库 对象标识符(OID)来对整个数据集簇中唯一的标识数据库对象&a…

一个支持 CRUD 快速开发的 Web 框架,用着太爽

RUD 可谓是程序员又爱又恨的操作了。 爱,大部分的业务基本上都是增删改查的变种,基于增删改查可以实现大部分的业务。 恨,是因为普通的增删改查页面开发占据了大量的时间,非常无聊,同时又不会有技术上的提升。 如何能…

week14|week15 查阅文章总结

带宽的概念 信道容量 参数估计 朴素贝叶斯 数学建模 关联规则 聚类 github http 奈氏准则和香农定理 计算机控制 带宽的概念:带宽的两种概念__Charles_Chen的博客-CSDN博客_带宽的两种含义 信道容量:

【计算机视觉】关键考点

计算机标定 计算机标定的流程? 1.求解内参矩阵和外参矩阵的积H 当一张图片上的标定板角点数量等于4时,即可求得该图片对应的矩阵H 。当一张图片上的标定板角点数量大于4时,利用最小二乘法回归最佳的矩阵H 。 最小二乘法:简单地说就是通过n…

浅谈JVM及原理

JVM一直是java知识里面进阶阶段的重要部分,如果希望在java领域研究的更深入,则JVM则是如论如何也避开不了的话题,本系列试图通过简洁易读的方式,讲解JVM必要的知识点。 运行流程 我们都知道java一直宣传的口号是:一次编…

【SSM项目案例】数据库增删改查-完整代码

一、搭建环境 1)spring环境搭建 2)spring整合springmvc框架 目的:在controller中能成功调用service对象的方法 在项目启动时,加载applicationContext.xml的配置文件,在web.xml中进行配置 在controller中注入servic…

星巴克激战瑞幸:“咖啡老三们”的危险时刻

老大和老二“打架”,老三却“伤”得不轻。 在国内品牌界,经常出现这种颇有意思的商业现象。凉茶界里的加多宝和王老吉相互厮杀,排在后面的和其正声势渐弱。可口可乐和百事可乐不断较量,结果非常可乐消失了。 眼下在国内的咖啡圈…

这可能是全网最详细的python安装教程(windows)

python安装是学习pyhon第一步,很多刚入门小白不清楚如何安装python,今天我来带大家完成python安装与配置,跟着我一步步来,很简单,你肯定能完成。 第一部分:python安装 (一)准备工作…

CocosCreator3.4.2源码渲染流程解读

首先上一张脑图镇楼,有些流程还有待后续补充,但是整个刷新过程差不多都完成了。 在上一个xmind文件地址https://download.csdn.net/download/m0_37609239/87254684 接下来就正式开始讲代码: 每帧刷新渲染还是从mainloop开始讲,前面…

华为机试 - 对称美学

目录 题目描述 输入描述 输出描述 用例 题目解析 算法源码 题目描述 对称就是最大的美学,现有一道关于对称字符串的美学。已知: 第1个字符串:R第2个字符串:BR第3个字符串:RBBR第4个字符串:BRRBRBBR…

达标的字符串

1、题目 给定一个数 NNN,想象只由 0 和 1 两种字符组成的所欲长度为 NNN 的字符串。 如果某个字符串,任何 0 字符的左边都有 1 紧挨着,认为这个字符串达标。 返回有多少达标的字符串。 2、思路 前几项推导: 两种解法&#x…

【滤波专题-第6篇】小波阈值去噪方法看这一篇就明白了~(附MATLAB实现)

小波阈值去噪的算法是近些年比较流行的一种滤波方法,由于其阈值函数有着众多的改进方式和改进空间,改进阈值函数也往往可以作为创新点和亮点写到论文中,所以对于正在搞相关研究的同学们写论文是比较友好的(轻松水论文方式1&#x…

【高并发】超卖一人一单问题

一、超卖问题 1. 超卖场景 高并发场景下用户下单,存在如下所示的超卖问题,其产生的主要原因是一个线程刚读出库存值,还没进行修改时,另一个线程也读出来该库存值,从而导致这两个线程在进行下单时,对同一个…

【无人机】基于Matlab实现四旋翼无人机几何跟踪控制

✅作者简介:热爱科研的Matlab仿真开发者,修心和技术同步精进,matlab项目合作可私信。 🍎个人主页:Matlab科研工作室 🍊个人信条:格物致知。 更多Matlab仿真内容点击👇 智能优化算法 …

红星美凯龙寻找「反弹线」

文|螳螂观察 作者| 青月 疫情三年,绝大多数企业都处在「水深火热」之中,到今天,这个情况仍未得到改善。 作为自媒体,「螳螂观察」的感触颇深,疫情之前对一家企业表示肯定的词一般是「暴涨」、「同比大增」&#xff…

C语言竞赛

目录 1059:C语言竞赛 输入格式: 输出格式: 输入样例: 输出样例: 思路: 1.结构: 2.判断素数 3.输出宽度调整 代码: 时间复杂度: 总结: 题目链接: 1059:C语言竞赛 C 语言竞赛是浙江大学计算机学院主持的一个欢乐的竞赛。…

vue3+vite使用element-plus

前言: vue3vite的项目中使用 element-plus的教程。 官方地址: 安装 | Element Plusa Vue 3 based component library for designers and developershttps://element-plus.gitee.io/zh-CN/guide/installation.html#%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9B%B…

考研408数据结构 · 开端

引言数据结构在学什么对C语言掌握要求数据结构三要素逻辑结构数据运算存储结构数据结构在学什么 如何把问题信息化 场景:现在需要将1000本不同类型的书摆放到图书馆的书架上。研究问题:采取什么办法摆放?方法有: ① 不管不顾从头…