这6个JavaScript 函数你一定要了解一下

翻译

wx6332e0803afcf 2022-11-08 19:17:21

文章标签 javascript json 深度复制 文章分类 PHP 后端开发

这6个JavaScript 函数你一定要了解一下_深度复制

英文 | https://tapajyoti-bose.medium.com/6-killer-utility-functions-in-javascript-86d52af43cd3

翻译 | web前端开发（ID：web_qdkf)

JavaScript是 Web 开发最重要的技术之一，因此，掌握JavaScript技术就显得非常重要，在今天的文章中，我主要跟大家分享6个JavaScript函数，希望对你有所帮助。

那么，我们现在开始吧。

1.判断元素是否在视口中可见

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);

您可以使用 option 参数自定义观察者的行为。threshold 是最有用的属性，它定义了需要在视口中可见以供观察者触发的元素的百分比。

2.检测设备

您可以使用 navigator.userAgent 获得细微的见解并检测运行应用程序的设备。

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

3.隐藏元素

您可以使用 style.visibility 属性切换元素的可见性，如果您想将其从渲染流中移除，可以使用 style.display 属性。

const hideElement = (element, removeFromFlow = false) => {
  removeFromFlow
    ? (element.style.display = "none")
    : (element.style.visibility = "hidden");
};

如果你不从渲染流中移除一个元素，它将被隐藏，但它的空间仍然会被占用。它在渲染长列表元素时非常有用，可以隐藏不在视图中的元素（可以使用 IntersectionObserver 进行测试）以提供性能提升。

4.从URL获取参数

JavaScript 使用 URL 对象使从任何地址获取参数就像在公园里散步一样。

const url = new URL(window.location.href);
const paramValue = url.searchParams.get("paramName");
console.log(paramValue);

5. 深度复制对象

您可以通过将任何对象转换为字符串并返回对象来进行深度复制。

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

6.wait 功能

JavaScript 确实附带了一个 setTimeout 函数，但它不返回 Promise 对象，因此很难在异步函数中使用。所以我们必须编写自己的wait/sleep函数。

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const asyncFunc = async () => {
  await wait(1000);
  console.log("async");
};
asyncFunc();

总结

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

最后，感谢你的阅读，祝编程愉快！

这6个JavaScript 函数你一定要了解一下_深度复制_02