优秀的编程知识分享平台

网站首页 > 技术文章 正文

前端工程师常用的方法_前端工程师应该掌握的技能

nanyue 2025-09-13 06:51:34 技术文章 2 ℃

数组转树型结构

/**
 * 数组转树型结构
 * @param datas // 原始数据
 * @param id // id
 * @param parentKey // 父id 键名
 * @param nameKey // 文本名称键名
*/
export const arrayToTree = (datas = [], id = '', parentKey = 'parentId', nameKey = 'name') => {
  if (!Array.isArray(datas) || !parentKey || !nameKey) return [];
  const result = [];
  for (const item of datas) {
    if (item[parentKey] === id) {
      const obj = {
        ...item,
        key: item.id,
        value: item.id,
        title: item[nameKey],
        children: arrayToTree(datas, item.id, parentKey, nameKey),
      };
      result.push(obj);
    }
  }
  return result;
};

文件流保存为文件

/**
 * 文件流保存为文件
 * @param {*} type 文件类型
 * @param {*} modelName 文件名称
 * @param {*} response 需要保存的文件流
 */
export function downloadFile<T>(type: string, modelName: string, response: T) {
      const eleLink = document.createElement('a');
      if (type !== '') {
        eleLink.download = `${modelName}.${type}`;
      } else {
        eleLink.download = modelName;
      }
      eleLink.style.display = 'none';
      // 字符内容转变成blob地址
      // @ts-ignore
      const blob = new Blob([response]);
      eleLink.href = window.URL.createObjectURL(blob);
      // 自动触发点击
      document.body.appendChild(eleLink);
      eleLink.click();
      // 然后移除
      document.body.removeChild(eleLink);
      window.URL.revokeObjectURL(eleLink.href);
}

滚动到页面顶部

export const goToTop = () =>window.scrollTo(0, 0);

获取路由参数

// 获取路由参数
export const getParamsFromUri = (url: string) => {
  const params = url.replace('?', '&').split('&');
  return params.reduce((prev, item) => {
      const key = item.split('=')[0];
      const value = item.split('=')[1];
      return {
          ...prev,
          [key]: value
      };
  }, {});
}

  const url = window.location.href;
  const { id=''  } = getParamsFromUri(url) ;

Object.is()

Object.is() 是 JavaScript 中用于比较两个值是否相等的函数,它比 == 和 === 更精确。
基本用法

Object.is(value1, value2)

// 正确处理 NaN
Object.is(NaN, NaN)  // true 
// 区分 +0 和 -0
Object.is(+0, -0)    // false 
// 其他值表现与 === 相同
Object.is(5, 5)       // true
Object.is('5', 5)     // false
Object.is(null, undefined) // false

new URLSearchParams()

import { useMemo } from 'react';

/**
 * 自定义Hook,用于获取和处理URL查询参数
 * @returns {Object} 包含获取参数的方法
 */
const useQueryParams = () => {
  // 获取当前位置信息
  const location = window.location;
  
  // 使用useMemo缓存查询参数解析结果,避免每次渲染都解析
  const queryParams = () => {
    return new URLSearchParams(location.search);
  };
  
  /**
   * 获取指定查询参数的值
   * @param {string} key 参数名
   * @param {any} defaultValue 可选,默认值
   * @returns {string|null} 参数值或默认值
   */
  const getParam = (key, defaultValue = null) => {
    return queryParams.get(key) || defaultValue;
  };
  
  /**
   * 获取指定查询参数的所有值(适用于多值参数)
   * @param {string} key 参数名
   * @returns {string[]} 参数值数组
   */
  const getAllParams = (key) => {
    return queryParams.getAll(key);
  };
  
  /**
   * 将所有查询参数转换为对象
   * @returns {Object} 包含所有查询参数的对象
   */
  const toObject = () => {
    const params = {};
    queryParams.forEach((value, key) => {
      // 处理多值参数
      const values = queryParams.getAll(key);
      params[key] = values.length > 1 ? values : values[0];
    });
    return params;
  };
  
  /**
   * 检查是否存在指定参数
   * @param {string} key 参数名
   * @returns {boolean} 是否存在
   */
  const hasParam = (key) => {
    return queryParams.has(key);
  };
  
  return {
    getParam,
    getAllParams,
    toObject,
    hasParam,
    // 暴露原始的URLSearchParams对象,方便进行更复杂的操作
    raw: queryParams
  };
};

export default useQueryParams;

手机号脱敏

export const hideMobile = (mobile) => {    return mobile.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2")}

大小写转换

export const turnCase = (str, type) => {
  switch (type) {
    case 1:
      return str.toUpperCase()
    case 2:
      return str.toLowerCase()
    case 3:
      //return str[0].toUpperCase() + str.substr(1).toLowerCase() // substr 已不推荐使用
      return str[0].toUpperCase() + str.substring(1).toLowerCase()
    default:
      return str
  }
}

校验数据类型

export const typeOf = function(obj) {
    return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()
}

Tags:

最近发表
标签列表