6个提效开发的JavaScript杀手函数

　　1。校验一个元素是否在可视区域内
　　网页开发时，常常需要了解某个元素是否进入了视口（viewport），即用户能不能看到它。可以使用IntersectionObserver这个API。constcallback（entries）｛entries。forEach（（entry）｛if（entry。isIntersecting）｛entry。target是dom元素console。log（｛entry。target。id｝isvisible）；｝｝）；｝；constoptions｛threshold：1。0，｝；constobservernewIntersectionObserver（callback，options）；constbtndocument。getElementById（btn）；constbottomBtndocument。getElementById（bottombtn）；observer。observe（btn）；observer。observe（bottomBtn）；复制代码
　　options参数能自定义Observer的行为。threshold属性一般用的比较多，它定义的是Observer触发时，需要出现在可视区域中元素的可见百分比。2。识别设备
　　我们通常使用window。navigator。userAgent获取当前设备的细节来进行识别。onstdetectDeviceType（）AndroidwebOSiPhoneiPadiPodBlackBerryIEMobileOperaMinii。test（navigator。userAgent）？Mobile：Desktop；console。log（detectDeviceType（））；复制代码3。隐藏元素
　　CSS隐藏元素通常有两种方法：可以使用style。visibility切换元素的可见性。如果想从整个渲染流中移除该元素，使用style。display属性。consthideElement（element，removeFromFlowfalse）｛removeFromFlow？（element。style。displaynone）：（element。style。visibilityhidden）；｝；复制代码
　　如果不从渲染流中移除元素，只是隐藏可见性，元素仍然会被绘制，且占用视图空间。
　　当渲染长列表时，配合上方IntersectionObserver这个API，使用style。display属性来隐藏不在可视区域内的元素，能较大提升渲染性能。4。获取URL上的query参数
　　推荐使用URL这个对象，URL接口用于解析，构造，规范化和编码URLs，用它可以很方便的获取链接上的query参数。consturlnewURL（window。location。href）；constparamValueurl。searchParams。get（paramName）；console。log（paramValue）；复制代码5。简单的深拷贝
　　利用JSON方法先转化成string再转换为对象constdeepCopy（obj）JSON。parse（JSON。stringify（obj））；复制代码6。wait方法
　　虽然我们有setTimeout方法来实现等待并异步执行，但是该方法不会返回Promise，如果用在async函数中不是很方便，因此，我们可以自己实现一个wait方法。constwait（ms）newPromise（（resolve）setTimeout（resolve，ms））；constasyncFuncasync（）｛awaitwait（1000）；console。log（async）；｝；asyncFunc（）；