25个JavaScript One-Liner让你更专业

这篇具有很好参考价值的文章主要介绍了25个JavaScript One-Liner让你更专业。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

今天我们分享一些单行代码技巧,了解这些技巧,可以提升我们的工作效率,现在,我们一起来看一下今天的这些单行代码技巧吧。

数组

1. 检查变量是否是数组

const isArray = Array.isArray(arr);const isArray = arr instanceof Array;

2. 数字数组的和

const sum = (arr) => arr.reduce((a, b) => a + b);

3.从数组中删除Falsy值

​​​​​​​

const removeFalsyValues = (arr) => arr.filter(x => x);// or const removeFalsyValues = (arr) => arr.filter(Boolean);

4. 数字数组的平均值

const average = (arr) => arr.reduce((a, b) => a + b) / arr.length;

5. 合并并删除重复项

​​​​​​​

const merge = (arr1, arr2) => [...new Set(arr1.concat(arr2))];// orconst merge = (arr1, arr2) => [...new Set([...arr1, ...arr2])];

6. 合并两个数组

​​​​​​​

const merge = (arr1, arr2) => [].concat(arr1, arr2);// orconst merge = (arr1, arr2) => [...arr1, ...arr2];

7. 打乱数组

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

8. 获取数组的最后一个元素

​​​​​​​

const lastElement = (arr) => arr[arr.length-1];// orconst lastElement = (arr) => arr.slice(-1)[0];// orconst lastElement = (arr) => arr.slice().pop();

9. 查找数组中的唯一值

const findUniqueValues = (arr) => arr.filter((i) => arr.indexOf(i) === arr.lastIndexOf(i));

10. 克隆数组

​​​​​​​

const clone = (arr) => arr.slice();// orconst clone = (arr) => [...arr];

字符串

11. 将字符串大写

const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);

12. 字符串反转

​​​​​​​

const reverseString = (str) => str.split("").reverse().join("");// orconst reverseString = (str) => [...str].reverse().join();

13. 将字符串转换为数字

​​​​​​​

const toNumber = (str) => Number(str);// orconst toNumber = (str) => +str;

14. 将字符串转换为字符数组

​​​​​​​

const toCharArray = (str) => str.split('');// orconst toCharArray = (str) => [...str];// orconst toCharArray = (str) => Array.from(str);// orconst toCharArray = (str) => Object.assign([], str);

15. 将 Snake 大小写转换为 Camel 大小写

const snakeToCamel = (str) => str.toLowerCase().replace(/(_\w)/g, (word) => word.toUpperCase().substr(1));

日期

16. 两个日期之间的天数

const daysBetweenDates = (date1, date2) => Math.ceil(Math.abs(date1 - date2) / (1000 * 60 * 60 * 24));

17. 工作日约会时间

​​​​​​​

const getWeekday = (date) => ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'][date.getDay()];// or const getWeekday = (date) => date.toLocaleString('en-US', {weekday: 'long'});

随机

18. 随机数生成器

​​​​​​​

const randomNumber = (rangeStart, rangeEnd) => new Date().getTime() % rangeEnd + rangeStart;// orconst randomNumber = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

19.随机十六进制颜色生成器

const randomHexColor = () => `#${Math.random().toString(16).slice(2, 8).padEnd(6, '0')}`;

20. 随机布尔生成器

const randomBoolean = () => Math.random() >= 0.5;

验证 

21. 检查数组是否为空

const isEmpty = (arr) => !Array.isArray(arr) || !arr.length;

22. 检查数组是否包含值

​​​​​​​

const includes = (arr, value) => arr.indexOf(value) != -1;// orconst includes = (arr, value) => arr.includes(value);

23. 检查日期是否是周末

const isWeekend = (date) => [5, 6].indexOf(date.getDay()) !== -1;

网络实用程序 

24.复制到剪贴板

​​​​​​​

const copyToClipboard = (text) =>  navigator.clipboard?.writeText && navigator.clipboard.writeText(text);
// TestingcopyToClipboard("Hello World!");

25.检测深色模式

​​​​​​​

const isDarkMode = () =>  window.matchMedia &&  window.matchMedia("(prefers-color-scheme: dark)").matches;
// Testingconsole.log(isDarkMode());

总结

以上内容,就是我今天想与你分享的全部内容,希望这些内容,能够对你有所帮助。

更多精彩教程欢迎B站搜索“千锋教育”

千锋前端浠浠呀老师HTML+CSS教程,零基础web前端开发入门必看视频文章来源地址https://www.toymoban.com/news/detail-778001.html

到了这里,关于25个JavaScript One-Liner让你更专业的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【C语言数组】一维数组,二维数组详解,数组传参,变长数组,这篇文章让你更全面的认识数组。

    前言: 大家好,我是 良辰丫 💞,今天带大家全面认识一下C语言里面的 数组 ,大家是不是满怀期待呢?嘿嘿嘿,别着急,我们往下看,感受C语言数组的魅力!!!💌💌💌 要么出众,要么出局。💝 乾坤未定,💟你我皆是黑马。 保存一组成绩的数据,数据多的时候难道要

    2024年01月19日
    浏览(51)
  • 【网络安全 --- 任意文件上传漏洞靶场闯关 6-15关】任意文件上传漏洞靶场闯关,让你更深入了解文件上传漏洞以及绕过方式方法,思路技巧

      首先分享一个自己做的很不错的网路安全笔记,内容详细介绍了许多知识 超详细的网络安全笔记 分享一个非常详细的网络安全笔记,是我学习网安过程中用心写的,可以点开以下链接获取: 超详细的网络安全笔记​编辑https://m.tb.cn/h.5JdFcih?tk=OuVrWRl9vMx%20CZ3457 https://m.tb.cn/

    2024年02月07日
    浏览(46)
  • [HTML]Web前端开发技术25(HTML5、CSS3、JavaScript )JavaScript基础消息对话框告警框确认框提示框命名规范1标识符2关键字3保留字注释标识符和变量——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 JavaScript程序 代码 消息对话框 消息对话框-告警框 消息对话框-确认框 消息对话框-提示框 JavaScript注释

    2024年02月20日
    浏览(55)
  • 「SQL面试题库」 No_25 统计各专业学生人数

    「SQL面试题库」是由 不是西红柿 发起,全员免费参与的SQL学习活动。我每天发布1道SQL面试真题,从简单到困难,涵盖所有SQL知识点,我敢保证只要做完这100道题,不仅能轻松搞定面试,代码能力和工作效率也会有明显提升。 1.1 活动流程 整理题目 :西红柿每天无论刮风下雨

    2023年04月08日
    浏览(38)
  • ADB操作指南:让你专业地管理和调试自己的Android手机

    1. ADB操作的重要性和优势 ADB(Android Debug Bridge)是Android系统中的一个工具,它可以在PC上与Android设备之间建立通信,从而方便地管理和调试手机。ADB操作非常重要和必须,无论是在开发或测试中,还是在进行导出、导入数据等操作时,都需要使用ADB进行操作。使用ADB可以帮助

    2024年04月13日
    浏览(30)
  • 【JavaScript】拾遗(5.25)

    JavaScript是一门脚本语言。(脚本通常以文本(如ASCII)保存,只在被调用时进行解释或编译) Java不是脚本语言,因为Java的目标程序以class字节码的形式存在。 实现一个点击按钮,弹出消息框。 JS是一门事件驱动型语言,依靠事件去驱动,然后执行相对应的程序。 区别事件和

    2024年02月06日
    浏览(27)
  • 一文让你搞懂javascript如何实现继承

    一、本文想给你聊的东西包含一下几个方面:(仅限于es6之前的语法哈,因为es6里面class这用上了。。) 1.原型是啥?原型链是啥? 2.继承的通用概念。 3.Javascript实现继承的方式有哪些?   二、原型是啥?原型链是啥? 1.原型是函数本身的prototype属性。 首先js和java不

    2024年02月04日
    浏览(53)
  • 任何样式,javascript都可以操作,让你所向披靡

    习惯了在 css 文件里面编写样式,其实JavaScript 的 CSS对象模型也提供了强大的样式操作能力, 那就随文章一起看看,有多少能力是你不知道的吧。 客从八方来, 样式呢, 样式五方来。 chrome旧版本用户自定义样式目录: %LocalAppData%/Google/Chrome/User Data/Default/User StyleSheets。 新版

    2024年03月25日
    浏览(39)
  • 7.25 web前端-淘宝首页设计

    hello everybody,许久不见,甚是想念,关于我为什么四天没更新博客的原因就是本次文章的标题,没错,我们老师布置了项目设计,而我这个大怨种选择了淘宝首页这个页面内容多的,以至于我这个小白敲了四天才完成,那么,今天就来给大家分享一下我完成这个项目的过程吧

    2024年02月08日
    浏览(47)
  • 25个 Web3 社交项目详细信息汇总(SocialFi)

    回顾这次的 Crypto 牛市,在众多概念中只有一个未曾爆发,也没有项目可以成功“出道”。在年初CZ公开表示看好此赛道,但是2022年已经过半还没有现象级应用出现。 这就是Web3社交应用——SocialFi。 纵观加密市场,这个赛道确实还是很有潜力的,并且对我们来说, 这种未来

    2024年02月03日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包