自从学会这几个写代码的技巧后，摸鱼时间又长了！！！

嘿！👋

今天，我们将介绍 5 个 JavaScript 自定义的实用函数，它们可以在您的大多数项目中派上用场。

目录

• 
  
• 01.console.log()
  
• 02.querySelector()
  
• 03.addEventListener()
  
• 04.random()
  
• 05.times()
  

01.console.log()

在项目的调试阶段，我们都很喜欢用console.log()来打印我们的值、来进行调试。那么，我们可不可以缩短它，以减少我们的拼写方式，并且节省一些时间呢？

//把`log`从`console.log`中解构出来
const { log } = console;

//log等同于console.log

log("Hello world!");
// 输出: Hello world!

// 等同于 //


console.log("Hello world!");
// 输出: Hello world!

说明：

我们使用解构赋值把log从console.log中解构出来

02.querySelector()

在使用 JavaScript 时，当我们对DOM进行操作时经常会使用querySelector()来获取DOM元素，原生的获取DOM的操作过程写起来又长阅读性又差，那我们能不能让他使用起来更加简单，代码看起来更加简洁呢？

//把获取DOM元素的操作封装成一个函数

const select = (selector, scope = document) => {

  return scope.querySelector(selector);

};


//使用

const title = select("h1");

const className = select(".class");

const message = select("#message", formElem);


// 等同于  //


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

};

//监听buttonElem元素点击事件，点击按钮打印Clicked!
listen(buttonElem, "click", () => console.log("Clicked!"));

//监听document的鼠标移上事件，当鼠标移动到document上时打印Mouse over!
listen(document, "mouseover", () => console.log("Mouse over!"));

//监听formElem上的submit事件，当提交时打印Form submitted!
listen(formElem, "submit", () => {
console.log("Form submitted!");

  }, { once: true }

);

说明：

我们在listen()函数需要接收 4 个参数：

• 
  
• 第一个：你要定位的元素（例如“窗口”、“文档”或特定的 DOM 元素）
  
• 第二：事件类型（例如“点击”、“提交”、“DOMContentLoaded”等）
  
• 第三：回调函数
  
• 第 4 个：剩余的可选选项（例如“捕获”、“一次”等）。此外，如有必要，我们使用传播语法来允许其他选项。否则，它可以像在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);
// 5/6/7/8/9/10

这个例子返回了一个在指定值之间的随机数。这个值大于于 min（有可能等于），并且小于（有可能等于）max

05. times()

有时，我们经常会有运行某个特定功能或者函数的需求。应对这种需求，我们可以使用setInterval()每间隔一段时间运行一次：

setInterval(() => {
randomFunction();

}, 5000); // runs every 5 seconds

但是问题是setInterval()是无限循环的，当我们有限定运行次数要求时，我们无法指定它要运行它的次数。所以，让我们来解决它！

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()的功能

写在最后

伙伴们，如果你觉得我写的文章对你有帮助就给zayyo点一个赞👍或者关注➕都是对我最大的支持。当然你也可以加我微信：IsZhangjianhao，邀你进我的前端学习交流群，一起学习前端，成为更优秀的工程