JavaScript单行代码杀手锏

总篇122篇 2021年第13篇编者荐语 之家前端共享流杨超宇投稿《JavaScript 单行代码杀手锏》在本文章中我们要分享JavaScript单行代码杀手锏，可以让工作更有效率哦。获取浏览器Cookie的值通过使用document.cookie访问来检索cookie的值。const?cookie?=?name?=>?`;?${document.cookie}`.split(`;?${name}=`).pop().split(';').shift();cookie('_ga');//?Result:?"GA1.2.1929736587.1601974046"将RGB转换为十六进制const?rgbToHex?=?(r,?g,?b)?=>"#"?+?((1?<?navigator.clipboard.writeText(text);copyToClipboard("Hello?World");检查日期是否有效使用以下代码段检查给定日期是否有效。const?isDateValid?=?(...val)?=>?!Number.isNaN(new?Date(...val).valueOf());isDateValid("December?17,?1995?03:24:00");//?Result:?true查找一年中的某一天查找给定日期。const?dayOfYear?=?(date)?=>Math.floor((date?-?new?Date(date.getFullYear(),?0,?0))?/?1000?/?60?/?60?/?24);dayOfYear(new?Date());//?Result:?272大写字符串Javascript没有内置的大写函数，但是我们可以使用以下代码实现大写。const?capitalize?=?str?=>?str.charAt(0).toUpperCase()?+?str.slice(1)capitalize("follow?for?more")//?Result:?Follow?for?more查找两个日期之间的天数使用以下代码段查找给定两个日期之间的天数。const?dayDif?=?(date1,?date2)?=>?Math.ceil(Math.abs(date1.getTime()?-?date2.getTime())?/?86400000)dayDif(new?Date("2020-10-21"),?new?Date("2021-10-22"))//?Result:?366清除所有Cookie你可以通过使用document.cookie访问cookie并清除它，从而轻松地清除存储在网页中的所有cookie。const?clearCookies?=?document.cookie.split(';').forEach(cookie?=>?document.cookie?=?cookie.replace(/^?+/,?'').replace(/=.*/,?`=;expires=${new?Date(0).toUTCString()};path=/`));生成随机十六进制你可以使用Math.random和padEnd属性生成随机的十六进制颜色。const?randomHex?=?()?=>?`#${Math.floor(Math.random()?*?0xffffff).toString(16).padEnd(6,?"0")}`;console.log(randomHex());//?Result:?#92b008从数组中删除重复项你可以使用JavaScript中的Set轻松删除重复项。这是救命稻草。const?removeDuplicates?=?(arr)?=>?[...new?Set(arr)];console.log(removeDuplicates([1,?2,?3,?3,?4,?4,?5,?5,?6]));//?Result:?[?1,?2,?3,?4,?5,?6?]从URL获取查询参数你可以通过传递window.location或原始URLgoole.com?search=easy&page=3从url轻松检索查询参数。const?getParameters?=?(URL)?=>?{URL?=?JSON.parse('{"'?+?decodeURI(URL.split("?")[1]).replace(/"/g,?'\\"').replace(/&/g,?'","').replace(/=/g,?'":"')?+'"}');return?JSON.stringify(URL);};从日期输出时间我们可以从给定日期以hour::minutes::seconds的格式输出时间。const?timeFromDate?=?date?=>?date.toTimeString().slice(0,?8);console.log(timeFromDate(new?Date(2021,?0,?10,?17,?30,?0)));?//?Result:?"17:30:00"检查数字是偶数还是奇数const?isEven?=?num?=>?num?%?2?===?0;console.log(isEven(2));?//?Result:?True求数字的平均值使用reduce方法查找多个数字的平均值。const?average?=?(...args)?=>?args.reduce((a,?b)?=>?a?+?b)?/?args.length;average(1,?2,?3,?4);//?Result:?2.5滚动到顶部你可以使用window.scrollTo(0, 0)方法自动滚动到顶部。将x和y都设置为0。const?goToTop?=?()?=>?window.scrollTo(0,?0);goToTop();反转字符串你可以使用split、reverse和join方法轻松反转字符串。const?reverse?=?str?=>?str.split('').reverse().join('');reverse('hello?world');?//?Result:?'dlrow?olleh'检查数组是否为空只要简简单单的一行代码就可以检查数组是否为空，返回true或false。const?isNotEmpty?=?arr?=>?Array.isArray(arr)?&?arr.length?>?0;isNotEmpty([1,?2,?3]);//?Result:?true获取选定的文本使用内置的getSelection属性获取用户选择的文本。const?getSelectedText?=?()?=>?window.getSelection().toString();getSelectedText();打乱数组使用sort和random方法打乱数组非常容易。const?shuffleArray?=?(arr)?=>?arr.sort(()?=>?0.5?-?Math.random());console.log(shuffleArray([1,?2,?3,?4]));//?Result:?[?1,?4,?3,?2?]检测暗模式使用以下代码可以检查用户的设备是否处于暗模式。const?isDarkMode?=?window.matchMedia?&?window.matchMedia('(prefers-color-scheme:?dark)').matchesconsole.log(isDarkMode)?//?Result:?True?or?False总结这20个单行代码杀手锏到这里就全部介绍完了，希望对你有用。感谢阅读，轻松度过每一天！作者简介杨超宇?2020年入职汽车之家，任职于大数据共享技术团队，主要负责搜索前端业务，前端前沿技术探索等工作阅读更多汽车之家搜索算法探索与实践基于StarRocks的极速实时数据分析实践汽车之家基于Apache Flink的跨数据库实时物化视图探索▼本文来自「之家前端共享流」，作者杨超宇▼