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

news/2025/1/11 12:01:35/

大厂面试题分享 面试题库

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

地址:前端面试题库

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.ppmy.cn/news/6219.html

相关文章

C# Winform 三层架构

一、介绍 三层架构是 C# 桌面开发中比较常用的框架&#xff0c;是由 表示层&#xff08;UI&#xff09;、业务逻辑层&#xff08;BLL&#xff09;和数据访问层&#xff08;DAL&#xff09;三层架构组成&#xff0c;目的是为了 “高内聚&#xff0c;低耦合”。开发人员分工更明…

【并发】深入理解JMM并发三大特性(一)

【并发】深入理解JMM&并发三大特性&#xff08;一&#xff09; 今天是2022.11.16&#xff0c;在此之前我已经学习完了图灵课堂MySQL的课程&#xff0c;也是想这篇文章一样用CSDN博客的形式来记录这些知识点。 在并发中&#xff0c;JMM在大多数人眼中&#xff0c;它是整个…

java中的反射

反射 类加载的过程 当程序主动使用某个类时&#xff0c;如果该类还未被加载到内存中&#xff0c;则JVM会通过加载、连接、初始化3个步骤来对该类进行初始化。如果没有意外&#xff0c;JVM将会连续完成3个步骤&#xff0c;所以有时也把这个3个步骤统称为类加载或类初始化。加载 …

从 2022 年优秀 Linux 发行版中挑选你喜欢的版本

导读如果你想从 2022 年最佳 Linux 发行版列表中挑选一个最喜欢的版本&#xff0c;那么今天你需要考虑以下几个选项。 2022 年是充满惊喜的一年&#xff0c;Linux 发行版的表现也不例外。从充满功能的新版本到各种桌面选项&#xff0c;总有一些值得期待的东西。 如果你想从 20…

Promise对象的使用

一、什么是Promise Promise 是异步编程的一种解决方案&#xff0c;比传统的解决方案&#xff08;回调函数和事件&#xff09;更合理和更强大。从语法上说&#xff0c;Promise 是一个对象&#xff0c;从它可以获取异步操作的消息。Promise 提供统一的 API&#xff0c;各种异步操…

让人恶心的多线程代码,性能怎么优化?

Java 中最烦人的&#xff0c;就是多线程&#xff0c;一不小心&#xff0c;代码写的比单线程还慢&#xff0c;这就让人非常尴尬。 通常情况下&#xff0c;我们会使用 ThreadLocal 实现线程封闭&#xff0c;比如避免 SimpleDateFormat 在并发环境下所引起的一些不一致情况。其实…

小程序02/小程序 页面生命周期钩子函数、组件生命周期钩子函数

一. 页面生命周期钩子函数 onLoad 监听页面加载 onShow 监听页面显示 onReady 监听页面初次渲染完成 onHide 监听页面隐藏 onUnload 监听页面清除消失 onPullDownRefresh 监听用户…

Redis Lua拓展及使用示例

本文主要介绍 Lua 脚本的安全性问题、以及解决这些问题的方法进行说明&#xff0c; 及对执行 Lua 脚本EVAL的实现原理进行介绍&#xff0c;最后还有Lua的相关示例。 Lua 脚本功能是 Reids 2.6 版本的最大亮点&#xff0c; 通过内嵌对 Lua 环境的支持&#xff0c; Redis 解决了…