【前端开发中常用的函数方法】

news/2024/10/30 9:25:52/

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 elementconsole.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)

⚠️ JS特有的东西比如undefined、function(){}、Symbol,stringify不会转换,默认会被忽略所以对象中有这些类型的情况下,上述方法不适用

12、等待函数

// JavaScript 提供了 setTimeout 函数,但是它并不返回 Promise 对象,所以我们没办法使用 async 作用在这个函数上,但是我们可以封装等待函数。
const wait = (ms) => new Promise((resolve)=> setTimeout(resolve, ms))const asyncFn = async () => {await wait(1000)console.log('等待异步函数执行结束')
}asyncFn()

13、检测某个元素是否聚焦

const hasFocus = el => el === document.activeElement

14、获取某个元素所有的兄弟元素

const a = el => [].slice.call(el.parentNode.children).filter(child => child !== el)

15、获取当前选择的文本

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

16、获取所有 cookie 并转为对象

const getCookies = () => document.cookie.split(';').map(item => item.split('=')).reduce((acc, [k, v]) => (acc[k.trim().replace('"', '')] =v) && acc, {})

17、清除所有 cookie

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

18、将 URL 参数转换为对象

const getUrlParams = (query) =>Array.from(new URLSearchParams(query)).reduce((p, [k, v]) => Object.assign({}, p, { [k]: p[k] ? (Array.isArray(p[k]) ? p[k] : [p[k]]).concat(v) : v }),{});

19、将数组转为对象

const arrayToObject = (arr, key) => arr.reduce((a, b) => ({ ...a, [b[key]]: b }), {});

20、将数组按照属性计数

const countBy = (arr, prop) => arr.reduce((prev, curr) => ((prev[curr[prop]] = ++prev[curr[prop]] || 1), prev), {} );

21、判断数组是否不为空

const arrayIsNotEmpty = (arr) => Array.isArray(arr) && Object.keys(arr).length > 0;

22、展开多维数组

const flat_entries = arr => [].concat(...arr); 

23、从对象数组中提取属性值

const pluck = (objs, property) => objs.map((obj) => obj[property]);

24、反转对象的 key value

const invert = (obj) => Object.keys(obj).reduce((res, k) => Object.assign(res, { [obj[k]]: k }), {});

25、从对象中删除值为 null 和 undefined 的属性

const removeNullAndUndefined = (obj) => 
Object.entries(obj) 
.reduce((a, [k, v]) => (v == null ? a : ((a[k] = v), a)), {});

26、按照对象的属性对对象排序

const sort = (obj) => Object.keys(obj) .sort() .reduce((p, c) => ((p[c] = obj[c]), p), {});

27、检测对象是否为 Promise

const isPromise = (obj) => 
!!obj && (typeof obj === 'object' || typeof obj === 'function') && typeof obj.then === 'function';

28、交换两个对象

const exchange = (a, b) => [a, b] = [b, a]

29、检查路径是否是相对路径

const isRelative = (path) => !/^([az]+:)?[\\/]/i.test(path);

30、重复一个字符串

const repeat = (str, numberOfTimes) => str.repeat(numberOfTimes);

31、将字符串的第一个字符变小写

const lowercaseFirst = (str) => `${str.charAt(0).toLowerCase()}${str.slice(1)}`;

32、生成 IP 地址

const randomIp = () => Array(4).fill(0) 
.map((_, i) => Math.floor(Math.random() * 255) + (i === 0 ? 1 : 0) ) 
.join('.');

33、生成十六进制颜色字符串

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

34、下划线转驼峰

const toHump = str => str.replace(/\_(\w)/g, (all, letter) => letter.toUpperCase());

35、驼峰转下划线横线

const toLine = str => str.replace(/([A-Z])/g,"_$1").toLowerCase()

36、检查字符串是否是十六进制颜色

const isHexColor = (color) => /^#([0-9A-F]{3}|[0-9A-F]{4}|[0-9A-F]{6}|[0-9A-F]{8})$/i.test(color);

37、RGB 字符串转十六进制字符串

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

38、检查日期是否有效

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());

未完待续…


http://www.ppmy.cn/news/78508.html

相关文章

第六章 社会主义发展及其规律

一. 单选题&#xff08;共40题&#xff0c;60分&#xff09; 1. (单选题)全部马克思主义学说的核心和理论结论是( ) A. 科学社会主义 2. (单选题)科学社会主义的直接理论来源是( ) C. 19世纪初期以圣西门、傅立叶、欧文为代表的空想社会主义 3. (单选题)社会主义实现…

软考初级程序员上午单选题(13)

1、下列不能兼作输入设备和输出设备的是______。 A&#xff0e;可擦除型光盘 B&#xff0e;软盘 C&#xff0e;硬盘 D&#xff0e;键盘 2、文件型计算机病毒主要感染______。 A&#xff0e;.TXT文件 B&#xff0e;.GIF文件 C&#xff0e;.EXE文件 D&#xff0e;.MP3文件 3、_…

设计模式初探----工厂模式

1、简单工厂模式 概念 主要用于创建对象。用一个工厂来根据输入的条件产生不同的类&#xff0c;然后根据不同类的虚函数得到不同的结果。 应用场景 适用于针对不同情况创建不同类时&#xff0c;只需传入工厂类的参数即可&#xff0c;无需了解具体实现方法。 计算器中对于同…

springboot线程的用法以及配置详解

在 Spring Boot 中使用注解设置多线程&#xff0c;一般需要借助 Async 注解和 ThreadPoolTaskExecutor 类。 首先&#xff0c;需要在 Spring Boot 应用程序的主类上添加 EnableAsync 注解&#xff0c;该注解表示开启异步执行。 java SpringBootApplication EnableAsync publi…

Spring框架

Spring框架 版本历史核心功能模块控制反转容器&#xff08;依赖注入&#xff09;面向切面程序设计数据访问&#xff08;DAO层支持&#xff09;事务管理模型-视图-控制器&#xff08;MVC&#xff09;远程访问“约定大于配置”的快速应用开发 批处理相关链接参考资料 Spring框架…

【Leetcode hot 100】96. 不同的二叉搜索树

题目链接 思路 动态规划 题目是给定一个有序序列1,2,3…n, 我们需要求出一共有多少种构建二叉搜索树的方法。可以这样考虑&#xff1a;对每一个数字i&#xff0c;我们遍历它&#xff0c;以i为根节点&#xff0c;1…(i-1)为左子树&#xff0c;i1…n为右子树&#xff0c;接着我…

LeetCode——矩阵中移动的最大次数

目录 1、题目 2、题目解读 3、代码 1、题目 2684. 矩阵中移动的最大次数 - 力扣&#xff08;Leetcode&#xff09; 给你一个下标从 0 开始、大小为 m x n 的矩阵 grid &#xff0c;矩阵由若干 正 整数组成。 你可以从矩阵第一列中的 任一 单元格出发&#xff0c;按以下方式遍…

【HackTheBox Bagel】打靶记录

一、namp扫描到5000 8000 22 端口 二、访问8000端口&#xff0c;看到跳转到域名bagel.htb&#xff0c;加入到hosts 看到该url 像文件包含&#xff0c;尝试fuzz一波 尝试找公私钥均未果&#xff0c;找到了cmdline 进一步对其包含 HTTP/1.1 200 OK Server: Werkzeug/2.2.2 …