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. 前后端分离mockjs以及webpack-dev-server代理

    一: 在webpack中使用mockjs  mockjs 也就是模拟数据(mock.js模拟的数据可以不跨域) 安装mock新建mock.js var Mock = require('mockjs') ...

  2. 动态div点击事件传递对象参数格式-草稿889

    <button type='button' style='border: 1px solid #eeeeee;color: #717070;height: 20px;border-radius: ...

  3. 在 Mac 上开发 .NET MAUI

    .NET 多平台应用程序 UI (.NET MAUI) 是一个跨平台框架,用于使用 C# 和 XAML 创建本机移动和桌面应用程序,这些应用程序可以从单个共享代码库在 Android.iOS.macO ...

  4. Python入门-运算符

    运算通常可以根据最终获得的值不同,可以分两类,即结果为具体的值,结果为bool值,那么哪些结果为具体的值-->算数运算.赋值运算,哪些结果又为bool值?--->比较运算.逻辑运算和成员运 ...

  5. TNS-12533: TNS:illegal ADDRESS parameters(修复)

    修复 TNS-12533: TNS:illegal ADDRESS parameters oracle@prd:/home/oracle$sqlplus sys/abc@fp as sysdba SQ ...

  6. JetBrains Rider C# 学习①

    Rider 发现 Alt+F7 键无效: 把GeForce Experience里的游戏覆盖关闭 前言 C#从入门到精通 链接:https://pan.baidu.com/s/1UveJI_f-c5D ...

  7. canvas基础简单易懂教程(完结,多图)

    目录 Canvas学习 一. Canvas概述 1.1 Hello world 1.2 Canvas的像素化 1.3 Canvas的动画思想 1.4 面向对象思维实现canvas动画 二.Canvas ...

  8. 用 DOM 获取页面的元素方法集合

    document.getElementById('id名')            // 获取页面设置指定 id 的元素 document.getElementsByTagName('标签名')    ...

  9. Java包装类,基本的装箱与拆箱

    我的博客 何为包装类 将原始类型和包装类分开以保持简单.当需要一个适合像面向对象编程的类型时就需要包装类.当希望数据类型变得简单时就使用原始类型. 原始类型不能为null,但包装类可以为null.包装 ...

  10. python的一些练习题

    1.目前工作上有一堆的ip地址,ip是ok的,但是需要找出来不在这里面的其他ip import os a = list() with open('ip.txt','r') as f: #print(f ...