23个常见的 JavaScript 函数

开发 前端
本文收集了23个日常开发中非常常用的功能,其中一些可能很复杂,另一些可能很简单,但我相信它们都会或多或少对每个人都有帮助。

1、生成随机颜色

当网站需要生成随机颜色时,我们可以通过以下代码来执行此操作。

2、数组重新排序

对数组元素重新排序是一个非常重要的技巧,但它在原生数组中不可用。

3、复制到剪贴板

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

4、检测深色主题

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

5、滚动到顶部

将元素滚动到顶部的最简单方法是使用 scrollIntoView。设置块开始滚动到顶部;将行为设置为平滑以启用平滑滚动。

6、滚动到底部

就像滚动到顶部一样,滚动到底部只是将块设置为结束。

7、检测元素是否在屏幕上

检查元素是否在窗口中的最佳方法是使用 IntersectionObserver。

8、检测设备

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

9、隐藏元素

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

10、从 URL 获取参数

JavaScript中有一个URL对象,可以很方便的获取URL中的参数。

11、深拷贝对象

深度复制对象非常简单。首先,将对象转换为字符串,然后将其转换为对象。

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

12、等待功能

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

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

14、检查对象中是否存在属性

15、使用动态键破坏对象

16、循环访问对象以访问键和值

17、防止在使用可选链(?.)访问对象中不存在的任何键时抛出错误

警告⚠️:当你不确定他们的属性是否存在或不在数据中时使用可选链接。如果您确定密钥必须传入数据,并且如果没有出现,那么,最好是抛出错误而不是阻止它们。

18、检查数组中的 falsy值

19、删除数组中的重复值

20、校验值是数组类型

21、字符串到数字和数字到字符串的转换使用'+'操作符

22、当值为 null 且 undefined 时,使用空值合并 (??) 运算符有条件地分配其他值

将与 OR (||) 运算符混淆??

如果值不真实(0,'',null,undefined,false,NaN),当您想要有条件地分配其他值时使用 OR 运算符。

23、使用 !! 进行布尔转换操作符

写在最后

以上就是我今天与你分享的全部内容,如果你觉得有用的话,请记得点赞我,关注我,并将它分享给你身边的朋友,也许能够帮助到他。

最后,谢谢你的阅读,祝编程愉快!

责任编辑:庞桂玉 来源: web前端开发
相关推荐

2021-09-08 08:55:45

Javascript 高阶函数前端

2021-10-09 07:10:30

JavaScriptBigIn函数

2021-12-30 21:51:10

JavaScript开发内存

2021-06-16 15:04:06

JavaScript内存开发

2022-11-25 14:55:43

JavaScriptweb应用程序

2019-11-01 15:33:00

JavaScript面试开发

2020-05-21 18:38:49

JavaScript前端技术

2023-12-26 14:28:08

JavaScript开发

2015-04-08 10:27:43

JavaScript字符串操作函数

2009-03-13 09:39:34

JavaScript函数调用规则

2017-12-06 08:14:25

JavaScripBUG修复

2009-07-10 11:02:17

WebWork参数配置

2013-09-29 10:41:28

JavascriptJSFirefox 23

2020-07-30 08:27:33

Javascript闭包变量

2023-10-09 22:30:58

Python函数

2023-09-17 23:32:03

内置函数编程Python

2023-05-18 15:34:52

JavaScript开发前端

2015-05-25 15:06:28

JavaScript函数式编程

2023-06-13 15:15:02

JavaScript前端编程语言

2020-05-13 21:09:10

JavaScript前端技术
点赞
收藏

51CTO技术栈公众号