数组转树型结构
/**
* 数组转树型结构
* @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()
}