一些零碎的前端知识点（持续更新）

记录一些常用JavaScript代码块

复制内容到剪贴板

/**
 *  网页端复制到剪贴板
 * @param {String} text 需要复制的字符串
 */
function copyTextToClipboard(text) {
  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard.writeText(text)
      .then(() => {
        console.log('Text copied to clipboard');
      })
      .catch((error) => {
        console.error('Error copying text: ', error);
      });
  } else {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    textarea.style.position = 'fixed';  // 确保在页面上不可见
    document.body.appendChild(textarea);
    textarea.select();
  
    try {
      const successful = document.execCommand('copy');
      const message = successful ? 'Text copied to clipboard' : 'Copying text failed';
      console.log(message);
    } catch (error) {
      console.error('Error copying text: ', error);
    }
  
    document.body.removeChild(textarea);
  }
}

Js原生实现日期格式化（支持自定义日期格式、使用ES2017新特性）

/**
   * 根据指定格式格式化给定日期。
   *
   * @param {Date} date - 要格式化的日期。
   * @param {string} format - 指定的格式字符串。
   * @return {string} 格式化后的日期字符串。
   */
  formatDate(date, format) {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();

    const tokens = {
      YYYY: year.toString(),
      MM: month.toString().padStart(2, "0"),
      M: month.toString(),
      DD: day.toString().padStart(2, "0"),
      D: day.toString(),
      HH: hours.toString().padStart(2, "0"),
      H: hours.toString(),
      mm: minutes.toString().padStart(2, "0"),
      m: minutes.toString(),
      ss: seconds.toString().padStart(2, "0"),
      s: seconds.toString(),
    };

    return format.replace(/YYYY|MM|M|DD|D|HH|H|mm|m|ss|s/g, (match) => {
      return tokens[match];
    })
  }

Js实现四舍五入，保留2为小数

  // 四舍五入保留两位小数
  roundToTwoDigits(num) {
    return Number((Math.round(num * 100) / 100).toFixed(2));
  }
  
  // 测试
  roundToTwoDigits(3.1415926) // 输出 3.14
  roundToTwoDigits(5.9999) // 输出 6
  roundToTwoDigits(8) // 输出 6

检查一个字符串是否包含给定的多个子字符串之一

    function containsAny(str, substrings) {
      const regex = new RegExp(substrings.join('|'), 'i');
      return regex.test(str);
    }

    const text = 'This is a sample text.';
    const searchStrings = ['sample', 'example', 'test'];

    const result = containsAny(text, searchStrings);
    console.log(result); // 输出：true
    

Flex实现多列等宽等间隙布局（横向铺满，支持换行）

flex-item的 flex-base 设置公式：flex-basis: calc((100% - (n - 1) * gap) / n);

例如：

使用flex布局，实现4列等宽布局，要求每个元素的上下和左右间距为20px，要求每个元素宽度相同，加上间隙刚好铺满容器宽度。

代码实现：

<div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
    <div class="flex-item">Item 4</div>
    <div class="flex-item">Item 5</div>
</div>

.flex-container {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
}
.flex-item {
   /* flex-basis: calc((100% - (n - 1) \* gap) / n) */
   flex-basis: calc((100% - 60px) / 4); 
}

比较版本号大小

// 比较版本号大小，1表示version1比version2大，-1表示小，0表示相等
function compareVersions(version1, version2) {
  const version1Array = version1.split('.');
  const version2Array = version2.split('.');
  
  for (let i = 0; i < Math.max(version1Array.length, version2Array.length); i++) {
    const num1 = parseInt(version1Array[i] || 0);
    const num2 = parseInt(version2Array[i] || 0);
    if (num1 > num2) {
      return 1;
    } else if (num2 > num1) {
      return -1;
    }
  }
  
  return 0;
}

console.log(compareVersions("1.0.1", "1.0.1")); // 0
console.log(compareVersions("1.0.1", "1.0.0")); // 1
console.log(compareVersions("2.0.1", "1.1.102")); // 1
console.log(compareVersions("1.1.102", "2.0.1")); // -1

日期格式化函数（应用ES2017新特性）

  /**
* 格式化日期对象为指定格式的字符串
* @param {Date} date - 需要格式化的日期对象
* @param {string} format - 用于格式化的字符串，默认为 'yyyy-MM-dd HH:mm:ss'
* @returns {string} 格式化后的日期字符串
*/
  formatTime(date, format = 'YYYY-MM-DD HH:mm:ss') {
    /**
     * 在数字前面补零，以确保其至少具有给定的位数
     * @param {number} num - 需要补零的数字
     * @returns {string} 补零后的数字字符串
     */
    const padZero = (num) => num.toString().padStart(2, '0'); // padStart是ES2017新特性，Node.js 8.0.0 及更高版本支持

    const year = date.getFullYear();
    const month = padZero(date.getMonth() + 1);
    const day = padZero(date.getDate());
    const hour = padZero(date.getHours());
    const minute = padZero(date.getMinutes());
    const second = padZero(date.getSeconds());

    return format
      .replace('YYYY', year)
      .replace('MM', month)
      .replace('DD', day)
      .replace('HH', hour)
      .replace('mm', minute)
      .replace('ss', second);
  }