10 个实用的 JavaScript 实用函数

嘿！👋

今天，我们将介绍 JavaScript 中的 10 个自定义实用函数，它们在大多数项目中都很有用。

01. `console.log()`

是的，我们都喜欢并使用该工具进行打印、调试等。那么，为什么不缩短它以减少打字并节省一些时间呢？

const { log } = console;

log("Hello world!");
// Expected output: Hello world!

// SAME AS //

console.log("Hello world!");
// Expected output: Hello world!

解释：我们使用解构赋值来log从中提取方法console。

02. `querySelector()`

使用 JavaScript 时，你可能听说过“DOM 操作”这个术语，并使用过getElementById()、querySelector()以及其他方法来访问 DOM 元素。所以，让我们让它更容易使用。

const select = (selector, scope = document) => {
  return scope.querySelector(selector);
};

const title = select("h1");
const className = select(".class");
const message = select("#message", formElem);

// SAME AS //

const title = document.querySelector("h1");
const className = document.querySelector(".class");
const message = formElem.querySelector("#message");

说明：我们在select()函数中传递了 2 个参数：

第一：要选择的DOM元素
第二：访问该元素的范围（默认值 = document）；

03. `addEventListener()`

处理click、mousemove等事件大多都是用该addEventListener()方法来实现的。

const listen = (target, event, callback, ...options) => {
  return target.addEventListener(event, callback, ...options);
};

listen(buttonElem, "click", () => console.log("Clicked!"));

listen(document, "mouseover", () => console.log("Mouse over!"));

listen(formElem, "submit", () => {
    console.log("Form submitted!");
  }, { once: true }
);

说明：我们在listen()函数中传递了 4 个参数：

第一：您想要定位的元素（例如“窗口”、“文档”或特定的 DOM 元素）
第二：事件类型（例如“点击”、“提交”、“DOMContentLoaded”等）
第三：回调函数
第四步：剩余的可选选项（例如“capture”、“once”等）。此外，我们使用扩展语法来允许其他选项（如有需要）。否则，可以像addEventListener方法中一样省略。

04. `random()`

您可能知道Math.random()生成从 0 到 1 的随机数的函数。您可能还知道其他技巧，例如Math.random() * 10，它现在应该可以生成从 0 到 10 的随机数。但是，问题是，尽管知道限制，但我们对最小值没有太多的控制权。

const random = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

random(5, 10);
// 7

解释：这是MDN Docs提供的更好的解释

05. `times()`

有时，我们经常发现自己需要多次运行某个特定的功能。

当然，我们可以setInterval()像这样每隔一段时间运行一次：

setInterval(() => {
  randomFunction();
}, 5000); // runs every 5 seconds

问题是我们无法指定要运行多少次。所以，让我们来解决这个问题！

const times = (func, n) => {
  Array.from(Array(n)).forEach(() => {
    func();
  });
};

times(() => {
  randomFunction();
}, 3); // runs 3 times

解释：

Array(n)- 创建一个长度为的新数组n。

Array(5); // => [,,]

Array.from()- 从创建一个浅拷贝Array(n)。它帮助我们使数组可用，并用“undefined”填充它。您也可以使用Array.prototype.fill()方法来达到同样的效果。

Array.from(Array(3)); // => [undefined,undefined,undefined]

注意：在研究这个实用函数时，我发现有些程序员喜欢n先放参数，然后再放函数times(n, func)。但是，这看起来有点奇怪，所以我决定交换它们的位置，从而使语法更类似于setInterval()函数：

setInterval(func, delay);

times(func, n);

此外，您可以根据自己的喜好调用它setTimes()来times()匹配setInterval()和setTimeout()方法。

06. `slugify()`

您是否曾经发现自己需要将博客文章的标题转换为“类似 URL”的格式？

JS Utility Functions => js-utility-functions

下面是实现这一目的的一个小实用函数：

const slugify = (string, separator = "-") => {
  return string
    .toString() // Cast to string (optional)
    .toLowerCase() // Convert the string to lowercase letters
    .trim() // Remove whitespace from both sides of a string (optional)
    .replace(/\s+/g, separator) // Replace spaces with -
    .replace(/[^\w\-]+/g, "") // Remove all non-word chars
    .replace(/\_/g, separator) // Replace _ with -
    .replace(/\-\-+/g, separator) // Replace multiple - with single -
    .replace(/\-$/g, ""); // Remove trailing -
};

slugify("Hello, World!");
// Expected output: "hello-world"

slugify("Hello, Universe!", "_");
// Expected output: "hello_universe"

说明：这是GitHub 社区的讨论

07. `validateEmail()`

在进行小型项目并尝试为表单添加电子邮件验证功能时，您可以使用这个超级简单的方法来实现目标。此外，它对于小型测试也非常方便。

const validateEmail = (email) => {
  const regex = /^\S+@\S+\.\S+$/;
  return regex.test(email);
};

validateEmail("youremail@org.com"); // true
validateEmail("youremail@com"); // false
validateEmail("youremail.org@com"); // false

说明：您可以在这里使用正则表达式。

RegExp.test()搜索提供的正则表达式是否与字符串匹配

注意：对于较大的项目，我建议使用像validator.js这样的库来为您处理繁重的工作。

08. `capitalize()`

JavaScript内置了toUpperCase()和toLowerCase()方法。然而，我们并没有内置对大写字母的支持。所以，让我们自己创建一个吧！

const capitalize = (str) => {
  const arr = str.trim().toLowerCase().split(" ");

  for (let i = 0; i < arr.length; i++) {
    arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
  }

  return arr.join(" ");
};

capitalize("hello, world!");
// Expected output: "Hello, World!"

解释：

split()- 将字符串转换为数组
arr[i].charAt(0).toUpperCase()- 将每个单词的首字母大写
arr[i].slice(1)- 返回剩余的单词字母。
arr.join(" ")- 将数组转回字符串

09. `sanitizeHTML()`

听说过跨站脚本 (XSS) 攻击吗？如果没有，这是一种在大多数网站上都会发生的攻击类型。例如，在提交表单时，攻击者可能会尝试发送恶意脚本来入侵系统。为了防止这种情况发生在您的表单上，您可以使用这个便捷的功能来“净化”脚本代码。

const sanitizeHTML = (str) => {
  const div = document.createElement("div");
  div.textContent = str;
  return div.innerHTML;
};

sanitizeHTML("<h1>Hello, World!</h1>");
// Expected output: "&lt;h1&gt;Hello, World!&lt;/h1&gt;"

说明：与不同innerHTML，textContent不会将字符串解析为 HTML，而innerText仅显示“人类可读”的元素。

此外，使用textContent可以防止 XSS 攻击。 - MDN Docs

10. `localStorage`

localStorage您可能在待办事项列表应用程序或其他项目中使用过将特定数据保存在用户计算机内存中的方法。获取和设置项目时，您必须使用 JSONparse()和stringify()方法来实现所需的结果。因此，让我们更轻松地使用它们。

const storage = {
  get: (key, defaultValue = null) => {
    const value = localStorage.getItem(key);
    return value ? JSON.parse(value) : defaultValue;
  },
  set: (key, value) => localStorage.setItem(key, JSON.stringify(value)),
  remove: (key) => localStorage.removeItem(key),
  clear: () => localStorage.clear(),
};

storage.set("motto", "Eat, Sleep, Code, Repeat");
storage.get("motto");

说明：如果您不了解 JSONparse()和stringify()方法，请查看MDN 文档以获得更好的解释。

注意：我很难想出一个比更有意义的好名字storage。因为乍一看，开发人员可能不知道它指的是“localStorage”还是其他什么。不过，你可以随意命名。另外，如果你找到了任何好的名字，请在评论区告诉我。

资源

结论

如果您有任何问题或建议，欢迎在评论区留言。我们可能会根据您的建议制作本文的第二部分。

谢谢阅读！🙂

🔝 返回顶部

鏂囩珷鏉ユ簮锛�https://dev.to/technoph1le/10-helpful-javascript-utility-functions-35oc

10 个实用的 JavaScript 实用函数

10 个实用的 JavaScript 实用函数

目录

01. `console.log()`

02. `querySelector()`

03. `addEventListener()`

04. `random()`

05. `times()`

06. `slugify()`

07. `validateEmail()`

08. `capitalize()`

09. `sanitizeHTML()`

10. `localStorage`

资源

结论