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

Posted 2022-01-11 Oliver尹

介绍

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;