工作中常用js功能汇总

在工作中，我们经常会使用一些常用的 JavaScript 功能来实现不同的需求。本文将详细讲解一些常用的 JavaScript 功能，包括事件监听、DOM 操作、异步请求、正则表达式、日期时间操作等。

事件监听

事件监听是将 JavaScript 代码与 HTML 元素的交互相连的主要方式。添加事件监听器的方法是使用 addEventListener() 方法。示例代码如下：

const button = document.querySelector('.button');

button.addEventListener('click', function() {
  alert('按钮被点击了！');
});

上述示例代码将点击事件添加到具有“button”类的元素。当按钮被点击时，将弹出一个带有消息“按钮被点击了！”的警告框。

DOM 操作

DOM 操作是在 HTML 页面中动态地添加、删除、修改元素和内容的过程。下面是示例代码，展示如何使用 JavaScript 来添加 HTML 元素：

const parent = document.querySelector('.parent');
const newElement = document.createElement('h2');
newElement.textContent = '这是新添加的标题！';

parent.appendChild(newElement);

上述示例代码首先选中具有“parent”类的元素，然后在该元素内部使用 createElement() 方法创建一个新元素。设置新元素的文本内容后，使用 appendChild() 方法将新元素添加到 parent 元素最后面。

异步请求

在 Web 开发中，一些操作需要与后端进行通信，例如从数据库中读取数据或将数据写入数据库。这通常使用异步请求来实现。以下是使用 Fetch API 发起异步请求的示例代码：

fetch('https://example.com/api/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

上述示例代码使用 fetch() 方法获取 https://example.com/api/data 的 JSON 数据。一旦请求完成，JSON 数据将通过 .then() 方法中传递的 response.json() 方法处理并返回。如果在请求过程中出现任何错误，则通过 .catch() 方法中的代码进行处理。

正则表达式

正则表达式是一种通用且强大的文本匹配工具，可以用于搜索和操作文本字符串。以下是使用正则表达式验证电子邮件地址是否有效的示例代码：

const email = '[e-mail]';
const emailRegEx = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;

if (emailRegEx.test(email)) {
  console.log('有效的电子邮件地址！');
} else {
  console.log('无效的电子邮件地址。');
}

上述示例代码使用正则表达式 emailRegEx 验证 email 是否为有效的电子邮件地址。

日期时间操作

JavaScript 使用 Date 对象处理日期和时间。下面是一些常用的 Date 对象操作：

const now = new Date();

console.log(now.getFullYear()); // 获取年份
console.log(now.getMonth()); // 获取月份（0-11，0 代表一月）
console.log(now.getDate()); // 获取日期
console.log(now.getDay()); // 获取星期（0-6，0 代表星期天）
console.log(now.getHours()); // 获取小时
console.log(now.getMinutes()); // 获取分钟
console.log(now.getSeconds()); // 获取秒钟

上述示例代码使用 Date 对象获取当前日期和时间，然后使用各种方法提取年份、月份、日期、星期、小时、分钟和秒钟。

希望这篇文章可以帮助你了解工作中常用 JavaScript 功能的使用。