我写这10+个JavaScript单行代码，被组长夸代码写得优雅！-六虎

我报名参加金石方案1期应战——瓜分10万奖池，这是我的第2篇文章，点击查看活动详情

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结合reverse和join方法轻松完成。

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

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