JavaScript常用工具方法封装

这里是关于“JavaScript常用工具方法封装”的攻略。

基础概念

工具方法

通常所说的工具方法，是指编写的一些辅助性函数或类，用来完成一些具有通用性的操作，比如数据转换、日期格式化、字符串截断等等。

封装方法

封装方法是将一段通用的代码进行抽象，使代码可以在各种场景中共享，提高代码复用性。在 JavaScript 中，我们可以通过函数来封装代码。

常用工具方法

下面是一些常用的 JavaScript 工具方法：

• Array.from：将一个类数组对象或可迭代对象转换成一个新的数组实例；
• Array.isArray：用来判断一个变量是否是数组类型；
• Object.assign：用来合并多个对象的属性，将属性复制到目标对象；
• Object.keys：用来获取一个对象自身可枚举的属性名称列表；
• Object.prototype.toString：用于获取一个变量的数据类型信息；
• JSON.stringify 和 JSON.parse：用于将 JSON 字符串和 JavaScript 对象之间进行相互转换。

工具方法封装实例

示例一：时间戳格式转换

在 Web 开发中，经常需要将时间戳转换为特定的时间格式，下面是一个封装这个功能的例子：

/**
 * 时间戳格式化函数
 *
 * @param {number} timestamp - 时间戳
 * @param {string} format - 时间格式
 * @returns {string} - 格式化后的时间字符串
 */
function formatDate(timestamp, format) {
  const date = new Date(timestamp);
  const map = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds(),
    'q+': Math.floor((date.getMonth() + 3) / 3),
    'S': date.getMilliseconds()
  };
  if (/(y+)/i.test(format)) {
    format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  Object.keys(map).forEach(key => {
    if (new RegExp(`(${key})`).test(format)) {
      format = format.replace(RegExp.$1, RegExp.$1.length === 1 ? map[key] : ('00' + map[key]).substr(('' + map[key]).length));
    }
  });
  return format;
}

这个函数主要是将时间戳转换成指定格式的时间字符串，接收两个参数：timestamp 表示时间戳，format 表示时间格式，格式化后返回一个字符串。具体使用可以这样：

const timestamp = 1612742800000;
const format = 'yyyy-MM-dd hh:mm:ss';
const formatted = formatDate(timestamp, format);
console.log(formatted); // 输出：2021-02-08 00:00:00

示例二：数字格式化输出

在 Web 开发中，经常需要对数字进行格式化输出，下面是一个封装这个功能的例子：

/**
 * 格式化数字
 *
 * @param {number} number - 要格式化的数字
 * @param {number} decimals - 小数点保留位数
 * @param {string} thousandSeparator - 千位分割符
 * @param {string} decimalSeparator - 小数点分割符
 * @returns {string} - 格式化后的数字字符串
 */
function formatNumber(number, decimals = 2, thousandSeparator = ',', decimalSeparator = '.') {
  number = Number(number || 0).toFixed(decimals);
  const parts = number.split('.');
  let integerPart = parts[0].toString();
  let fractionPart = parts[1] ? decimalSeparator + parts[1].toString() : '';
  integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, thousandSeparator);
  return integerPart + fractionPart;
}

这个函数主要是将数字转换成指定的格式化字符串，接收四个参数：number 表示要格式化的数字，decimals 表示小数点保留位数，默认值为 2，thousandSeparator 表示千位分割符，默认值为 ','，decimalSeparator 表示小数点分割符，默认值为 '.'。具体使用可以这样：

const number = 1234567.891;
const formatted = formatNumber(number, 2, ',', '.');
console.log(formatted); // 输出：1,234,567.89