既简单又实用的单行JavaScript小技巧，你学会了吗?

前言

你可能做了很长时间的 JavaScript 开发，但有时候你可能没有使用最新的 JavaScript 特性或技巧，这些特性和技巧可以在不需要编写额外代码的情况下解决你的问题。它们可以帮助你写出干净且优化的 JavaScript 代码。

从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'}

确定设备类型

我们经常必须这样做才能在手机上显示 A 逻辑，在 PC 上显示 B 逻辑。基本上，设备类型是通过识别浏览器的 userAgent 来确定的。

const isMobile = () => {  return !!navigator.userAgent.match(    /(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i  );};

判断设备是安卓还是IOS

除了区分是移动端还是PC端，很多时候我们还需要区分当前设备是Android还是IOS。

const isAndroid = () => {  return /android/i.test(navigator.userAgent.toLowerCase());};
const isIOS = () => {  let reg = /iPhone|iPad|iPod|iOS|Macintosh/i;  return reg.test(navigator.userAgent.toLowerCase());};

检查当前选项卡是否在后台

浏览器使用选项卡式浏览，任何网页都有可能在后台,此时对用户来说是没有在浏览的, 知道怎么快速检测到，你的网页对用户是隐藏还是可见吗？

const isTabActive = () => !document.hidden; 

isTabActive()
// true|false

检测元素是否处于焦点

activeElement 属性返回文档中当前获得焦点的元素。

const elementIsInFocus = (el) => (el === document.activeElement);

elementIsInFocus(anyElement)
// 元素处于焦点返回true，反之返回false

文字复制到剪贴板

Clipboard API 它的所有操作都是异步的，返回 Promise 对象，不会造成页面卡顿。而且，它可以将任意内容（比如图片）放入剪贴板。

const copyText = async (text) => await navigator.clipboard.writeText(text)
copyText('单行代码')

获取选定的文本

使用内置的 getSelection 获取用户选择的文本:

const getSelectedText = () => window.getSelection().toString();

getSelectedText();
// 返回选中的内容

获取浏览器类型及其版本

作为前端开发人员，您可能会遇到各种兼容性问题，这时候可能需要获取浏览器的类型和版本。

const getExplorerInfo = () => {  let t = navigator.userAgent.toLowerCase();  return 0 <= t.indexOf("msie")    ? {        //ie < 11        type: "IE",        version: Number(t.match(/msie ([\d]+)/)[1]),      }    : !!t.match(/trident/.+?rv:(([\d.]+))/)    ? {        // ie 11        type: "IE",        version: 11,      }    : 0 <= t.indexOf("edge")    ? {        type: "Edge",        version: Number(t.match(/edge/([\d]+)/)[1]),      }    : 0 <= t.indexOf("firefox")    ? {        type: "Firefox",        version: Number(t.match(/firefox/([\d]+)/)[1]),      }    : 0 <= t.indexOf("chrome")    ? {        type: "Chrome",        version: Number(t.match(/chrome/([\d]+)/)[1]),      }    : 0 <= t.indexOf("opera")    ? {        type: "Opera",        version: Number(t.match(/opera.([\d]+)/)[1]),      }    : 0 <= t.indexOf("Safari")    ? {        type: "Safari",        version: Number(t.match(/version/([\d]+)/)[1]),      }    : {        type: t,        version: -1,      };};

设置cookies

cookie 可能是我见过的最糟糕的 API，它很难使用，以至于我们不得不重新封装它以最大限度地提高开

const setCookie = (key, value, expire) => {  const d = new Date();  d.setDate(d.getDate() + expire);  document.cookie = `${key}=${value};expires=${d.toUTCString()}`;};

获取 cookie

除了写入 cookie 之外，我们还将参与其读取操作。

const getCookie = (key) => {  const cookieStr = unescape(document.cookie);  const arr = cookieStr.split("; ");  let cookieValue = "";  for (let i = 0; i < arr.length; i++) {    const temp = arr[i].split("=");    if (temp[0] === key) {      cookieValue = temp[1];      break;    }  }  return cookieValue;};

删除cookies

删除 cookie 的想法是什么？其实，只要把它的过期时间设置为这一刻，它就会立即过期。

const delCookie = (key) => {  document.cookie = `${encodeURIComponent(key)}=;expires=${new Date()}`;};

滚动到页面顶部

我们可以使用 window.scrollTo() 平滑滚动到页面顶部。

const scrollToTop = () => {  window.scrollTo({ top: 0, left: 0, behavior: "smooth" });};

scrollToTop()
// 平滑滚动到页面顶部

滚动到页面底部

当然，如果知道页面的高度，也可以平滑滚动到页面底部。

const scrollToBottom = () => {  window.scrollTo({    top: document.documentElement.offsetHeight,    left: 0,    behavior: "smooth",  });};

scrollToBottom()
// 平滑滚动到页面底部

滚动元素到可见区域

有时我们需要将元素滚动到可见区域，我们应该怎么做？使用 scrollIntoView 就足够了。

const smoothScroll = (element) => {  element.scrollIntoView({    behavior: "smooth",  });};

smoothScroll()

全屏显示元素

你一定遇到过这样的场景，需要全屏播放视频，并在浏览器中全屏打开页面。

const goToFullScreen = (element) => {  element = element || document.body;  if (element.requestFullscreen) {    element.requestFullscreen();  } else if (element.mozRequestFullScreen) {    element.mozRequestFullScreen();  } else if (element.msRequestFullscreen) {    element.msRequestFullscreen();  } else if (element.webkitRequestFullscreen) {    element.webkitRequestFullScreen();  }};

goToFullScreen()

退出浏览器全屏状态

是的，这个和第4点一起使用，你也会有退出浏览器全屏状态的场景。

const goExitFullscreen = () => {  if (document.exitFullscreen) {    document.exitFullscreen();  } else if (document.msExitFullscreen) {    document.msExitFullscreen();  } else if (document.mozCancelFullScreen) {    document.mozCancelFullScreen();  } else if (document.webkitExitFullscreen) {    document.webkitExitFullscreen();  }};

goExitFullscreen()

获取数据类型

如何通过函数获取变量的数据类型？

const getType = (value) => {  const match = Object.prototype.toString.call(value).match(/ (\w+)]/)  return match[1].toLocaleLowerCase()}

getType() // undefinedgetType({}}) // objectgetType([]) // arraygetType(1) // numbergetType('fatfish') // stringgetType(true) // booleangetType(/fatfish/) // regexp

停止冒泡事件

一种适用于所有平台的防止事件冒泡的方法。

const stopPropagation = (event) => {  event = event || window.event;  if (event.stopPropagation) {    event.stopPropagation();  } else {    event.cancelBubble = true;  }};

stopPropagation()

深拷贝一个对象

如何复制深度嵌套的对象？

const deepCopy = (obj, hash = new WeakMap()) => {  if (obj instanceof Date) {    return new Date(obj);  }  if (obj instanceof RegExp) {    return new RegExp(obj);  }  if (hash.has(obj)) {    return hash.get(obj);  }  let allDesc = Object.getOwnPropertyDescriptors(obj);  let cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc);  hash.set(obj, cloneObj);  for (let key of Reflect.ownKeys(obj)) {    if (obj[key] && typeof obj[key] === "object") {      cloneObj[key] = deepCopy(obj[key], hash);    } else {      cloneObj[key] = obj[key];    }  }  return cloneObj;};

deepCopy({a: {b: "c"}})

生成随机字符串

不知道大家有没有遇到过需要生成随机字符串的场景。我遇到过很多次，每次都要google一遍，直到学会

const randomString = (len) => {  let chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz123456789";  let strLen = chars.length;  let randomStr = "";  for (let i = 0; i < len; i++) {    randomStr += chars.charAt(Math.floor(Math.random() * strLen));  }  return randomStr;};
randomString(10) // pfkMfjEJ6xrandomString(20) // ce6tEx1km4idRNMtym2S

字符串首字母大写

const fistLetterUpper = (str) => {  return str.charAt(0).toUpperCase() + str.slice(1);};
fistLetterUpper('fatfish') // Fatfish

生成指定范围内的随机数

也许出于测试目的，我经常需要生成一定范围内的随机数。

const randomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
randomNum(1, 10) // 6randomNum(10, 20) // 11

打乱数组的顺序

如何打乱数组的原始顺序？

const shuffleArray = (array) => {  return array.sort(() => 0.5 - Math.random())}
let arr = [ 1, -1, 10, 5 ]
shuffleArray(arr) // [5, -1, 10, 1]shuffleArray(arr) // [1, 10, -1, 5]

从数组中获取随机值

之前做过一个抽奖项目，需要让数组中的奖品随机出现。

const getRandomValue = array => array[Math.floor(Math.random() * array.length)]; const prizes = [  '$100', '🍫', '🍔' ]
getRandomValue(prizes) // 🍫getRandomValue(prizes) // 🍔getRandomValue(prizes) // 🍫

格式化货币

格式化货币的方式有很多，比如这两种方式。

第一种方法

const formatMoney = (money) => {  return money.replace(new RegExp(`(?!^)(?=(\d{3})+${money.includes('.') ? '\.' : '$'})`, 'g'), ',')  }
formatMoney('123456789') // '123,456,789'formatMoney('123456789.123') // '123,456,789.123'formatMoney('123') // '123'

第二种方式

正则表达式让我们很头疼，不是吗？所以我们需要找到一种更简单的方式来格式化货币。

const formatMoney = (money) => {  return money.toLocaleString()}
formatMoney(123456789) // '123,456,789'formatMoney(123456789.123) // '123,456,789.123'formatMoney(123) // '123'

数组去重

从数组中删除所有重复值，实现方式非常多，我们这里就说最简单的方式，一行代码搞定：

const uniqueArr = (arr) => [...new Set(arr)];

console.log(uniqueArr(["前端","js","html","js","css","html"]));
// ['前端', 'js', 'html', 'css']

uniqueArr方法将数据转为Set，然后再解构为数组返回。

检查对象是否为空

检查对象是否为空，实际上并不那么简单，即使对象为空，每次检查对象是否等于 {} 也会返回 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 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