13 条高效实用的 JavaScript 单行代码
JavaScript可以实现很多令人惊奇的事!
从复杂的框架到处理API,有太多的东西可以学习。
甚至,仅用一行代码,它也能完成一些很棒的工作。
不信?那么请看这13条JavaScript单行代码,用上它们,会让你看起来特别专业!
1. 获取随机布尔值(true/false)
使用Math.random()
方法可以让函数返回布尔值(true或false)。Math.random
会创建一个介于0和1之间的随机数,然后我们检查这个数是大于还是小于0.5。也就是说,有50%/50%的几率得到true或false。
以下JS代码块显示了如何使用Math.Random
方法获取随机布尔值。
const randomBoolean = () => Math.random() >= 0.5;
console.log(randomBoolean());
// Result: a 50/50 change on returning true of false
2. 检查指定日期是否是工作日
我们可以通过此方法来检查函数中提供的日期是工作日还是周末。
以下JS代码块显示了如何编写一个返回指定日期是工作日还是周末的函数。
const isWeekday = (date) => date.getDay() % 6 !== 0;
console.log(isWeekday(new Date(2021, 0, 11)));
// Result: true (Monday)
console.log(isWeekday(new Date(2021, 0, 10)));
// Result: false (Sunday)
3. 反转字符串
有两种不同的方式可以反转字符串。使用split()
,reverse()
和join()
方法是最简单的方法之一。
以下JS代码块显示了如何反转字符串。
const reverse = str => str.split('').reverse().join('');
reverse('hello world');
// Result: 'dlrow olleh'
4. 检查当前tab是否在视图/焦点中
我们可以使用document.hidden
属性来检查当前tab是否在视图/焦点中。
以下JS代码块显示了如何使用文档的hidden
属性来获取当前tab是否在视图/焦点中。
const isBrowserTabInView = () => document.hidden;
isBrowserTabInView();
// Result: returns true or false depending on if tab is in view / focus
5. 检查数字是偶数还是奇数
可以通过使用取模运算符(%
)来解决这个超简单的任务。如果你对此还不太熟悉,那么Stack Overflow上就有直观的说明。
以下JS代码块显示了如何使用模运算符来检查数字是偶数还是奇数。
const isEven = num => num % 2 === 0;
console.log(isEven(2));
// Result: true
console.log(isEven(3));
// Result: false
6. 从日期中获取时间
通过使用.toTimeString()
方法并在合适的位置切割字符串,我们就可以从指定的日期中获取时间,也可以获取当前时间。
以下JS代码块显示了如何通过toTimeString
方法和切割字符串从日期中获取时间。
const timeFromDate = date => date.toTimeString().slice(0, 8);
console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0)));
// Result: "17:30:00"
console.log(timeFromDate(new Date()));
// Result: will log the current time
7. 截取数字小数点后的固定几位
使用Math.pow()
方法,可以截取数字小数点后的固定几位。
以下JS代码块显示了如何使用Math.Power
方法舍入某个小数点。
const toFixed = (n, fixed) => ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);
// Examples
toFixed(25.198726354, 1); // 25.1
toFixed(25.198726354, 2); // 25.19
toFixed(25.198726354, 3); // 25.198
toFixed(25.198726354, 4); // 25.1987
toFixed(25.198726354, 5); // 25.19872
toFixed(25.198726354, 6); // 25.198726
8. 检查元素当前是否处于焦点
我们可以使用document.activeElement
属性来检查一个元素当前是否处于焦点。
以下JS代码块显示了如何使用文档对象上的activeElement
属性检查元素当前是否处于焦点。
const elementIsInFocus = (el) => (el === document.activeElement);
elementIsInFocus(anyElement)
// Result: will return true if in focus, false if not in focus
9. 检查当前用户是否支持touch事件
以下JS代码块显示了如何检查当前用户是否支持touch事件。
const touchSupported = () => {
('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch);
}
console.log(touchSupported());
// Result: will return true if touch events are supported, false if not
10. 检查当前用户是否使用Apple上
可以使用navigator.platform
来检查当前用户是否使用Apple设备。
以下JS代码块显示了如何检查用户当前是否在Apple设备上。
const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
console.log(isAppleDevice);
// Result: will return true if user is on an Apple device
11. 滚动到页面顶部
window.scrollTo()
方法通过x坐标和y坐标实现滚动。如果将它们设置为0,则将滚动到页面顶部。
注意:Internet Explorer不支持.scrollTo()
方法。
以下JS代码块显示了如何使用scrollTo
方法将浏览器滚动至顶部。
const goToTop = () => window.scrollTo(0, 0);
goToTop();
// Result: will scroll the browser to the top of the page
12. 获取参数的平均值
可以使用reduce
方法获取函数参数的平均值。
以下JS代码块显示了如何使用reduce
方法获取参数的平均值。
const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4);
// Result: 2.5
13. 转换华氏/摄氏
最后一个2合1了!
处理温度有时会晕头转向。这两个函数则能帮助大家将华氏温度转换为摄氏温度,以及将摄氏温度转换为华氏温度。
以下JS代码块显示了如何将华氏温度转换为摄氏温度,以及反向的转换。
const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;
// Examples
celsiusToFahrenheit(15); // 59
celsiusToFahrenheit(0); // 32
celsiusToFahrenheit(-20); // -4
fahrenheitToCelsius(59); // 15
fahrenheitToCelsius(32); // 0
文本完,感谢阅读!
每日分享前端插件和前端开发教程,欢迎扫码关注我的公众号:前端新世界
13 条高效实用的 JavaScript 单行代码的更多相关文章
- 33个非常实用的JavaScript一行代码
33个非常实用的JavaScript一行代码 一.日期处理 1. 检察日期是否有效 该方法用于检测给出的日期是否有效: const isDateValid = (...val) => !Numb ...
- 极其实用的JS单行代码
个人博客 地址:https://www.wenhaofan.com/a/20190629211647 1.强制布尔值 要将变量强制转换为布尔值而不更改其值: const myBoolean = !! ...
- 13个非常实用的JavaScript小技巧
使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用 ...
- 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密
你真的了解字典(Dictionary)吗? 从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...
- 【精心推荐】几款实用的 JavaScript 图形图表库
一款好的图表插件不是那么容易找到的.最近项目里需要实现统计图表功能,所以在网上搜罗了一圈,找到一些不错的图表插件,分享大家.众多周知,图形和图表要比文本更具表现力和说服力.这里给大家精心推荐几款实用的 ...
- 几款实用的 JavaScript 图形图表库
一款好的图表插件不是那么容易找到的.最近项目里需要实现统计图表功能,所以在网上搜罗了一圈,找到一些不错的图表插件,分享大家.众多周知,图形和图表要比文本更具表现力和说服力.这里给大家精心推荐几款实用的 ...
- JavaScript standard 代码规范的全文
这是 JavaScript standard 代码规范的全文. 掌握本规范的最好方法是安装并在自己的代码中使用它. 细则 使用两个空格进行缩进. eslint: indent function hel ...
- 21 段实用便捷的 PHP 代码
PHP 是目前使用最广泛的基于 Web 的编程语言,驱动着数以百万计的网站,其中也包括如 Facebook 等一些大型站点.这里收集了 21 段实用便捷的 PHP 代码摘录,对每种类型的 PHP 开发 ...
- 逆向进阶,利用 AST 技术还原 JavaScript 混淆代码
什么是 AST AST(Abstract Syntax Tree),中文抽象语法树,简称语法树(Syntax Tree),是源代码的抽象语法结构的树状表现形式,树上的每个节点都表示源代码中的一种结构. ...
随机推荐
- set CSS style in js solutions All In One
set CSS style in js solutions All In One css in js set each style property separately See the Pen se ...
- web components in action
web components in action web components css-doodle.js https://alligator.io/workflow/ https://d33wubr ...
- copyright@xgqfrms
copyright@xgqfrms copyright & seo ## refs *** <div> <a href="https://info.flagcoun ...
- qrcode & console.log
qrcode & console.log image https://fs-api.lightyy.com/service/utils/qrcode?url=http://169.254.13 ...
- nasm astrlwr_s函数 x86
xxx.asm %define p1 ebp+8 %define p2 ebp+12 %define p3 ebp+16 section .text global dllmain export ast ...
- Renice INC:不同颜色的酒帽所代表的意义
酒帽就是酒瓶上方的热缩胶帽/锡帽/蜡封,也就是开瓶前要割掉的那一层保护物,所有的法国酒在酒帽上,都会有一个圆形贴纸,除了有不同颜色外,上面还有一串号码,有可能很多人在喝酒时都不会对这个酒帽有更多的在意 ...
- 从崩溃的选课系统,论为什么更安全的 HTTPS 协议没有被全面采用
尽人事,听天命.博主东南大学研究生在读,热爱健身和篮球,正在为两年后的秋招准备中,乐于分享技术相关的所见所得,关注公众号 @ 飞天小牛肉,第一时间获取文章更新,成长的路上我们一起进步 本文已收录于 C ...
- Information:java: javacTask: 源发行版 8 需要目标发行版 1.8
原文链接:https://blog.csdn.net/idiot_qi/article/details/105149846 创建新maven项目跑main,出现这个编译异常 网上找了找,记录一下以备不 ...
- vue之provide和inject跨组件传递属性值失败(父组件向子组件传值的两种方式)
简单介绍:当一个子组件需要用到父组件的父组件的某些参数.那么这个时候为了避免组件重复传参,使用vue的依赖注入是个不错的方法,直接在最外层组件设置一个provide,内部不管多少嵌套都可以直接取到最外 ...
- Java并发之ThreadPoolExecutor源码解析(二)
ThreadPoolExecutor ThreadPoolExecutor是ExecutorService的一种实现,可以用若干已经池化的线程执行被提交的任务.使用线程池可以帮助我们限定和整合程序资源 ...