社区编辑申请
注册/登录
你需要知道的 12 个常用的 JavaScript 函数
开发 前端
本文收集了 12 个在日常开发中非常常用的函数,有些可能很复杂,有些可能很简单,但我相信或多或少会对大家都会有所帮助。

本文收集了 12 个在日常开发中非常常用的函数,有些可能很复杂,有些可能很简单,但我相信或多或少会对大家都会有所帮助。

生成随机颜色

你的网站是否需要生成随机颜色?下面一行代码就可以实现。

const generateRandomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16)}`

console.log(generateRandomHexColor())

数组重排序

对数组的元素进行重新排序是一项非常重要的技巧,但是原生 Array 中并没有这项功能。

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

const arr = [1, 2, 3, 4, 5]
console.log(shuffle(arr))

复制到剪切板

复制到剪切板是一项非常实用且能够提高用户便利性的功能。

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

copyToClipboard("Hello World!")

检测暗色主题

暗色主题日益普及,很多用的都会在设备中启用案模式,我们将应用程序切换到暗色主题可以提高用户体验度。

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

console.log(isDarkMode())

滚动到顶部

将元素滚动到顶部最简单的方法是使用 scrollIntoView。设置 block 为 start 可以滚动到顶部;设置 behavior 为 smooth 可以开启平滑滚动。

const scrollToTop = (element) => 
element.scrollIntoView({ behavior: "smooth", block: "start" });

滚动到底部

与滚动到顶部一样,滚动到底部只需要设置 block 为 end 即可。

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

检测元素是否在屏幕中

检查元素是否在窗口中最好的方法是使用 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);

检测设备

使用 navigator.userAgent 来检测网站运行在哪种平台设备上。

const detectDeviceType = () =>
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent
) ? "Mobile" : "Desktop";

console.log(detectDeviceType());

隐藏元素

我们可以将元素的 style.visibility 设置为 hidden,隐藏元素的可见性,但元素的空间仍然会被占用。如果设置元素的 style.display 为 none,会将元素从渲染流中删除。

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

从 URL 中获取参数

JavaScript 中有一个 URL 对象,通过它可以非常方便的获取 URL 中的参数。

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

深拷贝对象

深拷贝对象非常简单,先将对象转换为字符串,再转换成对象即可。

const deepCopy = obj => JSON.parse(JSON.stringify(obj))

除了利用 JSON 的 API,还有更新的深拷贝对象的 structuredClone API,但并不是在所有的浏览器中都支持。

structuredClone(obj)

等待函数

JavaScript 提供了 setTimeout 函数,但是它并不返回 Promise 对象,所以我们没办法使用 async 作用在这个函数上,但是我们可以封装等待函数。

const wait = (ms) => new Promise((resolve)=> setTimeout(resolve, ms))

const asyncFn = async () => {
await wait(1000)
console.log('等待异步函数执行结束')
}

asyncFn()
责任编辑:赵宁宁 来源: 稀土掘金
相关推荐

2022-05-30 09:44:11

TypeScriptJavaScript技巧

2022-08-09 09:38:29

JavaScript函数

2022-05-18 08:00:26

2020-11-06 08:13:29

2009-09-03 10:08:27

2021-10-09 07:10:30

2009-03-13 09:39:34

JavaScript函数调用规则

2016-10-19 14:35:20

JavaScript函数式编程

2020-10-14 15:15:28

JavaScript(

2012-03-27 10:08:08

JavaScript

2021-09-08 08:55:45

2021-01-29 18:41:16

JavaScript函数语法

2022-07-07 09:47:11

深拷贝浅拷贝Javascript

2010-06-22 13:32:26

函数式编程JavaScript

2020-09-23 16:07:52

JavaScript函数柯里化

2021-04-05 14:48:51

JavaScriptjQuery函数

2009-06-24 15:28:19

arguments对象JavaScript函

2019-08-06 09:00:00

2018-10-10 14:02:39

前端JavaScript函数

2022-08-03 08:03:03

前端APIjavascript

同话题下的热门内容

如何创建一个无代码的自助客户聊天机器人Java 服务 Docker 容器化优秀实践程序员不得不知道的 API 接口常识如何提高 TypeScript 的代码质量?聊聊 13 种锁的实现方式11个 ES2022(ES13)中惊人的 JavaScript 新特性使用 Vite 和 TypeScript 带你从零打造一个属于自己的 Vue3 组件库Hooks时代,如何写出高质量的react和vue组件?

编辑推荐

太厉害了,终于有人能把TCP/IP协议讲的明明白白了!牛人5次面试腾讯不成功的经验HBase原理–所有Region切分的细节都在这里了Javascript如何监听页面刷新和关闭事件如何搭建一个HTTPS服务端
我收藏的内容
点赞
收藏

51CTO技术栈公众号