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

news2024/11/19 3:32:38

大厂面试题分享 面试题库

前端面试题库 (面试必备)   推荐:★★★★★

地址:前端面试题库

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

 

大厂面试题分享 面试题库

前端面试题库 (面试必备)   推荐:★★★★★

地址:前端面试题库

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

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

相关文章

MES系统与WMS系统的区别在哪里?

从字面上理解 MES是一套面向制造企业车间执行层的生产信息化管理系统。 WMS是仓储管理系统(WarehouseManagentsystem)的缩写&#xff0c;是通过入库、出库、调拨、管理等功能&#xff0c;实现一体化批量管理。 从用法上理解 WMS仓库管理系统主要采用条码技术&#xff0c;可及…

认识 微内核架构

微内核架构 1 说明背景 关于宏内核、微内核、混合内核&#xff0c;都是相对而言的概念。 宏内核: 通用的操作系统&#xff0c;将操作系统内核的所有模块放置在内核态运行&#xff0c;具备直接操作硬件的能力。例如 UNIX/Linux, FreeBSD 等微内核: 简单的操作系统&#xff0c;…

深度学习训练营之海贼王人物识别

深度学习训练营之海贼王人物识别原文链接环境介绍前置工作设置GPU导入数据数据查看数据预处理加载数据可视化数据检查数据配置数据集prefetch()功能详细介绍&#xff1a;归一化查看归一化后的数据构建VGG-16网络网络结构编译模型训练结果可视化原文链接 &#x1f368; 本文为&a…

ELK集群部署---ElasticSearch集群的部署

1. 环境规划&#xff1a; 主机名IP地址角色node1192.168.56.111 ElasticSearch(master) Zookeeper Kafka node2192.168.56.112 ElasticSearch(slave) Kibana Zookeeper Kafka node3192.168.56.113 ElasticSearch(slave) Zookeeper Kafka node4192.168.56.114 Logstash Filebe…

4. Json数据传递与接收

由于Json数据传递与接收在以后的开发中是主流&#xff0c;所以把它拿出来独立记一篇笔记&#xff0c;其他的笔记太庞杂了。 1. json数据参数传递实现步骤 1.1 添加json数据转换相关坐标 <dependency><groupId>com.fasterxml.jackson.core</groupId><ar…

HBCPC2022-河北省大学生程序设计竞赛

部分题解7-4 键盘故障7-6 筷子7-8 方7-9 优美的字符串7-4 键盘故障 签到题&#xff0c;直接遍历字符串&#xff0c;相同则跳过&#xff0c;不相同则输出 题目链接&#xff1a;https://pintia.cn/problem-sets/1584003400735793152/exam/problems/1584003481883000835 AC代码&a…

业聚医疗在港交所上市:市值约76亿港元,钱永勋、刘桂祯夫妇控股

12月23日&#xff0c;业聚医疗集团控股有限公司&#xff08;下称“业聚医疗”&#xff0c;HK:06929&#xff09;在港交所上市。本次上市&#xff0c;业聚医疗的发行价为8.80港元/股&#xff0c;全球发行发售5463.30万股&#xff0c;募集资金总额约为4.81亿港元&#xff0c;募资…

java基于ssm,jsp鞋城源码卖鞋服装男鞋商城女鞋商城项目源码

ssm开发的网上鞋城系统&#xff0c;主要有商品分类&#xff0c;列表&#xff0c;详情&#xff0c;加入购物车&#xff0c;订单&#xff0c;收货地址等功能&#xff0c;单商家登录后台可以发布商品&#xff0c;上下架商品&#xff0c;发货退款等管理订单。 演示视频&#xff1a;…

【开源项目】历史数据迁移

历史数据迁移 项目地址&#xff1a;https://gitee.com/xl-echo/dataMigration 历史迁移解决方案。微服务的架构为基础&#xff0c;使用多种设计模式&#xff0c;如&#xff1a;单利、桥接、工厂、模板、策略等。其中涉及的核心技术有&#xff0c;多线程、过滤器等。致力于解决…

django 中间件基础介绍

1、简单的理解&#xff0c;1个中间件就是1个类&#xff0c;中间件一般可以用来检查用户是否登录。 2、用户通过浏览器访问视图函数的内容需要先通过中间件&#xff0c;通过中间件后再到视图函数&#xff0c;返回结果也需要通过中间件&#xff0c;如下草图 3、自定义一个中间件…

一文读懂Linux内核处理器架构中的栈

栈是什么&#xff1f;栈有什么作用&#xff1f; 首先&#xff0c;栈 (stack) 是一种串列形式的 数据结构。这种数据结构的特点是 后入先出 (LIFO, Last In First Out)&#xff0c;数据只能在串列的一端 (称为&#xff1a;栈顶 top) 进行 推入 (push) 和 弹出 (pop) 操作。根据…

基于CNN卷积神经网络 猫狗图像识别

目录 一&#xff1a;数据集准备 二&#xff1a;读取自己的数据集 三&#xff1a;搭建网络 训练模型 四&#xff1a;猫狗图像识别 一&#xff1a;数据集准备 从官网下载比较麻烦&#xff0c;可根据以下链接&#xff0c;从百度网盘获取数据集 https://pan.baidu.com/s/13hw4L…

【Docker系列】容器环境配置

个人名片&#xff1a; 对人间的热爱与歌颂&#xff0c;可抵岁月冗长&#x1f31e; Github&#x1f468;&#x1f3fb;‍&#x1f4bb;&#xff1a;念舒_C.ying CSDN主页✏️&#xff1a;念舒_C.ying 个人博客&#x1f30f; &#xff1a;念舒_C.ying Docker可以让开发者打包他们…

55.函数的参数传递

55.函数的参数传递 文章目录55.函数的参数传递1.函数的参数2.参数的传递方法3.使用位置参数传递参数4.使用关键字传递参数1.函数的参数 自定义函数有2种参数&#xff1a;形式参数和实际参数。 def语句中的参数不是实际参数&#xff0c;我们称之为形式参数&#xff0c;简称形参…

C51——添加震动开盖功能,使用外部中断优化

void main() {double dis;Timer1Init();Time0Init();SG90_Init();while(1){dis get_dis();if(dis<10 || SW1 0||Vibrate 0){OpenTheLed5();opengaizi(); // }else{CloseTheLed5();closegaizi();}} }像这样只是简单的通过震动模块传给单片机一个让舵机转动&#xff0c;出来…

lvm 制作

壹&#xff1a; 创建LVM 逻辑卷 1&#xff0c;将物理盘格式为pv卷&#xff08;物理卷&#xff09;&#xff0c;使用pvcreate 命令 pvcreate /dev/sdc 或则是 pvcreate /dev/sdc /dev/sdb pvdisplay 或pvs 命令查看 PV 物理卷得创建情况 2,创建卷组 VG 通过vgcreate 命令,将pv加…

《图解TCP/IP》阅读笔记(第六章 6.3、6.4)—— 鼎鼎大名的UDP、TCP

前言&#xff1a; 本篇将要介绍UDP和TCP&#xff0c;篇幅略长&#xff0c;主要是TCP的内容较为复杂 6.3 UDP UDP&#xff08;User Datagram Protocol&#xff0c;用户数据报协议&#xff09; 根据此前的了解&#xff0c;UDP不提供复杂的控制机制&#xff0c;其是一种利用IP提…

JavaSE(类和对象、this用法、构造方法)

1. 面向对象 C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解问题的步骤&#xff0c;通过函数调用逐步解决问题。 JAVA是基于面向对象的&#xff0c;关注的是对象&#xff0c;将一件事情拆分成不同的对象&#xff0c;靠对象之间的交互完成。 面向过程注重的是…

2005-2020年全国及31省绿色信贷水平原始数据及测算

2005-2020年各省绿色信贷水平原始数据及测算 1、时间&#xff1a;2005-2020年 2、来源&#xff1a;整理自统计NJ、工业NJ、2018年经济普查&#xff0c;其中2017年采用插值法填补 3、范围&#xff1a;包括全国及31省市 4、数据内容&#xff1a;包含计算过程和原始数据 5、具…

动态规划——线性dp

基于数字三角形问题扩展 参考闫氏dp分析法参考闫氏dp分析法参考闫氏dp分析法 方格取数 f[i1][j1][i2][j2]表示&#xff08;1,1&#xff09;到&#xff08;i1,j1&#xff09;和&#xff08;1,1&#xff09;到(i2,j2)和的最大值f[i1][j1][i2][j2]表示&#xff08;1,1&#xff09…