提高工作效率的JavaScript单行代码

在这里插入图片描述

摘要：

平时在根据ui设计图处理数据的时候，需要用到js的一些方法！所以这里总结一些提高工作效率的JavaScript单行代码！

目录概览

- - 摘要：
  - `1.#生成随机字符串`
  - `2.# 转义HTML特殊字符`
  - `3.# 单词首字母大写`
  - `4.# 将字符串转换为小驼峰`
  - `5.# 删除数组中的重复值`
  - `6.# 铺平一个数组`
  - `7.# 移除数组中的假值`
  - `8.# 确认一个数字是奇数还是偶数`
  - `9.# 获取两个数字之间的随机数`
  - `10.# 计算平均值`
  - `11.# 将数字截断到固定的小数点`
  - `12.# 计算两个日期之间天数`
  - `13.# 从日期中获取是一年中的哪一天`
  - `14.# 获取一个随机的颜色值`
  - `15.# 将RGB颜色转换为十六进制颜色值`
  - `16.# 清除所有的cookie`
  - `17.# 检测黑暗模式`
  - `18.# 交换两个变量的值`
  - `19.# 暂停一会`
  - `20.#翻转字符串`
  - `21.#生成一个随机的十六进制码`
  - `22.#数组随机排序`
  - `23.#滚动到顶部/滚动到底部`
  - `24.#检查是否有人在使用暗色主题`
  - `25.#复制到剪贴板`
  - `26.#获取两个日期之间的天数`
  - `27.#获取随机布尔值`
  - `28.#检查当前用户是否在苹果设备上`
  - `29.#从数组中删除重复项`
  - `30.#检查对象是否为空`
  - `31.#检查当前选项卡是否在后台`
  - `32.#检测元素是否处于焦点`
  - `33.#检查设备类型`
  - `34.#获取选定的文本`
  - `35.#查询某天是否为工作日`
  - `36.#转换华氏/摄氏`
  - `37.#两日期之间相差的天数`
  - `38.#将 RGB 转换为十六进制`
  - `39.#计算数组平均值`
  - `40.#检查元素是否在视窗中`
  - `41.#持续更新...`

`1.#生成随机字符串`

当我们需要一个唯一id时，通过Math.random创建一个随机字符串简直不要太方便噢！！！

const randomString = () => Math.random().toString(36).slice(2)
randomString() // gi1qtdego0b
randomString() // f3qixv40mot
randomString() // eeelv1pm3ja

const max = 20;
const min = 10;

// Math.floor() 返回小于或等于一个给定数字的最大整数。
// Math.random() 返回一个浮点型伪随机数字，在0（包括0）和1（不包括）之间。

const random = Math.floor(Math.random() * (max - min + 1)) + min;
console.log(random);

//output: 17
//output: 10

`2.# 转义HTML特殊字符`

解决XSS方法之一就是转义HTML。

const escape = (str) => str.replace(/[&<>"']/g, (m) => ({  '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[m]))
escape('<div class="medium">Hi Medium.</div>') 
// &lt;div class=&quot;medium&quot;&gt;Hi Medium.&lt;/div&gt

`3.# 单词首字母大写`

const uppercaseWords = (str) => str.replace(/^(.)|\s+(.)/g, (c) => c.toUpperCase())
uppercaseWords('hello world'); // 'Hello World'

`4.# 将字符串转换为小驼峰`

const toCamelCase = (str) => str.trim().replace(/[-_\s]+(.)?/g, (_, c) => (c ? c.toUpperCase() : ''));
toCamelCase('background-color'); // backgroundColor
toCamelCase('-webkit-scrollbar-thumb'); // WebkitScrollbarThumb
toCamelCase('_hello_world'); // HelloWorld
toCamelCase('hello_world'); // helloWorld

`5.# 删除数组中的重复值`

得益于ES6，使用Set数据类型来对数组去重太方便了。

const removeDuplicates = (arr) => [...new Set(arr)]
console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6])) 
// [1, 2, 3, 4, 5, 6]

`6.# 铺平一个数组`

const flat = (arr) =>
    [].concat.apply(
        [],
        arr.map((a) => (Array.isArray(a) ? flat(a) : a))
    )
// Or
const flat = (arr) => arr.reduce((a, b) => (Array.isArray(b) ? [...a, ...flat(b)] : [...a, b]), [])
flat(['cat', ['lion', 'tiger']]) // ['cat', 'lion', 'tiger']

`7.# 移除数组中的假值`

const removeFalsy = (arr) => arr.filter(Boolean)
removeFalsy([0, 'a string', '', NaN, true, 5, undefined, 'another string', false])
// ['a string', true, 5, 'another string']

`8.# 确认一个数字是奇数还是偶数`

const isEven = num => num % 2 === 0
isEven(2) // true
isEven(1) // false

`9.# 获取两个数字之间的随机数`

const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
random(1, 50) // 25
random(1, 50) // 34

`10.# 计算平均值`

const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4, 5);   // 3

`11.# 将数字截断到固定的小数点`

const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)
round(1.005, 2) //1.01
round(1.555, 2) //1.56

`12.# 计算两个日期之间天数`

const diffDays = (date, otherDate) => Math.ceil(Math.abs(date - otherDate) / (1000 * 60 * 60 * 24));
diffDays(new Date("2021-11-3"), new Date("2022-2-1"))  // 90

`13.# 从日期中获取是一年中的哪一天`

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

`14.# 获取一个随机的颜色值`

const randomColor = () => `#${Math.random().toString(16).slice(2, 8).padEnd(6, '0')}`
randomColor() // #9dae4f
randomColor() // #6ef10e

`15.# 将RGB颜色转换为十六进制颜色值`

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

`16.# 清除所有的cookie`

const clearCookies = () => document.cookie.split(';').forEach((c) => (document.cookie = c.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date().toUTCString()};path=/`)))

`17.# 检测黑暗模式`

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

`18.# 交换两个变量的值`

[foo, bar] = [bar, foo]

`19.# 暂停一会`

const pause = (millis) => new Promise(resolve => setTimeout(resolve, millis))
const fn = async () => {
  await pause(1000)
  console.log('fatfish') // 1s later
}
fn()

`20.#翻转字符串`

const reverse = (str) => str.split('').reverse().join('');
const str = 'hello world';

console.log(reverse(str));

// output: dlrow olleh

const reverse = str => str.split('').reverse().join('');
reverse('this is reverse');
// esrever si siht

`21.#生成一个随机的十六进制码`

padEnd() 方法会用一个字符串填充当前字符串（如果需要的话则重复填充），返回填充后达到指定长度的字符串。从当前字符串的末尾（右侧）开始填充。

const color =
   '#' +
   Math.floor(Math.random() * 0xffffff)
      .toString(16)
      .padEnd(6, '0');

console.log(color);

//output: #ed19ed

const randomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`
console.log(randomHexColor());
// #a2ce5b

`22.#数组随机排序`

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

const arr = Array.from({ length: 10 }, (_, i) => i + 1);
console.log('array: ', arr);
console.log('shuffled array: ', shuffleArray(arr));

//output:
// array: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// shuffled array: [5, 7, 8, 9, 1, 2, 3, 4, 10, 6]

`23.#滚动到顶部/滚动到底部`

初学者经常会发现自己很难正确地将元素滚动到视图中。滚动元素最简单的方法是使用 scrollIntoView() 方法。

/Add behavior: "smooth" for a smooth scrolling animation.
const scrollToTop = (element) =>
   element.scrollIntoView({ behavior: 'smooth', block: 'start' });

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

`24.#检查是否有人在使用暗色主题`

如果您希望您显示的内容遵循使用您网站的人的配色方案，JavaScript 包含一种检测某人是否使用暗色主题的方法，以便您可以相应地调整颜色。

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

// 如果您想将其用作函数
const isDarkMode2 = () =>
   window.matchMedia &&
   window.matchMedia('(prefers-color-scheme: dark)').matches;

console.log(isDarkMode1);
console.log(isDarkMode2());

//output:
// true
// true

`25.#复制到剪贴板`

将文本复制到剪贴板非常有用，也是一个难以解决的问题。您可以在网上找到各种解决方案，但下面的解决方案可能是最简洁和最聪明的解决方案之一。

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

`26.#获取两个日期之间的天数`

确定如用户的年龄时，你必须计算从某个时间点到现在已经过去的天数。

const ageDays = (old, recent) =>
   Math.ceil(Math.abs(old - recent) / (1000 * 60 * 60 * 24)) + ' Day(s)';

const firstDate = new Date('2021-06-10');
const secondDate = new Date('2022-03-03');

console.log(ageDays(firstDate, secondDate));

// output: 266 Day(s)

`27.#获取随机布尔值`

Javascript 中的 Math.random 函数可用于生成范围之间的随机数。要生成随机布尔值，我们需要随机获取 0 到 1 之间的数字，然后检查它是大于还是小于 0.5。

const randomBoolean = () => Math.random() >= 0.5;
console.log(randomBoolean());

// output: false

`28.#检查当前用户是否在苹果设备上`

我们可以使用 navigator.platform 来检查浏览器运行的平台

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

console.log(navigator.platform);
console.log(isAppleDevice);

// output:
// Win32
// false

注意：此属性的推荐替代方案是 navigator.userAgentData.platform。但是，navigator.userAgentData.platform 还没有被一些主流浏览器支持，并且定义它的规范还没有被任何标准组采用（具体来说，它不是 W3C 或 WHATWG 发布的任何规范的一部分）。

`29.#从数组中删除重复项`

let arr = [5, 7, 5, 7, 4];
let unique = […new Set(arr)];
console.log(unique); //returns [5, 7, 4]

const uniqueArr = (arr) => [...new Set(arr)];
console.log(uniqueArr(["前端","js","html","js","css","html"]));

`30.#检查对象是否为空`

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;
isEmpty({}) // true
isEmpty({a:"not empty"}) //false

`31.#检查当前选项卡是否在后台`

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

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

isTabActive()
// true|false

`32.#检测元素是否处于焦点`

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

const elementIsInFocus = (el) => (el === document.activeElement);
elementIsInFocus(anyElement)
// 元素处于焦点返回true，反之返回false

`33.#检查设备类型`

使用navigator.userAgent 判断是移动设备还是电脑设备：

const judgeDeviceType =
      () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ? 'Mobile' : 'PC';

judgeDeviceType()  // PC | Mobile

`34.#获取选定的文本`

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

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

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

`35.#查询某天是否为工作日`

我们自己写日历组件时经常会用到，判断某个日期是否为工作日；周一至周五为工作日:

const isWeekday = (date) => date.getDay() % 6 !== 0;

isWeekday(new Date(2022, 03, 11))
// true

`36.#转换华氏/摄氏`

处理温度有时会晕头转向。这两个函数则能帮助大家将华氏温度转换为摄氏温度，以及将摄氏温度转换为华氏温度。

//将华氏温度转换为摄氏温度
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;
fahrenheitToCelsius(50);
// 10

//将摄氏温度转华氏温度
const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
celsiusToFahrenheit(100)
// 212

`37.#两日期之间相差的天数`

日常开发中经常遇到需要显示剩余天数，一般我们就需要计算两日期之间相差天数：

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

`38.#将 RGB 转换为十六进制`

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

rgbToHex(255, 255, 255); 
//  #ffffff

`39.#计算数组平均值`

计算平均值的方式很多，计算的逻辑都是一样的，但是实现方式各不相同，一行代码简单实现：

const average = (arr) => arr.reduce((a, b) => a + b) / arr.length;
average([1,9,18,36]) //16

`40.#检查元素是否在视窗中`

const elementInViewport = el => el.getBoundingClientRect().top >= 0 && el.getBoundingClientRect().bottom <= window.innerHeight;

该函数接受一个参数 el，表示要检查的元素。在函数内部，使用 getBoundingClientRect() 方法获取到 el 元素的位置信息，然后通过比较 top 和 bottom 属性来判断元素是否在当前视口中可见。

具体来说，el.getBoundingClientRect().top >= 0 表示元素顶部是否在或者超出视口顶部，而 el.getBoundingClientRect().bottom <= window.innerHeight 表示元素底部是否在或者超出视口底部。

如果上述两个条件都满足，则说明元素完全在当前视口中可见，函数将返回 true，否则将返回 false。

以下是使用 elementInViewport 函数检查元素是否在视口中可见的示例：

const element = document.getElementById('myElement');
if (elementInViewport(element)) {
  console.log('Element is in the viewport');
} else {
  console.log('Element is not in the viewport');
}