javascript 非常大的特点容易上手且非常灵活,代码实现方式五花八门;有时候能一行代码解决,就尽量不用两行。
本文整理了非常有用的单行代码,这些需求都是在开发中非常常见的,用单行代码可以帮助你提高工作效率。
数组去重从数组中删除所有重复值,实现方式非常多,我们这里就说最简单的方式,一行代码搞定:
const uniquearr = (arr) => [...new set(arr)];console.log(uniquearr([前端,js,html,js,css,html]));// ['前端', 'js', 'html', 'css']
uniquearr方法将数据转为set,然后再解构为数组返回。
从url获取参数并转为对象网页路径经常是:www.baidu.com?search=js&xxx=kkk这种形式的,我们是经常需要取参数的,可以使用第三方的qs包实现,如果你只是要实现去参数,这一句代码就可以实现,不用再引入qs了。
const getparameters = url => json.parse(`{${decodeuri(url.split(?)[1]).replace(//g, '\\').replace(/&/g, ',').replace(/=/g, ':')}}` )getparameters(https://www.google.com.hk/search?q=js+md&newwindow=1);// {q: 'js+md', newwindow: '1'}
检查对象是否为空检查对象是否为空,实际上并不那么简单,即使对象为空,每次检查对象是否等于 {} 也会返回 false。
幸运的是,下面的单行代码正是我们想要的。
const isempty = obj => reflect.ownkeys(obj).length === 0 && obj.constructor === object;isempty({}) // trueisempty({a:not empty}) //false
反转字符串反转字符串可以使用split结合reverse和join方法轻松实现。
const reverse = str => str.split('').reverse().join('');reverse('this is reverse');// esrever si siht
生成随机十六进制生成随机数相信你能信手拈来,那随机生成十六进制,例如生成十六进制颜色值。
const randomhexcolor = () => `#${math.floor(math.random() * 0xffffff).tostring(16).padend(6, 0)}`console.log(randomhexcolor());// #a2ce5b
检查当前选项卡是否在后台浏览器使用选项卡式浏览,任何网页都有可能在后台,此时对用户来说是没有在浏览的, 知道怎么快速检测到,你的网页对用户是隐藏还是可见吗?
const istabactive = () => !document.hidden; istabactive()// true|false
检测元素是否处于焦点activeelement 属性返回文档中当前获得焦点的元素。
const elementisinfocus = (el) => (el === document.activeelement);elementisinfocus(anyelement)// 元素处于焦点返回true,反之返回false
检查设备类型使用navigator.useragent 判断是移动设备还是电脑设备:
const judgedevicetype = () => /android|webos|iphone|ipad|ipod|blackberry|iemobile|operamini/i.test(navigator.useragent) ? 'mobile' : 'pc';judgedevicetype() // pc | mobile
文字复制到剪贴板clipboard api 它的所有操作都是异步的,返回 promise 对象,不会造成页面卡顿。而且,它可以将任意内容(比如图片)放入剪贴板。
const copytext = async (text) => await navigator.clipboard.writetext(text)copytext('单行代码 前端世界')
获取选定的文本使用内置的 getselection 获取用户选择的文本:
const getselectedtext = () => window.getselection().tostring();getselectedtext();// 返回选中的内容
查询某天是否为工作日我们自己写日历组件时经常会用到,判断某个日期是否为工作日;周一至周五为工作日:
const isweekday = (date) => date.getday() % 6 !== 0;isweekday(new date(2022, 03, 11))// true
转换华氏/摄氏处理温度有时会晕头转向。这两个函数则能帮助大家将华氏温度转换为摄氏温度,以及将摄氏温度转换为华氏温度。
将华氏温度转换为摄氏温度const fahrenheittocelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;fahrenheittocelsius(50);// 10
将摄氏温度转华氏温度const celsiustofahrenheit = (celsius) => celsius * 9/5 + 32;celsiustofahrenheit(100)// 212
两日期之间相差的天数日常开发中经常遇到需要显示剩余天数, 一般我们就需要计算两日期之间相差天数:
const daydiff = (date1, date2) => math.ceil(math.abs(date1.gettime() - date2.gettime()) / 86400000);daydiff(new date(2021-10-21), new date(2022-02-12))// result: 114
将 rgb 转换为十六进制
const rgbtohex = (r, g, b) => # + ((1 << 24) + (r << 16) + (g << 8) + b).tostring(16).slice(1);rgbtohex(255, 255, 255); // #ffffff
计算数组平均值计算平均值的方式很多,计算的逻辑都是一样的, 但是实现方式各不相同,一行代码简单实现:
const average = (arr) => arr.reduce((a, b) => a + b) / arr.length;average([1,9,18,36]) //16
原文地址:https://juejin.cn/post/7145623660680708104
(学习视频分享:web前端开发、编程基础视频)