分享50个超级有用的JavaScript单行代码(推荐!)

 更新时间:2023年01月28日 15:38:05   作者:码农键盘上的梦  
JavaScript是一种脚本语言,是直接在浏览器运行的,下面这篇文章主要给大家介绍了50个超级有用的JavaScript单行代码的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

前言

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

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

  • 日期
  • 字符串
  • 数字
  • 数组
  • 工具

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

日期

1. 日期是否正确(有效)

此方法用于检查给定日期是否有效

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());
isDateValid("December 27, 2022 13:14:00");  // true

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

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

是一个 Date 实例。

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

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

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

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

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

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

此方法用于计算两个日期之间的间隔。

const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
 
 
dayDif(new Date("2022-08-27"), new Date("2022-12-25"))  // 120

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

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

是一个 Date 实例。

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

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

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

和是两个 Date 实例。

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

7. 确定日期所在的一年中的哪一天

此方法用于检测给定日期所在的一年中的哪一天。

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

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

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

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

9. 格式化时间

此方法可用于将时间转换为 hh:mm:ss 格式。

const timeFromDate = date => date.toTimeString().slice(0, 8);
 
timeFromDate(new Date(2021, 11, 2, 12, 30, 0));  // 12:30:00
timeFromDate(new Date());  // now time 09:00:00

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

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

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

字符串

10.1 字符串的初始大写

此方法用于将字符串的第一个字母大写。

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
capitalize("hello world")  // Hello world

10.2 句子首字母大写

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

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

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

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

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

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

13. 翻转字符串

该方法用于翻转字符串并返回翻转后的字符串。

const reverse = str => str.split('').reverse().join('');
 
reverse('hello world');   // 'dlrow olleh'

14. 随机字符串

此方法用于生成随机字符串。

//方式一
const randomString = () => Math.random().toString(36).slice(2);
randomString();
 
//方式二
const randomstr = Math.random().toString(36).substring(7)

15. 字符串截断

此方法将字符串截断为指定长度。

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...'

16. 从字符串中删除 HTML

此方法用于从字符串中删除 HTML 元素。

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

数字

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

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

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

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

19. 如何求一个数的阶乘

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

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

此方法用于确定数字是奇数还是偶数。

const isEven = num => num % 2 === 0;
 
isEven(996);

21. 得到一组数字的平均值

const average = (.. .args) => args.reduce((a, b) => a + b) / args.length;
 
average(1, 2, 3, 4, 5); // 3

22. 从两个整数中确定随机整数

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

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

23. 四舍五入到指定位数

此方法可用于将数字四舍五入到指定的数字。

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

数组

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

const copyToArray = (arr) => [...arr];

25. 从数组中获取唯一元素

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

26. 随机排列

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

const shuffle = (arr) => arr.sort(() => Math.random() - 0.5);

27. 按属性对数组进行分组

const groupBy = (arr, groupFn) =>   arr.reduce( (grouped, obj) => ({...grouped, [groupFn(obj)]: [...(grouped[groupFn(obj)] || []), obj], }),{});

28. 检查两个数组是否包含相同的值

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

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

工具

29. 检测对象是否为空

该方法用于检测 JavaScript 对象是否为空。

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

30. 切换变量

可以使用以下形式交换两个变量的值,而无需应用第三个变量。

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

31. 随机布尔值

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

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

32. 获取变量的类型

该方法用于获取变量的类型。

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

33. 颜色转换

33.1将 HEX "#00000" 转换为 RGB(0,0,0)

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));

33.2将 RGB(0,0,0)转换为 HEX"#00000"

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

33.3 随机生成一种十六进制颜色

此方法用于获取随机的十六进制(HEX)颜色值。                

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

34. 温度与华氏度转换

34.1 转换为华氏温度

const toFahrenheit= (celsius) => (celsius * 9) / 5 + 32;

34.2 转换为摄氏度

const toCelsius=  (fahrenheit) => (fahrenheit- 32) * 5 / 9;

35. 确定当前选项卡是否处于活动状态

此方法用于检查当前选项卡是否处于活动状态。

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

36. 判断当前设备是否为苹果设备

此方法用于检查当前设备是否为 Apple 设备。

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

37. 如何清除浏览器的所有cookies

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

38. 检查函数是否为异步函数

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

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

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

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

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

41. 检测暗模式

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

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

42. 滚动的元素滚动到顶部

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

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

43. 滚动的元素滚动到底部

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

44. 导航到页面顶部

此方法用于返回页面顶部。

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

45. 是否滚动到页面底部

该方法用于判断页面是否在底部。

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

46.将 JSON 转换为map

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

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

47.生成一个128位的UUID

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

const generateUUID = (a) =>   a     ? (a ^ ((Math.random() * 16) >> (a / 4))).toString(16)     : ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(         /[018]/g,         generateUUID);

48. 重定向到一个 URL

此方法用于重定向到新 URL。

const redirect = url => location.href = url
redirect("https://www.google.com/")

49. 打开浏览器打印框

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

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

50.删除所有cookies

该方法使用 document.cookie 访问 cookie 并清除网页上存储的所有 cookie。

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

总结

到此这篇关于50个超级有用的JavaScript单行代码的文章就介绍到这了,更多相关JS单行代码内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!

相关文章

  • JavaScript基础之流程控制语句的用法

    JavaScript基础之流程控制语句的用法

    下面就为大家带来一篇JavaScript基础之流程控制语句的用法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • webpack打包js的方法

    webpack打包js的方法

    这篇文章主要介绍了webpack打包js的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 基于Javascript实现文件实时加载进度的方法

    基于Javascript实现文件实时加载进度的方法

    不知道大家有没有发现在现在的移动页面上,有很多情况需要加载大量的资源。但是移动端的访问速度和pc还是有很大的差距,有些时候需要一些取巧的方式来提升用户体验,而实时显示加载进度就是其中一种。这篇文章就给大家分享了Javascript实现文件实时加载进度的方法。
    2016-10-10
  • 简单实用的HTML到UBB转换脚本工具实现说明

    简单实用的HTML到UBB转换脚本工具实现说明

    你也许是位乐于分享的技术人员,尽管你算不上什么技术高手,但是你都希望把自己所知道的通过博客与网友分享。为了让更多人知道你的经验,你可能会努力把博文发布到专业论坛。
    2009-11-11
  • 主页面中的两个iframe实现鼠标拖动改变其大小

    主页面中的两个iframe实现鼠标拖动改变其大小

    iframe实现鼠标拖动改变其大小在一个页面中的两个iframe的情况下,此方法相当实用,感兴趣的各位不妨参考下,或许对你有所帮助
    2013-04-04
  • 判断某个字符在一个字符串中是否存在的js代码

    判断某个字符在一个字符串中是否存在的js代码

    这篇文章主要介绍了判断某个字符在一个字符串中是否存在的方法,需要的朋友可以参考下
    2014-02-02
  • js实现轮播图效果 纯js实现图片自动切换

    js实现轮播图效果 纯js实现图片自动切换

    这篇文章主要为大家详细介绍了js实现轮播图效果,图片自动切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • js HTML DOM EventListener功能与用法实例分析

    js HTML DOM EventListener功能与用法实例分析

    这篇文章主要介绍了js HTML DOM EventListener功能与用法,结合实例形式分析了js HTML DOM EventListener事件监听相关用法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • JavaScript 作用域scope简单汇总

    JavaScript 作用域scope简单汇总

    这篇文章主要介绍了JavaScript 作用域scope简单汇总,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • 用JavaScript计算在UTF-8下存储字符串占用字节数

    用JavaScript计算在UTF-8下存储字符串占用字节数

    想办法在JavaScript中判断在UTF-8下存储的String的字节数,在网上找到很多关于Unicode介绍的文档,最重要的是字符编码数值对应的存储长度
    2013-08-08

最新评论

?


http://www.vxiaotou.com