12 个非常实用的 JavaScript 函数

Posted 2023-04-08 码农键盘上的梦

1、生成随机颜色

你的网站是否需要生成随机颜色？下面一行代码就可以实现。

const generateRandomHexColor = () => `#$Math.floor(Math.random() * 0xffffff).toString(16)`

console.log(generateRandomHexColor())

2、数组重排序

对数组的元素进行重新排序是一项非常重要的技巧，但是原生 Array 中并没有这项功能。

const shuffle = (arr) => arr.sort(() => Math.random() - 0.5)

const arr = [1, 2, 3, 4, 5]
console.log(shuffle(arr))

3、复制到剪切板

复制到剪切板是一项非常实用且能够提高用户便利性的功能。

const copyToClipboard = (text) => navigator.clipboard && navigator.clipboard.writeText && navigator.clipboard.writeText(text)

copyToClipboard("Hello World!")

4、检测暗色主题

暗色主题日益普及，很多用的都会在设备中启用案模式，我们将应用程序切换到暗色主题可以提高用户体验度。

const isDarkMode = () => window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;

console.log(isDarkMode())

5、滚动到顶部

将元素滚动到顶部最简单的方法是使用scrollIntoView。设置block为start可以滚动到顶部；设置behavior为smooth可以开启平滑滚动。

const scrollToTop = (element) => 
  element.scrollIntoView( behavior: "smooth", block: "start" );

6、滚动到底部

与滚动到顶部一样，滚动到底部只需要设置block为end即可。

const scrollToBottom = (element) => 
  element.scrollIntoView( behavior: "smooth", block: "end" );

7、检测元素是否在屏幕中

检查元素是否在窗口中最好的方法是使用IntersectionObserver。

const callback = (entries) => 
  entries.forEach((entry) => 
    if (entry.isIntersecting) 
      // `entry.target` is the dom element
      console.log(`$entry.target.id is visible`);
    
  );
;

const options = 
  threshold: 1.0,
;
const observer = new IntersectionObserver(callback, options);
const btn = document.getElementById("btn");
const bottomBtn = document.getElementById("bottom-btn");
observer.observe(btn);
observer.observe(bottomBtn);

8、检测设备

使用navigator.userAgent来检测网站运行在哪种平台设备上。

const detectDeviceType = () =>
  /android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  ) ? "Mobile" : "Desktop";

console.log(detectDeviceType());

9、隐藏元素

我们可以将元素的style.visibility设置为hidden，隐藏元素的可见性，但元素的空间仍然会被占用。如果设置元素的style.display为none，会将元素从渲染流中删除。

const hideElement = (el, removeFromFlow = false) => 
  removeFromFlow ? (el.style.display = 'none')
  : (el.style.visibility = 'hidden')

10、从 URL 中获取参数

javascript 中有一个 URL 对象，通过它可以非常方便的获取 URL 中的参数。

const getParamByUrl = (key) => 
  const url = new URL(location.href)
  return url.searchParams.get(key)

11、深拷贝对象

深拷贝对象非常简单，先将对象转换为字符串，再转换成对象即可。

const deepCopy = obj => JSON.parse(JSON.stringify(obj))

除了利用 JSON 的 API，还有更新的深拷贝对象的 structuredClone API，但并不是在所有的浏览器中都支持。

structuredClone(obj)

12、等待函数

JavaScript 提供了setTimeout函数，但是它并不返回 Promise 对象，所以我们没办法使用 async 作用在这个函数上，但是我们可以封装等待函数。

const wait = (ms) => new Promise((resolve)=> setTimeout(resolve, ms))

const asyncFn = async () => 
  await wait(1000)
  console.log('等待异步函数执行结束')


asyncFn()

感谢你的阅读，如果本文对你有所帮助，不妨点个赞吧。

《JavaScript》20个非常实用的JavaScript一行代码，持续更新中

介绍

JavaScript众所周知是弱类型语言，这是缺点，也是优点，缺点是如果使用的人不严谨那么项目级的开发可以最终演变成在BUG中写代码…10行代码11个BUG，一言难尽，但如果使用的人严谨、逻辑性强，对JavaScript的理解透彻，那么这有变成了另外一种效果，看着这些大神的代码极为洒脱，随心所欲，直呼牛皮…大喊666666…
希望有一天我们也能到达这种境界…加油，打工人…
​

下面是个人收藏的一些牛皮代码以及项目中经常会使用到的工具函数，使用的好，可以让你的瞬间看起来像个高手（求关注，求收藏，求点赞）；

​下载

这些代码都已经上传至gitee，具体地址如下：gitee代码地址

一行代码

类型判断

这个其实在项目中非常常用，很多时候都需要对变量进行类型判断，比如接口返回的是用户信息，我们要取 res.name，但如果接口返回的是null，那么此时接口就会报错，这时候我们往往要写一些防御性代码，也就是类型判断：

// 判断是否是字符串
const isString = (value)=> Object.prototype.toString.call(value) === "[object String]";

// 判断是否是布尔值
const isBoolean = (value)=> Object.prototype.toString.call(value) === "[object Boolean]";

// 判断是否是数字
const isNumber = (value)=> Object.prototype.toString.call(value) === "[object Number]";

// 判断是否是underfined
const isUndefined = (value)=> Object.prototype.toString.call(value) === "[object Undefined]";

// 判断是否是null
const isNull = (value)=> Object.prototype.toString.call(value) === "[object Null]";

// 判断是否是NaN
const isNaN = (value)=> Number.isNaN(value);

// 判断是否是null
const isObject = (value)=> Object.prototype.toString.call(value) === "[object Object]";

// 判断是否是null
const isFunction = (value)=> Object.prototype.toString.call(value) === "[object Function]";

// 判断是否是NaN
const isArray = (value)=> Object.prototype.toString.call(value) === "[object Array]";

类型获取

有类型判断，自然就有对应的类型获取，获取当前变量的类型

// 获取变量的类型
const getType = (value) => Object.prototype.toString.call(value);

// Result: '[object Function]'
getType(()=>);  

Date 对象中获取时间

const timeDate = date => date.toTimeString().slice(0, 8);

// Result: "09:38:11"
console.log(timeDate(new Date(0, 0, 0, 09, 38, 11)))
// Result: 返回当前时间
console.log(timeFromDate(new Date()));

判断当前日期是一年中的第几天

判断当前的日期属于一年中的第几天

const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

// Result: 355
dayOfYear(new Date());   

计算两个日期之间的间隔时间

计算两个日期的间隔时间，比如2021-10-31和2021-12-15间隔了多少天

const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)

// Result: 410
console.log(dayDif(new Date("2021-10-31"), new Date("2022-12-15")))

检查元素是否处于聚焦状态

使用 document.activeElement 来检查元素是否处于聚焦状态

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

// Result: 参数为DOM元素，如果还元素处于焦点状态会返回 True 否则返回 False
elementIsInFocus(Element)

滚动至页面顶部

使用window.scrollTo() 会滚动至指定的坐标，如果设置坐标为（0，0），就会回到页面顶部

const goToTop = () => window.scrollTo(0, 0);

// Result: 将会滚动至顶部
goToTop();

检查当前用户是否是苹果设备

使用 navigator.platform 判断当前用户是否是苹果设备

const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);

// Result: 是苹果设备会返回 True
console.log(isAppleDevice);

复制到粘贴板

使用navigator.clipboard.writeText复制到剪贴板

const copyToClipboard = (text) => navigator.clipboard.writeText(text);

copyToClipboard("Hello Oliver");

判断当前标签页是否为可视状态

通过下方代码可以判断当前的页签是否处于激活状态，有时候我们在页签失焦的时候需要停止某些操作

const isBrowserTabInView = () => document.hidden;

// Result: true/false
isBrowserTabInView();

获取选中的文本

该方法通过内置的getSelection()属性获取用户选择的文本

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

getSelectedText();

检测是否是黑暗模式

使用以下代码检查用户的设备是否处于暗模式

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

console.log(isDarkMode)

反转字符串

其实反转字符串有很多种方法，这里是我之前看到一位大佬的写法，使用了 split()，reverse() 和 join()后仅一行代码就实现了：

// 反转字符串
const reverse = str => str.split('').reverse().join('');

// Result: 'revilo olleh'
reverse('hello oliver');     

首字母大写

将英文单字首字母大写后并返回

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)

// Result: 'Hello Oliver'
capitalize("hello Oliver")  

将RGB颜色转化为十六进制

将RGB颜色转成十六进制的颜色，比如：rgb(255,255,255)将会变成#ffffff

const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

// Result: '#ffffff'
rgbToHex(255, 255, 255);

随机十六进制颜色

随机生成16进制的颜色

const randomHex = () => `#$Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")`;

// Result: 随机十六进制颜色，比如:#b6c349
randomHex();

数字的奇偶数判断

通过%号直接判断数字是奇数还是偶数

const isEven = num => num % 2 === 0;

// Result: true
console.log(isEven(2));
// Result: false
console.log(isEven(3));

两个整数之间的随机整数

在两个整数之间生成一个随机整数

const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

// Result: 1-50之间的随机整数
random(1, 50);

数组去重

数组去重的方法有很多，这里直接采用了ES6中的方法

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

// Result: [1, 2, 3, 4, 5, 6]
console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6]));

判断数组是否为空

该方法用来判断一个数组是否为空，返回值是一个布尔型

const isEmpty = arr => Array.isArray(arr) && arr.length === 0;

// Result: false
isEmpty([1, 2, 3]);

小结

都是平时看CSDN等一些大神们的文章时，看到的一些神奇的代码收藏下来的，如果有小伙伴还有别的看到的一些代码，麻烦告知博主，我及时更新，谢谢

最后附上所有代码：

const Utils = 
	// 反转字符串
    reverse = str => str.split('').reverse().join(''),
	// 是否是字符串
	isString = (value)=> Object.prototype.toString.call(value) === "[object String]",
	// 是否是布尔值
	isBoolean = (value)=> Object.prototype.toString.call(value) === "[object Boolean]",
	// 是否是数字
	isNumber = (value)=> Object.prototype.toString.call(value) === "[object Number]",
	// 是否是Underfined
	isUndefined = (value)=> Object.prototype.toString.call(value) === "[object Undefined]",
	// 是否是null
	isNull = (value)=> Object.prototype.toString.call(value) === "[object Null]",
	// 是否是NaN
	isNaN = (value)=> Number.isNaN(value),
	// 是否是对象
	isObject = (value)=> Object.prototype.toString.call(value) === "[object Object]",
	// 是否是函数
	isFunction = (value)=> Object.prototype.toString.call(value) === "[object Function]",
	// 是否是数组
	isArray = (value)=> Object.prototype.toString.call(value) === "[object Array]",
	// 获取变量类型
	getType = (value) => Object.prototype.toString.call(value),
	// Date 对象中获取时间
	timeDate = date => date.toTimeString().slice(0, 8),
	// 数字的奇偶数判断
	isEven = num => num % 2 === 0,
	// 判断当前日期是一年中的第几天
	dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24),
	// 计算两个日期之间的间隔时间
	dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000),
	// 滚动至页面顶部
	goToTop = () => window.scrollTo(0, 0),
	// 检查元素是否处于聚焦状态
	elementIsInFocus = (el) => (el === document.activeElement),
	// 检查当前用户是否是苹果设备
	isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform),
	// 判断当前标签页是否为可视状态
	isBrowserTabInView = () => document.hidden,
	// 获取选中的文本
	getSelectedText = () => window.getSelection().toString(),
	// 检测是否是黑暗模式
	isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
	// 首字母大写
	capitalize = str => str.charAt(0).toUpperCase() + str.slice(1),
	// 将RGB颜色转化为十六进制
	rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1),
	// 随机十六进制颜色
	randomHex = () => `#$Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")`,
	// 两个整数之间的随机整数
	random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min),
	// 数组去重
	removeDuplicates = (arr) => [...new Set(arr)],
	// 判断数组是否为空
	isEmpty = arr => Array.isArray(arr) && arr.length === 0
;

export default Utils;