前端开发中常用的函数封装

1. 树形结构的处理

• 代码的实现

  /**
   * @description 数据的处理
   * @param   {Array} arr    原数组
   * @returns {Array} result tree结构
   */
  function convert(arr) {
          const nodeParent = new Map();
          const result = [];
  
          // 构建映射关系
          arr.forEach(node => {
                  node.children = [];
                  nodeParent.set(node.id, node)
          })
  
  
          // 构建树形结构
          arr.forEach(node => {
                  const parentId = node.parentId;
                  const parentNode = nodeParent.get(parentId);
                  if (parentNode) {
                          parentNode.children.push(node);
                  } else {
                          result.push(node);
                  }
          })
          return result
  }
  
  

• 函数的使用

    const arr = [
      { id: 1, name: "部门A", parentId: 0 },
      { id: 2, name: "部门B", parentId: 1 },
      { id: 3, name: "部门C", parentId: 1 },
      { id: 4, name: "部门D", parentId: 2 },
      { id: 5, name: "部门E", parentId: 2 },
      { id: 6, name: "部门F", parentId: 3 },
      { id: 7, name: "部门G", parentId: 0 },
    ];
    console.log(convert(arr));
  

  

2. 格式化时间戳

• 代码的实现

  /**
   *@description  格式化时间戳
   * @param {String} format  YYYY-MM-DD hh:mm:ss
   * @param {String} daytime 时间戳，单位为毫秒
   * @returns 返回格式化后的时间字符串
   */
  
  function formatTime(daytime, format = "YYYY-MM-DD hh:mm:ss") {
    const date = new Date(daytime);
    const year = date.getFullYear();
    const month = ("0" + (date.getMonth() + 1)).slice(-2);
    const day = ("0" + date.getDate()).slice(-2);
    const hours = ("0" + date.getHours()).slice(-2);
    const minutes = ("0" + date.getMinutes()).slice(-2);
    const seconds = ("0" + date.getSeconds()).slice(-2);
    const map = {
      YYYY: String(year),
      MM: month,
      DD: day,
      hh: hours,
      mm: minutes,
      ss: seconds,
    };
  
    return format.replace(/YYYY|MM|DD|hh|mm|ss/g, (matched) => map[matched]);
  }
  

• 函数的使用

  let data = new Date();
  console.log(formatTime(data));  //2024-01-22 16:02:40
  

3.实现数组深度扁平化

• 代码的实现

  /**
   * @description          实现数组深度扁平化
   * @param {Array}    arr 嵌套数组
   * @returns {Array}      扁平化数组
   */
  function deepFlatten(arr) {
    let flattened = [];
  
    for (let i = 0; i < arr.length; i++) {
      if (Array.isArray(arr[i])) {
        // 递归调用deepFlatten函数处理嵌套的数组
        flattened = flattened.concat(deepFlatten(arr[i]));
      } else {
        flattened.push(arr[i]);
      }
    }
    return flattened;
  }
  

• 函数的使用

  const nestedArray = [1, [2, [3, 4], 5], 6, [7, 8]];
  const flattenedArray = deepFlatten(nestedArray);
  console.log(flattenedArray); //[1, 2, 3, 4, 5, 6, 7, 8];
  

4. 阿拉伯数字转中文大写数字

• 代码的实现

  /**
   * @description 阿拉伯数字转中文大写数字
   * @param {Number} num 阿拉伯数组
   * @returns 大写数字
   */
  
  const numberToChinese = function (num) {
    let letter = new Array("零","一","二","三","四","五","六","七","八","九","十");
    let position = new Array("", "十", "百", "仟", "萬", "億", "点", "");
    let newNum = ("" + num).replace(/(^0*)/g, "").split(".");
    let count = 0;
    let res = "";
  
    for (let i = newNum[0].length - 1; i >= 0; i--) {
      switch (count) {
        case 0:
          res = position[7] + res;
          break;
        case 4:
          if (
            !new RegExp("0{4}//d{" + (newNum[0].length - i - 1) + "}$").test(
              newNum[0]
            )
          ) {
            res = position[4] + res;
          }
          break;
        case 8:
          res = position[5] + res;
          position[7] = position[5];
          count = 0;
          break;
      }
      if (
        count % 4 === 2 &&
        newNum[0].charAt(i + 2) !== 0 &&
        newNum[0].charAt(i + 1) === 0
      ) {
        res = letter[0] + res;
      }
      if (newNum[0].charAt(i) !== 0) {
        res = letter[newNum[0].charAt(i)] + position[count % 4] + res;
      }
      count++;
    }
  
    if (newNum.length > 1) {
      // 加上小数部分(如果有小数部分)
      res += position[6];
      for (let i = 0; i < newNum[1].length; i++) {
        res += letter[newNum[1].charAt(i)];
      }
    }
  
    if (res === "一十") {
      res = "十";
    }
  
    if (res.match(/^一/) && res.length === 3) {
      res = res.replace("一", "");
    }
    
    return res;
  };
  
  

• 函数的使用

  numberToChinese(2024) // 二仟零百二十四
  

5. 字符串大小写转换

• 代码的实现

  /**
   * @description           字符串大小写转换
   * @param {String} str    字符串内容
   * @param {Number} type   字符串类型
   *                        1:首字母大写  2：首页母小写  3：大小写转换  4：全部大写  5：全部小写
   * @returns
   */
  const changeCase = function (str, type) {
    type = type || 4;
    switch (type) {
      case 1:
        return str.replace(/\b\w+\b/g, function (word) {
          return (
            word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase()
          );
        });
      case 2:
        return str.replace(/\b\w+\b/g, function (word) {
          return (
            word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase()
          );
        });
      case 3:
        return str
          .split("")
          .map(function (word) {
            if (/[a-z]/.test(word)) {
              return word.toUpperCase();
            } else {
              return word.toLowerCase();
            }
          })
          .join("");
      case 4:
        return str.toUpperCase();
      case 5:
        return str.toLowerCase();
      default:
        return str;
    }
  };
  

• 函数的使用

  changeCase("test", 4) //TEST