当前位置: 首页 > news >正文

30个超级有用的JavaScript单行代码

在这篇文章中,我列出了一个系列的 30 个 JavaScript 单行代码,它们在使用 vanilla js(≥ ES6)进行开发时非常有用。它们也是使用该语言在最新版本中为我们提供的所有功能来解决问题的优雅方式。

我将它们分为以下5大类:

  • 日期

  • 字符串

  • 数字

  • 数组

  • 工具

事不宜迟,我马上开始的,我希望你发现他们对你有帮助!

日期

1.知道一个日期是否对应于当前日期

就像将两个日期转换为相同格式并进行比较一样简单。

是一个 Date 实例。

const isCurrentDay = (date) =>  new Date().toISOString().slice(0, 10) === date.toISOString().slice(0, 10);

2.如何知道一个日期是否在两个日期之间

我们检查过去的日期是否在最小-最大范围内。

<min>、<max> 和 <date> 是 Date 实例。

const isBetweenTwoDates = ( min, max, date) => date.getTime() >= min.getTime() && date.getTime() <= max.getTime();

3.如何知道约会是否在周末

getDay 方法返回一个介于 0 和 6 之间的数字,表示给定日期是星期几。

是一个 Date 实例。

const isWeekend = ( date ) => date.getDay() === 6 || date.getDay() === 0;

4.检查日期是否在一年内

类似于我们过去检查日期是否与当前日期相对应的情况。在这种情况下,我们获取年份并进行比较。

和是两个 Date 实例。

const isInAYear = (date, year) => date.getUTCFullYear() === new Date(`${year}`).getUTCFullYear();

5.将小时转换为 AM-PM 格式

我们可以用数学表达式来判断经过的时间是否小于或等于13小时,从而判断是“上午”还是“下午”。

const toAMPMFormat= (h) => `${h % 12 === 0 ? 12 : h % 12}${h < 12 ? ' am.' : ' pm.'}`;

字符串

6.句子首字母大写

我们将第一个字母转换为大写字母,然后使用 <join.> 附加句子的其余字母

const capitalize = ([first, ...rest]) => `${first.toUpperCase()}${rest.join('')}`;

7.将一封信转换成他的同事表情符号

const letterToEmoji = c => String.fromCodePoint(c.toLowerCase().charCodeAt() + 127365);

8.如何判断一个字符串是不是回文

const isPalindrome = (str) => str.toLowerCase() === str.toLowerCase().split('').reverse().join('');

数字

9.如何计算一个数的阶乘

const getFactorial = (n) => (n <= 1 ? 1 : n * getFactorial(n - 1));

10.如何获得一个数的斐波那契数列

const getFibonacci = (n, memo = {}) => memo[n] || (n <= 2 ? 1 : (memo[n] = getFibonacci(n - 1, memo) + getFibonacci(n - 2, memo)));

11.如何求一个数的阶乘

const getFactorial = (n) => (n <= 1 ? 1 : n * getFactorial(n - 1));

数组

12.将一个数组复制到另一个数组

const copyToArray = (arr) => [...arr];
  1. 从数组中获取唯一元素

const getUnique = (arr) => [...new Set(arr)];
  1. 随机排列

以下代码段以非常有效的方式打乱数组。

const shuffle = (arr) => arr.sort(() => Math.random() - 0.5);
  1. 按属性对数组进行分组

const groupBy = (arr, groupFn) =>   arr.reduce( (grouped, obj) => ({...grouped, [groupFn(obj)]: [...(grouped[groupFn(obj)] || []), obj], }),{});
  1. 反转字符串

我们可以利用内置的 Array 方法,如 reverse() 和 join() 来创建一个做同样事情的单行代码。

const reverseString = (str) => str.split('').reverse().join('');
  1. 检查两个数组是否包含相同的值

我们可以使用 Array.sort() 和 Array.join() 方法来检查两个数组是否包含相同的值。

const containSameValues= (arr1, arr2) =>   arr1.sort().join(',') === arr2.sort().join(',');

工具

  1. 转换为华氏温度

const toFahrenheit= (celsius) => (celsius * 9) / 5 + 32;
  1. 转换为摄氏度

const toCelsius=  (fahrenheit) => (fahrenheit- 32) * 5 / 9;
  1. 如何清除浏览器的所有cookies

const clearAllCookies = () => document.cookie.split(';').forEach((c) => (document.cookie = c.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date().toUTCString()};path=/`)));
  1. 如何将 HEX 转换为 RGB

const toRGB= (hex) =>hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (_, r, g, b) => `#${r}${r}${g}${g}${b}${b}`).substring(1).match(/.{2}/g).map((x) => parseInt(x, 16));
  1. 如何将 RGB 转换为 HEX

const toHEX = (r,g,b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
  1. 检查函数是否为异步函数

const isAsyncFunction = (f) => Object.prototype.toString.call(f) === '[object AsyncFunction]';

24.如何知道一段代码是否在浏览器中运行

const runningInBrowser = typeof window === 'object' && typeof document === 'object';

25.如何知道一段代码是否在node中运行

const runningInNode= typeof process !== 'undefined' && process.versions != null && process.versions.node != null;

26.检测暗模式

这是一种非常方便的方法来检查用户是否在其浏览器上启用了黑暗模式。

const isDarkMode = () =>  window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;

27.滚动到顶部

滚动元素的一种单行方法是使用方法。

const toTop = (element) =>element.scrollIntoView({ behavior: "smooth", block: "start" });

28.滚动到底部

const toBottom = (element) =>element.scrollIntoView({ behavior: "smooth", block: "end" });
  1. 将 JSON 转换为map

这个函数可以让我们以简单的方式将 Map 对象转换为 JSON 字符串。

const jsonToMap = (json) => new Map(Object.entries(JSON.parse(json)));

30.生成一个128位的UUID

此函数允许我们生成具有 128 位值的 UUID,用于唯一标识对象或实体。

const generateUUID = (a) =>   a     ? (a ^ ((Math.random() * 16) >> (a / 4))).

 查看更多文章资料 

相关文章:

30个超级有用的JavaScript单行代码

在这篇文章中&#xff0c;我列出了一个系列的 30 个 JavaScript 单行代码&#xff0c;它们在使用 vanilla js&#xff08;≥ ES6&#xff09;进行开发时非常有用。它们也是使用该语言在最新版本中为我们提供的所有功能来解决问题的优雅方式。 我将它们分为以下5大类&#xff1…...

【GitLab私有仓库】在Linux上用Gitlab搭建自己的私有库并配置cpolar内网穿透

前言 GitLab 是一个用于仓库管理系统的开源项目&#xff0c;使用Git作为代码管理工具&#xff0c;并在此基础上搭建起来的Web服务。 Gitlab是被广泛使用的基于git的开源代码管理平台, 基于Ruby on Rails构建, 主要针对软件开发过程中产生的代码和文档进行管理, Gitlab主要针对…...

诊断CAPL自动化(1)—— CANoe自带的诊断工程分析

🍅 我是蚂蚁小兵,专注于车载诊断领域,尤其擅长于对CANoe工具的使用🍅 寻找组织 ,答疑解惑,摸鱼聊天,博客源码,点击加入👉【相亲相爱一家人】🍅 玩转CANoe,博客目录大全,点击跳转👉 📘前言 🍅 学习CANoe,官方的实例工程就是最好的学习模板,对于初学者,…...

【dp】最长递增子序列

文章目录 方法一&#xff1a;动态规划方法二&#xff1a;贪心 二分查找构造最长递增子序列 方法一&#xff1a;动态规划 dp[i]&#xff1a;末尾元素为arr[i]的最长子序列的长度 从0遍历到i - 1&#xff0c;若遍历到的元素小于当前值arr[i]&#xff0c;表示当前值arr[i]可以和…...

docker容器:Docker-Compose

目录 一、Docker-Compose 1、Docker-Compose使用场景 2、Docker-Compose简介 3、Docker-Compose安装部署 4、YML文件编写注意事项 5、Compose配置常用字段 6、 Docker Compose 常用命令 7、Docker Compose 文件结构 8、docker Compose撰写nginx 镜像 9、docker Compos…...

如何使用DNS实现融合CDN功能

将托管DNS解决方案与CDN配对可为您的网站提供额外的性能、可靠性和灵活性。 域名系统&#xff08;DNS&#xff09;是一种用于计算机、服务或连接到Internet或专用网络的任何资源的分层分布式命名系统&#xff0c;它将各种信息与分配给每个参与实体的域名相关联&#xff0c;它基…...

有关实现深拷贝的四种方法

深拷贝与浅拷贝: 在开始之前我们需要先了解一下什么是浅拷贝和深拷贝&#xff0c;其实深拷贝和浅拷贝都是针对的引用类型&#xff0c;JS中的变量类型分为值类型&#xff08;基本类型&#xff09;和引用类型&#xff1b;对值类型进行复制操作会对值进行一份拷贝&#xff0c;而对…...

Mysql 高可用部署实践

mysql主从是如何备份的? 在MySQL主从复制架构下&#xff0c;备份通常需要在主库和从库上分别进行。 主库备份&#xff1a; 在主库上进行备份时&#xff0c;可以使用mysqldump等命令生成SQL文件&#xff0c;并将其保存到本地或者远程服务器上。备份过程中需要注意以下几点&a…...

IEEE-TMI:张孝勇团队开发小鼠精细脑结构自动分割的深度学习算法

近日&#xff0c;复旦大学类脑智能科学与技术研究院青年研究员张孝勇课题组联合德国亥姆霍兹慕尼黑研究中心&#xff0c;在医学图像处理领域顶尖期刊《IEEE医学影像汇刊》(IEEE Transactions on Medical Imaging&#xff0c;TMI) 发表了题为《MouseGAN&#xff1a;用于小鼠大脑…...

八股文之面向对象和面向过程的区别

面向对象&#xff08;Object-Oriented&#xff09;和面向过程&#xff08;Procedural&#xff09;是两种不同的编程思想。 面向过程是以任务为中心&#xff0c;将程序分解成一系列步骤&#xff0c;在每个步骤中定义一个函数来完成特定的任务。它主要关注程序执行的过程和如何组…...

SpringBoot使用Redis实现分布式缓存

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

Three——二、加强对三维空间的认识

Three——二、加强对三维空间的认识 接上个例子我们接着往下看 辅助观察坐标系 THREE.AxesHelper()的参数表示坐标系坐标轴线段尺寸大小&#xff0c;你可以根据需要改变尺寸。 使用方法&#xff1a; // AxesHelper&#xff1a;辅助观察的坐标系 const axesHelper new THRE…...

【Java】Java8接口中方法区别和使用

Java接口说明 jdk1.8之前接口只能是抽象方法。实现接口必须重写所有方法&#xff0c;比较麻烦。在java8中&#xff0c;支持default和static方法&#xff0c;这样&#xff0c;实现接口时&#xff0c;可以选择是否对default修饰的方法重写。 抽象方法 接口当中的抽象方法&#x…...

WPF 控件库Live Charts 折线图多折线比较问题处理

使用Live Charts功能对比多条折线时当Label不是一一对应时会发现折线无法对比如 Labels List<double> list2 new List<double>(); list2.Add(2.1); //x为0.5时 list2.Add(2.2); //x为0.6时 …...

接口优化方案

前言 最近随着国产化热潮&#xff0c;公司的用于营业的电脑全部从windows更换成了某国产化电脑&#xff0c;换成国产化之后&#xff0c;我们系统的前台web界面也由之前的jsp页面重构成vue.所以之前的一体式架构也变成了前后端分离的架构。但是在更换过程后&#xff0c;发现一些…...

《商用密码应用与安全性评估》第二章政策法规2.1网络空间安全形式与商业密码工作

一、国际国内网络空间安全形势 网络空间已成为与陆地、海洋、天空、太空同等重要的人类第五空间。 1.国际形势 网络空间安全纳入国家战略 网络攻击在国家对抗中深度应用 网络空间已逐步深入网络底层固件 2.国内形势 核心技术仍受制于人 信息产品存在巨大安全隐患 关…...

C#实现将文件、文件夹压缩为压缩包

C#实现将文件、文件夹压缩为压缩包 一、C#实现将文件、文件夹压缩为压缩包核心 1、介绍 Title&#xff1a;“基础工具” 项目&#xff08;压缩包帮助类&#xff09; Description步骤描述&#xff1a; 1、创建 zip 存档&#xff0c;该文档包含指定目录的文件和子目录&#xf…...

程序员跳槽,要求涨薪50%过分吗?

如果问在TI行业涨工资最快的方式是什么&#xff1f; 回答最多的一定是&#xff1a;跳槽&#xff01; 前段时间&#xff0c;知乎上这样一条帖子引发了不少IT圈子的朋友的讨论 &#xff0c;有网友提问 “程序员跳槽要求涨薪50%过分吗&#xff1f;” 截图来源于知乎&#xff0c;…...

Java核心技术 卷1-总结-10

Java核心技术 卷1-总结-10 通配符类型通配符概念通配符的超类型限定无限定通配符通配符捕获 通配符类型 通配符概念 通配符类型中&#xff0c;允许类型参数变化。 例如&#xff0c;通配符类型Pair<? extends Employee>表示任何泛型Pair类型&#xff0c;它的类型参数是…...

React Props

state 和 props 主要的区别在于 props 是不可变的&#xff0c;而 state 可以根据与用户交互来改变。 所以&#xff0c;有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。 props 使用 Demo.js &#xff1a; import React from reactfunct…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

CppCon 2015 学习:Simple, Extensible Pattern Matching in C++14

什么是 Pattern Matching&#xff08;模式匹配&#xff09; ❝ 模式匹配就是一种“描述式”的写法&#xff0c;不需要你手动判断、提取数据&#xff0c;而是直接描述你希望的数据结构是什么样子&#xff0c;系统自动判断并提取。❞ 你给的定义拆解&#xff1a; ✴ Instead of …...

Android多媒体——音/视频数据播放(十八)

在媒体数据完成解码并准备好之后,播放流程便进入了最终的呈现阶段。为了确保音视频内容能够顺利输出,系统需要首先对相应的播放设备进行初始化。只有在设备初始化成功后,才能真正开始音视频的同步渲染与播放。这一过程不仅影响播放的启动速度,也直接关系到播放的稳定性和用…...

Caliper 配置文件解析:config.yaml 和 fisco-bcos.json 附加在caliper中执行不同的合约方法

Caliper 配置文件解析:config.yaml 和 fisco-bcos.json Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO…...

【QT】qtdesigner中将控件提升为自定义控件后,css设置样式不生效(已解决,图文详情)

目录 0.背景 1.解决思路 2.详细代码 0.背景 实际项目中遇到的问题&#xff0c;描述如下&#xff1a; 我在qtdesigner用界面拖了一个QTableView控件&#xff0c;object name为【tableView_electrode】&#xff0c;然后【提升为】了自定义的类【Steer_Electrode_Table】&…...