33个非常实用的JavaScript一行代码

一、日期处理

1. 检察日期是否有效

该方法用于检测给出的日期是否有效:

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());

isDateValid("December 17, 1995 03:24:00");  // true

2. 计算两个日期之间的间隔

该方法用于计算两个日期之间的间隔时间:

const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)

dayDif(new Date("2021-11-3"), new Date("2022-2-1"))  // 90

距离过年还有90天~

3. 查找日期位于一年中的第几天

该方法用于检测给出的日期位于今年的第几天:

const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

dayOfYear(new Date());   // 307

2021年已经过去300多天了~

4. 时间格式化

该方法可以用于将时间转化为hour:minutes:seconds的格式:

const timeFromDate = date => date.toTimeString().slice(0, 8);

timeFromDate(new Date(2021, 11, 2, 12, 30, 0));  // 12:30:00
timeFromDate(new Date()); // 返回当前时间 09:00:00

二、字符串处理

1. 字符串首字母大写

该方法用于将英文字符串的首字母大写处理:

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)

capitalize("hello world")  // Hello world

2. 翻转字符串

该方法用于将一个字符串进行翻转操作,返回翻转后的字符串:

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

reverse('hello world');   // 'dlrow olleh'

3. 随机字符串

该方法用于生成一个随机的字符串:

const randomString = () => Math.random().toString(36).slice(2);

randomString();

4. 截断字符串

该方法可以从指定长度处截断字符串:

const truncateString = (string, length) => string.length < length ? string : `${string.slice(0, length - 3)}...`;

truncateString('Hi, I should be truncated because I am too loooong!', 36)   // 'Hi, I should be truncated because...'

5. 去除字符串中的HTML

该方法用于去除字符串中的HTML元素:

const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';

三、数组处理

1. 从数组中移除重复项

该方法用于移除数组中的重复项:

const removeDuplicates = (arr) => [...new Set(arr)];

console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6]));

2. 判断数组是否为空

该方法用于判断一个数组是否为空数组,它将返回一个布尔值:

const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;

isNotEmpty([1, 2, 3]);  // true

3. 合并两个数组

可以使用下面两个方法来合并两个数组:

const merge = (a, b) => a.concat(b);

const merge = (a, b) => [...a, ...b];

四、数字操作

1. 判断一个数是奇数还是偶数

该方法用于判断一个数字是奇数还是偶数:

const isEven = num => num % 2 === 0;

isEven(996);

2. 获得一组数的平均值

const average = (...args) => args.reduce((a, b) => a + b) / args.length;

average(1, 2, 3, 4, 5);   // 3

3. 获取两个整数之间的随机整数

该方法用于获取两个整数之间的随机整数

const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

random(1, 50);

4. 指定位数四舍五入

该方法用于将一个数字按照指定位进行四舍五入:

const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)

round(1.005, 2) //1.01
round(1.555, 2) //1.56

五、颜色操作

1. 将RGB转化为十六机制

该方法可以将一个RGB的颜色值转化为16进制值:

const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

rgbToHex(255, 255, 255);  // '#ffffff'

2. 获取随机十六进制颜色

该方法用于获取一个随机的十六进制颜色值:

const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;

randomHex();

六、浏览器操作

1. 复制内容到剪切板

该方法使用 navigator.clipboard.writeText 来实现将文本复制到剪贴板:

const copyToClipboard = (text) => navigator.clipboard.writeText(text);

copyToClipboard("Hello World");

2. 清除所有cookie

该方法可以通过使用 document.cookie 来访问 cookie 并清除存储在网页中的所有 cookie:

const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, =;expires=${new Date(0).toUTCString()};path=/));

3. 获取选中的文本

该方法通过内置的 getSelection 属性获取用户选择的文本:

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

getSelectedText();

4. 检测是否是黑暗模式

该方法用于检测当前的环境是否是黑暗模式,它是一个布尔值:

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

console.log(isDarkMode)

5. 滚动到页面顶部

该方法用于在页面中返回顶部:

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

goToTop();

6. 判断当前标签页是否激活

该方法用于检测当前标签页是否已经激活:

const isTabInView = () => !document.hidden;

7. 判断当前是否是苹果设备

该方法用于检测当前的设备是否是苹果的设备:

const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);

isAppleDevice();

8. 是否滚动到页面底部

该方法用于判断页面是否已经底部:

const scrolledToBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;

9. 重定向到一个URL

该方法用于重定向到一个新的URL:

const redirect = url => location.href = url

redirect("https://www.google.com/")

10. 打开浏览器打印框

该方法用于打开浏览器的打印框:

const showPrintDialog = () => window.print()

七、其他操作

1. 随机布尔值

该方法可以返回一个随机的布尔值,使用Math.random()可以获得0-1的随机数,与0.5进行比较,就有一半的概率获得真值或者假值。

const randomBoolean = () => Math.random() >= 0.5;

randomBoolean();

2. 变量交换

可以使用以下形式在不适用第三个变量的情况下,交换两个变量的值:

[foo, bar] = [bar, foo];

3. 获取变量的类型

该方法用于获取一个变量的类型:

const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();

trueTypeOf('');     // string
trueTypeOf(0); // number
trueTypeOf(); // undefined
trueTypeOf(null); // null
trueTypeOf({}); // object
trueTypeOf([]); // array
trueTypeOf(0); // number
trueTypeOf(() => {}); // function

4. 华氏度和摄氏度之间的转化

该方法用于摄氏度和华氏度之间的转化:

const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9; celsiusToFahrenheit(15); // 59
celsiusToFahrenheit(0); // 32
celsiusToFahrenheit(-20); // -4
fahrenheitToCelsius(59); // 15
fahrenheitToCelsius(32); // 0

5. 检测对象是否为空

该方法用于检测一个JavaScript对象是否为空:

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;

转自

作者:CUGGZ 链接:https://juejin.cn/post/7025771605422768159

33个非常实用的JavaScript一行代码的更多相关文章

  1. 13 条高效实用的 JavaScript 单行代码

    JavaScript可以实现很多令人惊奇的事! 从复杂的框架到处理API,有太多的东西可以学习. 甚至,仅用一行代码,它也能完成一些很棒的工作. 不信?那么请看这13条JavaScript单行代码,用 ...

  2. JavaScript一行代码获取公网IP及城市信息

    废话不多说,直接上代码! <script type="text/javascript" src="http://pv.sohu.com/cityjson?ie=ut ...

  3. 从一行代码里面学点JavaScript

    从一行代码里面学点JavaScript 现如今,JavaScript无处不在,因此关于JavaScript的新知识也是层出不穷.JavaScript的特点在于,要学习它的语法入门简简单,但是要精通使用 ...

  4. [转]从一行代码里面学点JavaScript

    现如今,JavaScript无处不在,因此关于JavaScript的新知识也是层出不穷.JavaScript的特点在于,要学习它的语法入门简简单,但是要精通使用它的方式却是一件不容易的事. 来看看下面 ...

  5. 前端读者 | 从一行代码里面学点JavaScript

    本文来自 @张小俊128:链接:http://www.html-js.com/article/A-day-to-learn-from-a-line-of-code-inside-the-JavaScr ...

  6. 「Python实用秘技08」一行代码解析地址信息

    本文完整示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/PythonPracticalSkills 这是我的系列文章「Python实用秘技」的第8期 ...

  7. 【精心推荐】几款实用的 JavaScript 图形图表库

    一款好的图表插件不是那么容易找到的.最近项目里需要实现统计图表功能,所以在网上搜罗了一圈,找到一些不错的图表插件,分享大家.众多周知,图形和图表要比文本更具表现力和说服力.这里给大家精心推荐几款实用的 ...

  8. 几款实用的 JavaScript 图形图表库

    一款好的图表插件不是那么容易找到的.最近项目里需要实现统计图表功能,所以在网上搜罗了一圈,找到一些不错的图表插件,分享大家.众多周知,图形和图表要比文本更具表现力和说服力.这里给大家精心推荐几款实用的 ...

  9. C# 求精简用一行代码完成的多项判断 重复赋值

    C# 求精简用一行代码完成的多项判断 重复赋值 哈哈,说实话,个人看着这么长的三元操作也麻烦,但是我也只想到了这样三元判断句中执行方法体能够写到一行,追求的终极目的是,用一行实现这个过程,而且简单,由 ...

随机推荐

  1. C#编写一个简易的文件管理器

    编写一个简易的文件管理器,通过本次实验,练习 TreeView.ListView 和SplitContainer 控件的使用,同时熟悉 C#文件系统的操作方法以及 File 类和 Directory类 ...

  2. java基础-多线程线程池

    线程池 * 程序启动一个新线程成本是比较高的,因为它涉及到要与操作系统进行交互.而使用线程池可以很好的提高性能,尤其是当程序中要创建大量生存期很短的线程时,更应该考虑使用线程池.线程池里的每一个线程代 ...

  3. 数组 indexOf()

    众所周知,indexOf()这个方法经常出现在字符串的使用中,也许是用来寻找字符串中某一字符在字符串中的位置,或者也可以用来寻找字符串中重复出现的字符有哪些.对于刚接触 JS 的我们来说,在对数组的操 ...

  4. vue获取验证码倒计时

    <template> <div> <el-button :disabled="disabled" @click="sendcode" ...

  5. Golang | 并发

    goroutine 协程(Coroutine) Golang 在语言层面对并发编程进行了支持,使用了一种协程(goroutine)机制, 协程本质上是一种用户态线程,不需要操作系统来进行抢占式调度,但 ...

  6. 基于Debian搭建Hyperledger Fabric 2.4开发环境及运行简单案例

    相关实验源码已上传:https://github.com/wefantasy/FabricLearn 前言 在基于truffle框架实现以太坊公开拍卖智能合约中我们已经实现了以太坊智能合约的编写及部署 ...

  7. 51单片机I/O引脚IO口工作原理

    51单片机I/O引脚IO口工作原理 一.51单片机管脚p0.p1.p2.p3口区别如下: 1.意思不同P0口作输出口用时,需加上拉电阻.P0口有复用功能.当对外部存储器进行读写操作时,P0口先是提供外 ...

  8. ArrayList扩容问题

    今天上午上课在看JavaSE的面经,其中有问关于ArrayList和LinkedList的区别,就突然思考到,既然ArrayList是采用数组形式存储数据,对比我们自己使用到的数组,为什么ArrayL ...

  9. 小程序 text标签内的文字竖着排列

    html:   <view><text>活动规则</text></view>   css: view {   height: 135rpx;   wid ...

  10. Jx.Cms开发笔记(一)-Jx.Cms介绍

    开始 从今天开始,我们将开启Jx.Cms系列开发教程. 我们将会使用Jx.Cms来介绍Blazor的开发.MVC的开发,热插拔插件的开发等等一系列开发教程. 介绍 Jx.Cms是一个使用最新版.NET ...