iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >一定有你会用到的JavaScript一行代码实用技巧总结
  • 237
分享到

一定有你会用到的JavaScript一行代码实用技巧总结

2024-04-02 19:04:59 237人浏览 安东尼
摘要

目录引言一、日期处理1. 检查日期是否有效2. 计算两个日期之间的间隔3. 查找日期位于一年中的第几天4. 时间格式化二、字符串处理1. 字符串首字母大写2. 翻转字符串3. 随机字

引言

最近在国外技术社区看到了一些关于一行代码的文章,感觉很有意思,就整理了一下来分享给大家,希望对你有所帮助~

这些方法使用到了一些api,简化了操作,但是有些方法写一行属实不太优雅,所以这里主要还是学习API的使用技巧!

一、日期处理

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;

以上就是一定有你会用到的JavaScript一行代码总结的详细内容,更多关于JavaScript一行代码的资料请关注编程网其它相关文章!

--结束END--

本文标题: 一定有你会用到的JavaScript一行代码实用技巧总结

本文链接: http://www.lsjlt.com/news/164631.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 一定有你会用到的JavaScript一行代码实用技巧总结
    目录引言一、日期处理1. 检查日期是否有效2. 计算两个日期之间的间隔3. 查找日期位于一年中的第几天4. 时间格式化二、字符串处理1. 字符串首字母大写2. 翻转字符串3. 随机字...
    99+
    2024-04-02
  • 一些让Python代码简洁的实用技巧总结
    目录前言1. 使用Lambda来修改Pandas数据框中的值2. 使用f-string来连接字符串3. 用Zip()函数对多个列表进行迭代4. 使用列表理解法5. 对文件对象使用wi...
    99+
    2024-04-02
  • 一文总结5个JavaScript代码优化技巧
    const target = {}; const handler = { get: (target, prop) => { console.log(`获取属性:${prop}`); return...
    99+
    2023-05-14
    javascript
  • 一文教会你提高Javascript代码效率的技巧
    目录变量声明三元运算符解构赋值解构交换箭头函数字符串模版多值匹配ES6对象简写字符串转数字次方相乘数组合并查找数组最大值最小值获取字符串字符并&&操作数组排序数组过滤...
    99+
    2024-04-02
  • Kotlin开发的一些实用小技巧总结
    前言随着Google I/O大会的召开,Google宣布将支持Kotlin作为Android的开发语言,最近关于Kotlin的文章、介绍就异常的活跃。本文主要给大家介绍了关于Kotlin开发的一些实用小技巧,分享出来供大家参考学习,下面话不...
    99+
    2023-05-30
    kotlin 实用技巧
  • nodejs代码执行绕过的一些技巧汇总
    目录1. child_process2. nodejs中的命令执行2.1 16进制编码2.2 unicode编码2.3 加号拼接2.4 模板字符串2.5 concat连接2.6 ba...
    99+
    2024-04-02
  • 非常实用的JavaScript一行代码有哪些
    本篇内容主要讲解“非常实用的JavaScript一行代码有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“非常实用的JavaScript一行代码有哪些”吧!一...
    99+
    2024-04-02
  • vue项目中一定会用到的性能优化技巧
    目录引言性能优化标准Lighthouse通用常规优化手段通用性能优化分析FCP(First Contentful Paint)LCP(Largest Contentful Paint...
    99+
    2024-04-02
  • 用python爬虫抓站的一些技巧总结
    在使用Python进行网站爬取时,有一些技巧可以帮助您更有效地抓取站点数据。下面是一些总结:1. 使用合适的爬虫框架:Python中...
    99+
    2023-08-23
    python
  • Vue组件二次封装的一些实用技巧总结
    目录前言透传 Attribute透传 slot普通slot动态插槽名作用域插槽封装组件存在的问题组件实例属性和方法的调用总结前言 在开发Vue项目我们一般使用第三方UI组件库进行开发...
    99+
    2024-04-02
  • python进阶从青铜到王者一定会用上的Python技巧
    目录1.如何判断一个列表中的数值是否全部小于某个数2.如何对列表中的字符串按照特定要求进行排序3.如何实现按照键或者数值对字典进行排序4.怎么将列表中的数字转换成字符串5.如何判断列...
    99+
    2024-04-02
  • VB十七种可用一行代码完成判断的技巧代码
    1、下列代码,则是对逻辑运算不清楚造成 If A=true Then C= Not B Else C= B End If 可以:C=A XOR B 2、如果加上下列代码: If C=...
    99+
    2022-12-27
    VB一行代码 vb判断
  • Python高级技巧之怎么用一行代码减少一半内存占用
    本篇内容介绍了“Python高级技巧之怎么用一行代码减少一半内存占用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!图片的结果下面我来解释一下...
    99+
    2023-06-16
  • Vue代码的实用技巧有哪些
    本篇内容介绍了“Vue代码的实用技巧有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!slots 新语法...
    99+
    2024-04-02
  • PHP实用技巧:删除代码中的最后一个分号
    PHP实用技巧:删除代码中的最后一个分号 在编写 PHP 代码时,常常会遇到需要删除代码中最后一个分号的情况。这可能是因为复制粘贴引入了多余的分号,或者为了优化代码风格和结构。在本文中...
    99+
    2024-04-02
  • JavaScript try...catch语句使用技巧大全:让你的代码更稳定、更优雅
    try...catch与finally try...catch语句可以捕获错误,而finally语句则无论是否发生错误都会执行。这使得finally语句非常适合用于释放资源或执行清理操作。例如: try { // 代码块 } c...
    99+
    2024-02-23
    JavaScript try...catch 错误处理 代码稳定性 代码优雅性
  • JavaScript中最常用的代码简写技巧有哪些
    这篇文章给大家分享的是有关JavaScript中最常用的代码简写技巧有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、三元操作符当想写if…else语句时,使用三元操作符来...
    99+
    2024-04-02
  • 教你用一行Python代码实现GUI图形界面
    目录一、选择文件夹二、选择文件三、选择日期四、输入文本五、弹窗无按钮六、弹窗无标题七、弹窗只有OK按钮八、弹窗只有Error按钮(红色)九、显示通知窗口十、弹窗选择十一、自定义弹窗实...
    99+
    2023-01-03
    Python GUI图形界面 Python 图形界面
  • 实用的JavaScript单行代码有哪些
    这篇“实用的JavaScript单行代码有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“实用的JavaScript单行代...
    99+
    2023-07-05
  • Win7超级实用的快速操作技巧总结教你如何使用win7
    如果你已经升级到 Windows 7,并且喜欢新的任务栏, 也享受非常酷的库功能的力量。不过现在你想要更多。你想要酷酷 使用鼠标,你可以将窗口拖动和放置在屏幕的任何一边,或者拖动到上方最大化。这些使用键盘快捷键会更快: ...
    99+
    2023-06-01
    Win7 操作技巧 操作 技巧 win7
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作