23个常见的 JavaScript 函数

本文收集了23个日常开发中非常常用的功能，其中一些可能很复杂，另一些可能很简单，但我相信它们都会或多或少对每个人都有帮助。
01、生成随机颜色
当网站需要生成随机颜色时，我们可以通过以下代码来执行此操作。

const generateRandomHexColors = () => ``#${Math.floor(Math.random() * 0xffffff).toString(16)}``; console.log(generateRandomHexColors());

02、复制到剪贴板
复制到剪贴板是一项非常有用且用户友好的功能。

const copyToClipboard = (text) => navigator.clipboard && avigator.clipboard.writeText && navigator.clipboard.writeText(text); copyToClipboard('Hello World!'); // JavaScript navigator 对象

03、检测深色主题
深色主题越来越流行，很多用户会在设备上启用暗模式。我们将应用程序切换到深色主题以改善用户体验。

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

04、滚动到顶部、滚动到底部
将元素滚动到顶部的最简单方法是使用 scrollIntoView。设置块开始滚动到顶部；将行为设置为平滑以启用平滑滚动，滚动到底部只是将块设置为结束。

`// 滚动到顶部
const scrollToTop = (element) => element.scrollIntoView({ behavior: 'smooth', block: 'start' });

// 滚动到底部
const scrollToBottom = (element) => element.scrollIntoView({ behavior: 'smooth', block: 'end' });`

05、检测元素是否在屏幕上
检查元素是否在窗口中的最佳方法是使用 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);

06、检测设备
使用 navigator.userAgent 检测网站在哪个平台设备上运行。

const detectDeviceType = () => /AndroidlwebosliPhoneliPadliPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop'; console.log(detectDeviceType());

07、隐藏元素
我们可以将元素的 style.visibility 设置为 hidden 来隐藏元素的可见性，但是，元素的空间还是会被占用。将元素的 style.display 设置为 none 将从渲染流中删除该元素。

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

8、从 URL 获取参数
JavaScript中有一个URL对象，可以很方便的获取URL中的参数。

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

9、深拷贝对象
深度复制对象非常简单。首先，将对象转换为字符串，然后将其转换为对象。
const deepCopy = (obj) => JSONparse(JSON.stringify(obj));

除了使用 JSON 的 API 之外，还有一个更新的结构化克隆 API，用于深度复制对象，并非所有浏览器都支持该 API。

10、等待功能
JavaScript 提供了 setTimeout 函数，但是，它没有返回 Promise 对象，所以我们不能在这个函数上使用 async，但是，我们可以封装等待函数。

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); const asyncFn = async () => { await wait(1000); console.log('Waiting for an asynchronous function to finish executing'); }; asyncFn();

11、有条件地在对象中添加属性

const isValid = false; const age = 18; //we can use spread operator (...) add properties in objectwe const person = { id: 'ab32', name: 'Krina', ...(isValid && { isActive: true }), // (false && {isActive:true} ...((age >= 18 || isValid) && { cart: 0 }), //(true&&{cart:0}) }; console.log('person', person); //person:{id:'ab32',name:'Krina',cart:0}