// 判断是否是NaN
const isArray = (value)=> Object.prototype.toString.call(value) === “[object Array]”;
有类型判断,自然就有对应的类型获取,获取当前变量的类型
// 获取变量的类型
const getType = (value) => Object.prototype.toString.call(value);
// Result: ‘[object Function]’
getType(()=>{});
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(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(),