当前位置: 首页 > 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…...

内容创作平台集成多个AI模型提升内容多样性的实践

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 内容创作平台集成多个AI模型提升内容多样性的实践 对于内容创作平台而言&#xff0c;用户的偏好千差万别&#xff0c;内容的类型也…...

个人代码问题记录

内容全部来自网上搜集&#xff0c;防止再次遇到同样问题找不到地方参考了&#xff0c;遇到问题解决了就更新 MATLAB 1&#xff0c;求逆问题&#xff0c;奇异 使用函数xlsqminnorm(A,b)或伪逆xpinv(A)*b 矩阵求逆若出现“矩阵接近奇异值&#xff0c;或者缩放错误“怎么办 2…...

独立开发者如何利用TaotokenTokenPlan降低项目试错成本

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 独立开发者如何利用Taotoken TokenPlan降低项目试错成本 对于独立开发者或小型团队而言&#xff0c;启动一个涉及大模型能力的项目…...

利用 Taotoken 统一 API 为内部低代码平台集成 AI 能力

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 利用 Taotoken 统一 API 为内部低代码平台集成 AI 能力 为内部低代码平台引入 AI 能力&#xff0c;正成为提升平台自动化和智能化水…...

杰理之采样只能达到20K的水平【篇】

...

基于树莓派的智能直播状态指示器:物联网与API轮询实践

1. 项目概述与核心价值 如果你和我一样&#xff0c;经常在Ustream或Google Hangouts上观看固定的直播节目&#xff0c;或者自己就是一名内容创作者&#xff0c;那你肯定理解那种“直播是否开始了”的焦虑。是继续刷新页面&#xff0c;还是去做点别的&#xff1f;对于家庭或小型…...

通达信缠论插件ChanlunX:3分钟实现专业缠论分析的完整解决方案

通达信缠论插件ChanlunX&#xff1a;3分钟实现专业缠论分析的完整解决方案 【免费下载链接】ChanlunX 缠中说禅炒股缠论可视化插件 项目地址: https://gitcode.com/gh_mirrors/ch/ChanlunX 你是否曾经面对复杂的K线图感到无从下手&#xff1f;是否因为缠论的手工绘制耗时…...

实战指南:深度掌握5大梯度下降优化器的可视化秘籍

实战指南&#xff1a;深度掌握5大梯度下降优化器的可视化秘籍 【免费下载链接】gradient_descent_viz interactive visualization of 5 popular gradient descent methods with step-by-step illustration and hyperparameter tuning UI 项目地址: https://gitcode.com/gh_mi…...

OpenHarmony模块配置实战:从GN模板到部件依赖的完整指南

1. 从零开始理解OpenHarmony的模块配置&#xff1a;一个资深开发者的实战拆解如果你刚开始接触OpenHarmony的源码开发&#xff0c;面对那一堆BUILD.gn文件和bundle.json配置&#xff0c;是不是感觉有点无从下手&#xff1f;模块、部件、子系统&#xff0c;这些概念听起来就让人…...

G-Helper终极指南:3步快速解决华硕笔记本色彩失真问题

G-Helper终极指南&#xff1a;3步快速解决华硕笔记本色彩失真问题 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops with nearly the same functionality. Works with ROG Zephyrus, Flow, TUF, Strix, Scar, ProArt, Vivobook, Zenbook, Ex…...