30个高逼格代码的JavaScript高级单行代码

 更新时间:2023年08月26日 16:19:07   投稿:yin  
这篇文章中列出了一个系列的 30 个 JavaScript 单行代码,它们在使用 vanilla js(≥ ES6)进行开发时非常有用,它们也是使用该语言在最新版本中为我们提供的所有功能来解决问题的优雅方式,将它们分为以下5大类:日期、字符串、数字、数组、工具

这篇文章中列出了一个系列的 30 个 JavaScript 单行代码,它们在使用 vanilla js(≥ ES6)进行开发时非常有用。它们也是使用该语言在最新版本中为我们提供的所有功能来解决问题的优雅方式。将它们分为以下5大类:日期、字符串、数字、数组、工具

    日期

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

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

    <date> 是一个 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> 是一个 Date 实例。

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

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

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

    <date> 和 <year> 是两个 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];

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

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

    14. 随机排列

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

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

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

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

    16. 反转字符串

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

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

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

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

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

    工具

    18. 转换为华氏温度

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

    19. 转换为摄氏度

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

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

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

    21. 如何将 HEX 转换为 RGB

    const toRGB= (hex) =></code><code>    hex</code><code>        .replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (_, r, g, b) => `#${r}${r}${g}${g}${b}${b}`)</code><code>        .substring(1)</code><code>        .match(/.{2}/g)</code><code>        .map((x) => parseInt(x, 16));

    22. 如何将 RGB 转换为 HEX

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

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

    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.滚动到顶部

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

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

    28.滚动到底部

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

    29. 将 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))).toString(16)     : ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(         /[018]/g,         generateUUID);

    总结

    如果你已经阅读到这里了,请记得收藏起来,这些都是非常实用的单行代码技巧。

    到此这篇关于30个高逼格代码的JavaScript单行代码的文章就介绍到这了,更多相关JavaScript单行代码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

    相关文章

    • JavaScript对象原型链原理解析

      JavaScript对象原型链原理解析

      这篇文章主要介绍了JavaScript对象原型链原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
      2020-01-01
    • javascript获取元素的计算样式

      javascript获取元素的计算样式

      在做html页面开发时,经常会使用到js(javascript)来处理客户端的逻辑,下面我们就来看一下,如何使用js来获取页面上的元素
      2019-05-05
    • 原生JS实现留言板功能

      原生JS实现留言板功能

      这篇文章主要为大家详细介绍了原生JS实现留言板功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
      2020-02-02
    • JavaScript中合并数组的N种方法

      JavaScript中合并数组的N种方法

      这篇文章主要介绍了JavaScript中合并数组的N种方法,本文使用concat、循环插入、reduce等方法合并JavaScript数组,需要的朋友可以参考下
      2014-09-09
    • javascript的函数

      javascript的函数

      javascript的函数...
      2006-09-09
    • javascript全局变量封装模块实现代码

      javascript全局变量封装模块实现代码

      javascript全局变量封装模块的应用,本文将详细介绍,需要了解更多的朋友可以参考下
      2012-11-11
    • JavaScript Pinia代替 Vuex的可行性分析

      JavaScript Pinia代替 Vuex的可行性分析

      这篇文章主要介绍了JavaScript中Pinia是否可以代替Vuex,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
      2022-07-07
    • 基于JavaScript实现网页倒计时自动跳转代码

      基于JavaScript实现网页倒计时自动跳转代码

      这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下
      2015-12-12
    • JavaScript代码异常监控实现过程详解

      JavaScript代码异常监控实现过程详解

      这篇文章主要介绍了JavaScript代码异常监控实现过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
      2020-02-02
    • 原生js页面滚动延迟加载图片

      原生js页面滚动延迟加载图片

      这篇文章主要介绍了原生js页面滚动延迟加载图片的相关资料,现在瀑布流效果大行其道,各种网站都有应用,尤其是专业的图片类型的网站,感兴趣的朋友可以参考下
      2015-12-12

    最新评论