首页 > 编程语言 >25个JavaScript One-Liner让你更专业

25个JavaScript One-Liner让你更专业

时间:2024-01-03 11:01:44浏览次数:39  
标签:25 arr const 数组 ... JavaScript Liner arr2 str

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

数组

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))];
// or
const merge = (arr1, arr2) => [...new Set([...arr1, ...arr2])];

6. 合并两个数组

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

7. 打乱数组

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

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

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

9. 查找数组中的唯一值

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

10. 克隆数组

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

字符串

11. 将字符串大写

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

12. 字符串反转

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

13. 将字符串转换为数字

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

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

const toCharArray = (str) => str.split('');
// or
const toCharArray = (str) => [...str];
// or
const toCharArray = (str) => Array.from(str);
// or
const 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;
// or
const 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;
// or
const 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);


// Testing
copyToClipboard("Hello World!");

25.检测深色模式

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


// Testing
console.log(isDarkMode());

总结

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

标签:25,arr,const,数组,...,JavaScript,Liner,arr2,str
From: https://blog.51cto.com/u_15739596/9079899

相关文章

  • 使用 JavaScript 根据输入值调整输入字段 (HTML) 的 (CSS) 中的文本颜色
    可以通过以下代码使用JavaScript根据输入值调整输入字段的文本颜色:HTML:<inputtype="text"id="myInput"oninput="changeTextColor()"placeholder="Enteravalue">CSS:#myInput{color:black;}JavaScript:functionchangeTextColor......
  • P6256 题解
    我认为,这道题是我学OI历史以来做过的最难写,最难受,最变态,最不可做,最怀疑人生的题。然后还莫名其妙遇见了!给出一种时间复杂度略劣于ix35的做法。因为本人码力不是很好,因此认为这道题讲讲代码写法也很必要。题意就是给一些线段上戳洞,使得对于给定的一个区间\([l,r]\),从无穷远......
  • 并发集合 25
    并发集合(ConcurrentCollection)是一类特殊的数据结构,旨在支持并发环境下的安全操作和高效性能。在多线程程序中,如果多个线程同时对同一个集合进行读写操作,如果没有适当的同步措施,可能会导致数据不一致性、竞态条件等问题。并发集合提供了线程安全的操作,以避免这些问题。以下是一些......
  • JavaScript元素根据父级元素宽高缩放
    /***等比缩放*@paramwrap外部容器*@paramcontainer待缩放的容器*@returns{{width:number,height:number}}*返回值:width:宽度,height:高度*/aspectRatio(wrap:any,container:any){//w=h/ratio,h=w*rat......
  • JavaScript调用系统邮件快速分享
    在前端使用邮件分享进行快速分享~,详情参考->MDN自定义参数subject:主题cc:抄送到次要收件人(与邮件有关但无需做出应答的个人或组织)bcc:密送到其他收件人(主要、次要收件人不应该获得密送收件人的身份)body:邮件内容注:每个字段的值都必须进行编码(也就是,带有......
  • JavaScript圆形转多边形经纬度数组算法及示例
    前言在地理信息系统(GIS)和地图应用中,有时需要将圆形区域表示为多边形的经纬度数组对象。本文将介绍如何使用JavaScript实现圆形转多边形经纬度数组的算法,并提供一个示例来演示其用法。概述圆形转多边形经纬度数组的算法的目标是将给定的圆形区域表示为多边形的经纬度数组对象。这......
  • 2023-2024-1 20231425《计算机基础与程序设计》第十四周学习总结
    2023-2024-120231425《计算机基础与程序设计》第十四周学习总结作业信息这个作业属于哪个课程2023-2024-1《计算机基础与程序设计》这个作业要求在哪里2023-2024-1计算机基础与程序设计第十四周作业)这个作业的目标《C语言程序设计》第13章  ......
  • day25 如何做个“有价值”的日志分析平台-多种日志收集方案-基于K8S架构的EFK日志平台
    9.1、如何做个“有价值”的日志分析平台基于Kubernetes这种架构的日志收集方案是一个复杂而全面的过程。需要考虑不同应用类型的日志规范,日志输出方式,应用场景,日志平台选择,架构优缺点,日志监控和性能优化等其他特殊的场景。在下面的详细分析中,将逐层讨论这些方面。一、日志规范......
  • 2023-2024-1 20231325 《计算机基础与程序设计》第14周学习总结
    ###目录*作业信息*教材学习内容总结1.《c语言程序设计》第13章*基于AI的学习*上周错题*学习进度条作业信息这个作业属于哪个课程2023-2024-1《计算机基础与程序设计》这个作业的要求在哪里1.学习《C语言程序设计》第13章并完成云班课测试。作业正文......
  • javaScript中如何判断一个url有没有query
    JavaScript中如何判断一个URL有没有Query在JavaScript中,我们可以使用正则表达式或内置URL对象来判断一个URL是否包含查询参数(query)。本文将介绍两种方法,并附带代码示例来解决这个具体的问题。方法一:使用正则表达式我们可以使用正则表达式来判断URL中是否包含查询参数。以下是一......