我写这10+个JavaScript单行代码,被组长夸代码写得优雅

news2025/2/27 17:06:20

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({}) // true
isEmpty({a:"not empty"}) //false 

反转字符串

反转字符串可以使用split结合reversejoin方法轻松实现。

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 

最后

最近找到一个VUE的文档,它将VUE的各个知识点进行了总结,整理成了《Vue 开发必须知道的36个技巧》。内容比较详实,对各个知识点的讲解也十分到位。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/75660.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

问卷开头语怎么写?

问卷的开头语是一份问卷的开场&#xff0c;开场好不好关系到整个问卷过程能够顺利进行。所以&#xff0c;在关注问卷的标题、题目、设计以外&#xff0c;我们也要重视起问卷的开头语。通俗易懂的内容更易进行传播&#xff0c;这一点也可以运用到问卷中&#xff0c;表达清晰、完…

低代码平台数据表格组件的设计实践

在做低代码产品的过程中&#xff0c;产品经理可能会遇到各种各样的问题&#xff0c;比如部分产品经理可能会因为对数据模型的不熟悉&#xff0c;而在实际对接中产生一定障碍。所以产品经理要如何在低代码工作中铲除障碍、并进行决策&#xff1f;本篇文章里&#xff0c;作者结合…

⚡热点管理模块⚡

热点管理模块概念 如果一个文件在连续一段时间内没有访问到&#xff0c;则该文件是一个非热点文件&#xff0c;否则位热点文件。在服务上上有两个目录&#xff0c;一个目录是backdir存储的是热点文件&#xff0c;一个目录是packdir存储的是非热点文件热点管理模块每隔一段时间…

ROHM | 开发出隔离型DC-DC转换器“BD7Fx05EFJ-C”

全球知名半导体制造商ROHM&#xff08;总部位于日本京都市&#xff09;开发出两款隔离型反激式*1DC-DC转换器“BD7F105EFJ-C”和“BD7F205EFJ-C”&#xff0c;新产品非常适用于xEV&#xff08;电动汽车&#xff09;的主驱逆变器、车载充电器&#xff08;以下简称“OBC”&#x…

Unity Addressables资源管理 设置远程加载资源

1.添加Group 点击 PackedAssets 可添加默认设置的组 Blank 则是无设置的 修改名字并添加了一张图片 图片挂在WindowImage预制体上 2.设置模式 Group可选择打包模式&#xff1a; 本地&#xff0c;远程&#xff0c;自定义 设置了后这个包会打到不同的路径&#xff0c;加载也只…

环形石子合并(区间DP)

将 n 堆石子绕圆形操场排放&#xff0c;现要将石子有序地合并成一堆。 规定每次只能选相邻的两堆合并成新的一堆&#xff0c;并将新的一堆的石子数记做该次合并的得分。 请编写一个程序&#xff0c;读入堆数 nn 及每堆的石子数&#xff0c;并进行如下计算&#xff1a; 选择一…

代码随想录刷题记录day39 完全背包+零钱兑换 II+组合总和 Ⅳ

代码随想录刷题记录day39 完全背包零钱兑换 II组合总和 Ⅳ 参考&#xff1a;代码随想录 完全背包 有N件物品和一个最多能背重量为W的背包。第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i] 。每件物品都有无限个&#xff08;也就是可以放入背包多次&#xff09…

《自己动手写CPU》学习记录(6)——第5章/Part 2

目录 引言 致谢 指令说明 逻辑指令 and、or、xor、nor andi、xori lui 移位指令 sll、sllv、sra、srav、srl、srlv 空指令 nop、ssnop、sync、pref 指令实现 宏定义添加 指令译码模块修改 指令执行模块修改 功能验证 逻辑运算 验证代码 仿真波形 移位运算…

CMake中aux_source_directory的使用

CMake中的aux_source_directory命令用于查找目录中的所有源文件&#xff0c;其格式如下&#xff1a; aux_source_directory(<dir> <variable>) 收集指定目录中所有源文件的名称&#xff0c;并将列表(list)存储在提供的<variable>中。该命令旨在由使用显式模…

b2b2c 电子商务平台涉及的技术、运营方案

一个好的SpringCloudSpringBoot b2b2c 电子商务平台涉及哪些技术、运营方案&#xff1f;以下是我结合公司的产品做的总结&#xff0c;希望可以帮助到大家&#xff01; 搜索体验小程序&#xff1a;海哇 1. 涉及平台 平台管理、商家端&#xff08;PC端、手机端&#xff09;、买…

javaee之黑马旅游网3

下面来说一个问题&#xff0c;就是对于一张表的操作&#xff0c;涉及到了很多的servlet页面 比如对于一个user表&#xff0c;里面有很多的相关的servlet页面 如果是这样一种情况&#xff0c;那么user表涉及到七八个页面&#xff0c;category表又涉及到七八个页面&#xff0c;那…

初级软件测试工程师工资(薪资待遇)一般是多少?

那接下来&#xff0c;我们要讲的是从软件测试这个岗位与职责&#xff0c;以及对应的标准薪资范畴 到底软件测试它不同的层次它要负责一些什么样的事情&#xff0c;对于软件测试这个岗位呢&#xff0c;第一个&#xff0c;它要求的东西确实非常的多&#xff0c;比如说你要懂数据…

SpringBoot - WebSocket的使用和聊天室练习

SpringBoot - WebSocket的使用和聊天室练习前言一. SpringBoot整合WebSocket1.1 &#xff08;插曲&#xff09;SpringCloud网关服务接入WebSocket启动错误二. 前端代码监听2.1 模拟进入/离开聊天室2.2 模拟聊天前言 近期准备在我的个人云直播项目中&#xff0c;编写弹幕模块。…

超详细的 pytest 教程(一)使用入门篇

前言 pytest到目前为止还没有翻译的比较好全面的使用文档&#xff0c;很多英文不太好的小伙伴&#xff0c;在学习时看英文文档还是很吃力。本来去年就计划写pytest详细的使用文档的&#xff0c;由于时间关系一直搁置&#xff0c;直到今天才开始写。本文是第一篇&#xff0c;主…

基于jsp+mysql+ssm校园在线投票系统-计算机毕业设计

项目介绍 校园在线投票系统主要包括系统用户管理模块、新闻公告管理模块、投票信息管理、班级信息管理、登录模块、和退出模块等多个模块。系统采用了jsp的mvc框架,SSM(springMvcspringMybatis)框架进行开发,本系统是独立的运行&#xff0c;不依附于其他系统&#xff0c;可移植…

Apipost下载安装和功能详解

一、ApiPost简介 ApiPost PostMan Swagger Mock Jmeter 后端、前端、测试同时在线编辑&#xff0c;同时在线协作&#xff0c;内容实时同步 1.官网地址&#xff1a;https://www.apipost.cn/ 2.官网支持客户端下载及web版在线调试&#xff0c;可根据自己的需求选择适合自己的…

@Controller和@RestController的区别?

本文为joshua317原创文章,转载请注明&#xff1a;转载自joshua317博客 Controller和RestController的区别&#xff1f; - joshua317的博客 Controller和RestController的区别&#xff1f; 在springboot开发中控制层使用注解Controller时&#xff0c;加有GetMapping(PostMappi…

网络开关量输入转4G模块钡铼技术S274

网络开关量输入转4G模块钡铼技术S274支持4路DIN4路DO1路RS485&#xff0c;本机设备自带的继电器 DO 寄存器地址属于保持线圈&#xff0c;地址 0-3&#xff0c;服务器主站发送报文格式&#xff1a; 接收设备返回报文格式&#xff1a; 示例&#xff1a;读取2 个DO状态&#xff…

FS5175AE的PCB布局设计建议

FS5175AE的PCB布局设计建议-基础篇 开关电源的一个常见问题是“不稳定”的开关波形。有时,波形抖动很明显,可以听到从磁性元件发出噪声。如果问题与印刷电路板(PCB)布局有关,则很难确定原因。 EMC也是很注重(PCB)布局,这就是为什么在开关电源设计的早期正确布局PCB至关重要的原…

React 学习笔记:事件处理

React 事件处理 React 采用 on 事件名的方式来绑定一个事件&#xff0c;注意&#xff0c;这里和原生的事件是有区别的&#xff0c;原生的事件全是小写 onclick , React 里的事件是驼峰 onClick 。并且 React 中若想阻止默认事件需要显示的调用 e.preventDefault&#xff0c;而…