8 种酷炫JavaScript 技巧

1.检查元素是否在屏幕可见区域内

我们如何获得元素的点击率？

主要取决于用户点击元素的次数和元素在页面上显示的次数。

我们可以很容易地获取到用户的点击次数，但是如何获取一个元素的显示次数呢？

我们可以通过IntersectionObserver轻松实现，大家可以点击codepen体验一下实际效果。

但这非常麻烦，因为我们必须下载整个库才能使用 cloneDeep。

幸运的是，在大多数情况下，我们可以使用这两种更简单的方式来深拷贝一个对象。

深度克隆1

是的，我相信你已经看到了，deepClone1 有一些缺陷，它不能复制函数、正则表达式、未定义等值。

深度克隆2

另一种方法是使用 structuredClone。

这非常方便，我们甚至可以不做任何处理就可以深拷贝一个对象。

它甚至可以复制正则表达式和未定义的。

但是真的没有缺点吗？ 它在某些情况下也无法正常工作。

• 它不能复制功能

• 它不复制dom元素

• ETC。

3.获取浏览器名称

在前端监控系统中，需要获取用户出错的浏览器。

这是获取主要浏览器名称的通用函数。

4.获取随机颜色

我怎样才能得到一个随机的有效颜色？

大家可以点击codepen链接体验实际效果。

演示地址：https://code.juejin.cn/pen/7259289776530915385

5.复制内容到剪贴板

为了给我们的网站用户提供更好的交互体验，我们经常需要提供将内容复制到剪贴板的功能。

难以置信的是，我们竟然只需要6行代码就可以实现这个功能。

演示地址：https://code.juejin.cn/pen/7259288042232840248

6.从搜索中获取查询字符串

使用 URLSearchParams 解析搜索数据变得非常容易。

7.将元素滚动到页面顶部

我们可以使用 scrollIntoView 方法将元素滚动到页面顶部。甚至它可以提供非常流畅的用户体验。

8.将元素滚动到页面底部

将元素滚动到顶部是如此简单。

那我们要如何将元素滚动到页面底部？我想你已经猜到了，设置block结束即可。

演示地址：https://code.juejin.cn/pen/7259278531174072379