【js】近一年来我封装常用的方法

这是在vue2项目中使用到的，偶尔同一个方法2和3在写法上会有些区别改动，不然就报错

import { downFile, postDownFile} from '@/utils/request'
import { MessageBox } from 'element-ui';/*** 输入框判空* @param {*} str * @returns */
export function getText(str) {return str.replace(/&nbsp;/gi, '')        // 将所有 空格 replace ''.replace(/<[^<br/>]+>/g, '')    // 将所有 换行符 replace ''
}
export function isNull(str) {if (str == '') return truevar regu = '^[ ]+$'var re = new RegExp(regu)return re.test(str)
}/*** 判断是否为中文* @param {*} str * @returns */
export function rulesCN(str) {let reg=/^[\u4E00-\u9FA5]+$/if(reg.test(str)) {// 中文return true}else {return false}
}/*** 判断是否为英文* @param {*} str * @returns */
export function rulesEN(str) {let reg=/[^a-zA-Z]/gif(!reg.test(str)) {// 英文return true}else {return false}
}/*** 去掉空格* @param {*} str * @returns */
export function removeTrim(str) {str = str.replaceAll(' ', '')return str
}/*** 去掉中文和括号（）* @param {*} strValue * @returns */
export function removeChinese(strValue) {  if(strValue!= null && strValue != ""){  var reg = /[\u4e00-\u9fa5]/g;   return strValue.replace(reg, "").replace(/\（|）/g,'')   }  else  return "";  
}/*** 判空* @param {*} val * @returns */
export const isEmpty = (val) => {if(val === '' || val === {} || val === [] || val === null || val === undefined) {return false}else {return true}
}/*** 当前zoom* @returns */
export const zoom = () => {let zoom = document.getElementsByTagName('body')[0].style.zoomreturn zoom
}/*** 设置菜单高亮* @param {class类名} className * @param {菜单路由} path */
export function MenuHighlight(className, path) {let menuItem = document.getElementsByClassName(className)[0].childNodesfor(let i= 0; i< menuItem.length; i++) {if(path.indexOf(menuItem[i].dataset.path) > -1) {menuItem[i].setAttribute('class', 'el-menu-item is-active')}else {menuItem[i].setAttribute('class', 'el-menu-item')}}
}/*** 下载文件* @param {接口地址} url * @param {入参} parameter * @param {文件名} fileName * @returns */
export function downloadFile(url, parameter, fileName) {return downFile(url, parameter).then((data) => {if (!data || data.size === 0) {   // 如果接口没有返回数据，就提示下载失败this.$message.warning('存在异常数据，文件导出失败')return }// window.navigator.msSaveBlob是显示保存按钮if (typeof window.navigator.msSaveBlob !== 'undefined') {window.navigator.msSaveBlob(new Blob([data]), fileName)return } else {let url = window.URL.createObjectURL(new Blob([data]))let link = document.createElement('a')link.style.display = 'none'link.href = urllink.setAttribute('download', fileName)document.body.appendChild(link)link.click()document.body.removeChild(link) // 下载完成移除元素window.URL.revokeObjectURL(url) // 释放掉blob对象return}}).catch(err => {this.$message.error('存在异常数据，文件导出失败')})
}/*** 将树形结构数据转换为级联要求的字段* @param tree* @param map* @returns*/
export const converTree = (tree, map = {label: 'name',value: 'id',children: 'children'
}) => {const result = [];tree.forEach((item) => {let value = item[ map.value ];let label = item[ map.label ];let children = item[ map.children ];if (children) {children = converTree(children, map);}result.push({ value, label, children });})return result
}/*** 将后台数据转换为树形结构* @param pid* @param arr* @returns*/
export const getTrees = (pid, arr) => {return arr.filter((item) => item.parentId === pid).map((item) => {// item.children = getTrees(item.id, arr)let newArr =  getTrees(item.id, arr)if(Array.isArray(newArr ) && newArr.length>0){item.children = newArr}return item})
}/*** 判断是否文本溢出* @param e 事件对象* @returns*/
export const isBeyond = (e) => {const ev = window.event || e;const textRange = (el) => {const textContent = elconst targetW = textContent.getBoundingClientRect().widthconst range = document.createRange()range.setStart(textContent, 0)range.setEnd(textContent, textContent.childNodes.length)const rangeWidth = range.getBoundingClientRect().widthreturn rangeWidth > targetW}return !textRange(ev.target)
}/**** @param {*} form_key* @param {*} form_data*/
export const mapKey = (form_key, form_data ) => {let form_bk = {}Object.keys(form_key).forEach(key => {form_bk[key] = form_data[key]})return form_bk
}// 确认删除提示框
export const confirmDel = (callback) => {MessageBox.confirm('是否确认删除?','提示',{confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning',}).then(() => {callback()})
}/*** 高亮表格搜索列* @param {表格列} tableColumns* @param {搜索参数} params* @returns*/
export const handleHighLight = (tableColumns,params) => {// 去除其他列的高亮tableColumns.forEach(item => {if (item.className?.includes('is-active')) {let arr = item.className.split(' ')item.className = arr[0]}})// 高亮当前搜索列if (params.value !== '') {tableColumns.forEach(item => {if (item.className === params.field) {item.className = params.field + ' ' + 'is-active'}})}
}/*** 删除数组中指定对象* @param {数组} arr* @param {对象中匹配的key} key* @returns*/
export const removeObjWithArr = (arr,key) => {arr.forEach((item,index,array)=>{if(item.key === key){array.splice(index,1)}})
}/*** 判断数据中是否存在某个对象* @param {数组} arr* @param {对象中的key} key* @param {跟key比对的值} val* @returns*/
export const findItem = (arr,key,val) => {for(let i = 0; i < arr.length; i++) {if(arr[i][key] == val) {return i}}return -1
}/*** 比对下拉数据* @param {*} list * @param {*} type * @returns */
export const compare = (list, type) => {let cnName = ''list?.forEach((i) => {if(i.type === type) {cnName = i.name}})return cnName
}/*** 多维数组去重* @param {*} list * @param {*} type * @returns */
export const handleUnique = (arr) => {// 因对象特别，分出数组中的对象单独去重let objArr = arr.filter((item) => {return Object.prototype.toString.call(item) === "[object Object]";});let otherTypeArr = arr.filter((item) => {return Object.prototype.toString.call(item) !== "[object Object]";});// 数组及简单类型处理let obj = {};otherTypeArr = otherTypeArr.filter((item, index) => {let newItem = item + JSON.stringify(item);return obj.hasOwnProperty(newItem) ? false : (obj[newItem] = true);});// 对象类型处理if (objArr.length !== 0) {// 将数组对象转成数组字符串var objToStrArr = [];var keyArr = [];var key = "";var currentObj = {};var currentStr = "";objArr.forEach(item => {// 对象属性排序keyArr = [];for (key in item) {keyArr.push(key);}keyArr.sort(); // 降序currentObj = {};keyArr.forEach(ele => {currentObj[ele] = item[ele];})currentStr = JSON.stringify(currentObj);// 去除空格及\t空白字符currentStr = currentStr.replace(/(\s|[\\t])/g, "");objToStrArr.push(currentStr);})objToStrArr.sort();var tmepArr = [];// 数组去重objToStrArr.forEach((item, i) => {if (item !== tmepArr[tmepArr.length - 1]) {tmepArr.push(item);}})var resultArr = [];// 新数组字符串转成数组对象tmepArr.forEach((item) => {resultArr.push(JSON.parse(item));})objArr = resultArr;}return [...otherTypeArr, ...objArr];
}

这是在vue3项目中用到的

import router from "@/router/index"export function pick(obj, arr) {return arr.reduce((iter, val) => (val in obj && (iter[val] = obj[val]), iter),{});
}/*** 节流* @param {function} fn* @param {number} delay* @returns {function}*/export function throttle(fn, delay) {let flag = true;return function () {// 等上次执行结束if (!flag) return;flag = false;fn();setTimeout(() => {flag = true;}, delay);};
}/*** 判空* @param val * @returns */
export function isEmpty(val: any) {if(val === '' || val === {} || val === '{}' || val === [] || val === '[]' || val === null || val === undefined) {return true}else {return false}
}/*** 过滤对象中多余属性后赋值* @param formKey 被赋值数据* @param row  赋值数据*/
export function filterKey(formKey: Object, row: Object ) {Object.keys(formKey).forEach((key: string) => {formKey[key] = row[key]})
}/*** 获取assets静态资源  适用于处理多个链接的资源文件* @param url 文件名* @returns */
export const getAssetsFile = (url: string) => {return new URL(`~@/assets/images/${url}`, import.meta.url).href
}/*** 判断是否文本溢出* @param e 事件对象* @returns*/
export const isBeyond = (e: any) => {const ev = window.event || e;const textRange = (el: any) => {const textContent = el;const targetW = textContent.getBoundingClientRect().width;const range = document.createRange();range.setStart(textContent, 0);range.setEnd(textContent, textContent.childNodes.length);const rangeWidth = range.getBoundingClientRect().width;return rangeWidth > targetW;};return !textRange(ev.target);
};/*** 防抖函数* @param func * @param delay * @returns */
export const debounce = (func, delay) => {let timer;return function() {clearTimeout(timer);timer = setTimeout(func, delay);};
}/*** 节流函数* @param func * @param delay * @returns */
export const Throttle = (func, delay) => {let timer;let lastExecTime = 0;return function(...args) {const context = this;const currentTime = Date.now();if (currentTime - lastExecTime >= delay) {lastExecTime = currentTime;func.apply(context, args);} else {clearTimeout(timer);timer = setTimeout(() => {lastExecTime = currentTime;func.apply(context, args);}, delay - (currentTime - lastExecTime));}};
}/*** 将后端返回的数据，转换成echarts pie图需要的数据格式* @param dataList    * @param nameField * @param valueField * @param paramsField * @returns */
export const reconfigPie = (dataList, nameField, valueField, paramsField = undefined) => {const result = dataList?.map((item) => ({ name: item[nameField], value: item[valueField],params: item[paramsField] && item[paramsField],}));  return result;
}/*** 将后端返回的数据，转换成echarts bar图需要的数据格式* @param dataList * @param timeField * @param yField * @param nameField * @param countField * @returns */
export const reconfigBar = (dataList, timeField, yField, nameField, countField) => {let format = {dtX: [],valY: [],legend: [],}dataList.map((item) => {format.dtX.push(item[timeField]);for (let k of item[yField]) {let isExist = format.valY.find((j) => j.name === k[nameField]);if (isExist) {isExist.data.push(k[countField]);} else {format.valY.push({name: k[nameField],data: [k[countField]],});}}});format.legend = format.valY?.map(item => {return item.name})return format
}/*** params路由传参刷新就消失，将数据保存在sessionstorage中* @param resultField * @param sessionField * @returns */
export const saveSessionParams = (resultField, sessionField,) => {const route = router.currentRoute.valuelet paramsVal = JSON.parse(sessionStorage.getItem(sessionField));if(!isEmpty(paramsVal)) {resultField = paramsVal}else {resultField = route.paramsroute.params &&  sessionStorage.setItem(sessionField,JSON.stringify(route.params));}return resultField
}export const saveSessionParams1 = (resultField, sessionField) => {const route = router.currentRoute.value;const paramsVal = JSON.parse(sessionStorage.getItem(sessionField));if (Object.keys(route.params).length > 0) { // 路由有传参resultField = route.paramssessionStorage.setItem(sessionField, JSON.stringify(route.params));} else { // 路由没有传参if (paramsVal) {resultField = paramsVal}}return resultField
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/45290.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

html元素

html元素

文章目录 html基本结构属性语义化为什么要语义化 示例head中属性样式一些概念块级元素与行级元素空白折叠 html编程没有css的html显示逻辑 html基本结构 html基本单元就是元素&#xff0c;每个元素有标记和属性&#xff0c;如&#xff1a; <a href"...">www&…
阅读更多...
【NX】NX二次开发BlockUI集列表的详细使用步骤

【NX】NX二次开发BlockUI集列表的详细使用步骤

最近使用NX二次开发&#xff0c;需要用到集列表&#xff0c;也就是SetList这个控件&#xff0c;然而网上相关的资料和范例实在是太少&#xff0c;有幸找到《NX二次开发-BlockUI集列表的使用技巧》和《UG&#xff08;NX&#xff09;二次开发 BlockUI 集列表使用方法》&#xff0…
阅读更多...
LeetCode.双指针(四)

LeetCode.双指针(四)

例题一 一、题目 长度最小的子数组 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其和 ≥ target 的长度最小的 连续子数组 [numsl, numsl1, ..., numsr-1, numsr] &#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回 0 。 示例…
阅读更多...
K8S deployment挂载

K8S deployment挂载

Deployment部署文件 apiVersion: apps/v1 kind: Deployment metadata:annotations:deployment.kubernetes.io/revision: "1"kubectl.kubernetes.io/last-applied-configuration: |{"apiVersion":"apps/v1","kind":"Deployment&qu…
阅读更多...
Redis从基础到进阶篇（一）

Redis从基础到进阶篇（一）

目录 一、了解NoSql 1.1 什么是Nosql 1.2 为什么要使用NoSql 1.3 NoSql数据库的优势 1.4 常见的NoSql产品 1.5 各产品的区别 二、Redis介绍 2.1什么是Redis 2.2 Redis优势 2.3 Redis应用场景 2.4 Redis下载 三、Linux下安装Redis 3.1 环境准备 3.2 Redis的…
阅读更多...
JDK8知识点梳理

JDK8知识点梳理

JDK8知识点梳理 一、lambda表达式1.标准格式2.实现原理3.省略模式4.前提条件 二、函数式接口1.函数式接口&#xff1a;FunctionalInterface2.接口默认方法3.接口静态方法4.供给型接口&#xff1a;Supplier5.消费型接口&#xff1a;Consumer6.消费供给型接口&#xff1a;Functio…
阅读更多...
孤注一掷——基于文心Ernie-3.0大模型的影评情感分析

孤注一掷——基于文心Ernie-3.0大模型的影评情感分析

孤注一掷——基于文心Ernie-3.0大模型的影评情感分析 文章目录 孤注一掷——基于文心Ernie-3.0大模型的影评情感分析写在前面一、数据直观可视化1.1 各评价所占人数1.2 词云可视化 二、数据处理2.1 清洗数据2.2 划分数据集2.3 加载数据2.4 展示数据 三、RNIE 3.0文心大模型3.1 …
阅读更多...
git报错Add correct host key

git报错Add correct host key

想克隆备份的笔记库&#xff0c;失败。 测试连接github报错如下。 $ ssh -T gitgithub.comWARNING: POSSIBLE DNS SPOOFING DETECTED! The RSA host key for github.com has changed, and the key for the corresponding IP address 140.82.121.4 is unknown. This c…
阅读更多...
stm32单片机开关输入控制蜂鸣器参考代码（附PROTEUS电路图）

stm32单片机开关输入控制蜂鸣器参考代码（附PROTEUS电路图）

说明&#xff1a;这个buzzer的额定电压需要改为3V&#xff0c;否则不会叫&#xff0c;源代码几乎是完全一样的 //gpio.c文件 /* USER CODE BEGIN Header */ /********************************************************************************* file gpio.c* brief Thi…
阅读更多...
linkis 1.1.1 报错 No plugin found spark-2.4.8, please check your configuration

linkis 1.1.1 报错 No plugin found spark-2.4.8, please check your configuration

按照官方教程设置,但是仍然报错 Caused by: java.util.concurrent.ExecutionException: LinkisException{errCode70063, descNo plugin found spark-2.4.8, please check your configuration, iphadoop0004, port9103, serviceKindlinkis-cg-engineplugin} 这个时候,我们首先检…
阅读更多...
excel逻辑函数篇1

excel逻辑函数篇1

1、AND(logical1,[logical2],…)&#xff1a;用于测试所有条件是否均为TRUE 检查所有参数均为true&#xff0c;如果是则返回true 2、OR(logical1,[logical2],…)&#xff1a;用于测试是否有为TRUE的条件 如果任意参数值为true&#xff0c;即返回true&#xff1b;只有当所有参数…
阅读更多...
【腾讯云 TDSQL-C Serverless产品体验】抓取processon热门模版的标题生成词云

【腾讯云 TDSQL-C Serverless产品体验】抓取processon热门模版的标题生成词云

【腾讯云 TDSQL-C Serverless产品体验】抓取processon热门模版的标题生成词云 serverless服务是腾讯云自研的新一代云原生关系型数据库TDSQ L-C的无服务器架构版&#xff0c;是全Serverless架构的云原生数据库 前言 体验了一下腾讯云刚出的TDSQL-C Serverless&#xff0c;使用…
阅读更多...
FFmpeg参数说明FFmpegAndroid饺子视频播放器

FFmpeg参数说明FFmpegAndroid饺子视频播放器

FFmpegAndroid https://github.com/xufuji456/FFmpegAndroid https://github.com/lipangit/JiaoZiVideoPlayer/tree/develop 饺子视频播放器 ffmpeg 不是内部或外部命令&#xff0c;也不是可运行的程序 或批处理文件 http://www.360doc.com/content/21/0204/15/54508727_9606…
阅读更多...
【idea】社区版idea运行Tomcat

【idea】社区版idea运行Tomcat

使用 Smart Tomcat插件 配置运行&#xff1a;
阅读更多...
通过LD_PRELOAD绕过disable_functions

通过LD_PRELOAD绕过disable_functions

LD_PRELOAD LD_PRELOAD是Linux/Unix系统的一个环境变量&#xff0c;它可以影响程序的运行时的链接&#xff0c;它允许在程序运行前定义优先加载的动态链接库。通过这个环境变量&#xff0c;可以在主程序和其动态链接库的中间加载别的动态链接库&#xff0c;甚至覆盖系统的函数…
阅读更多...
[静态时序分析简明教程(十一)]浅议tcl语言

[静态时序分析简明教程(十一)]浅议tcl语言

静态时序分析简明教程-浅议tcl语言 一、写在前面1.1 快速导航链接 二、Tcl基础知识三、Tcl的语言结构3.1 Tcl变量3.2 Tcl表达式与运算符3.3 Tcl的控制流语句3.3.1 列表遍历3.3.2 决策3.3.3 Tcl循环3.3.4 Tcl过程 3.4 其他Tcl命令3.4.1 open/close3.4.2 gets/puts3.4.3 catch3.4…
阅读更多...
【NOIP】标题统计

【NOIP】标题统计

author&#xff1a;&Carlton tags&#xff1a;模拟&#xff0c;字符串 topic&#xff1a;【NOIP】标题统计 language&#xff1a;C website&#xff1a;P5015 [NOIP2018 普及组] 标题统计 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) date&#xff1a;2023年8月20日…
阅读更多...
linux -- centos -- cmake 留坑

linux -- centos -- cmake 留坑

安装Cmake 在Linux一个目录下&#xff1a; touch poj.cpp touch CMakeLists.txtpoj.cpp的内容&#xff1a;随便输出一点东西啦 CMakeLists.txt的内容&#xff1a; cmake_minimum_required(VERSION 3.6) project(Test) add_executable(Test test.cpp)cmake_minimum_required:c…
阅读更多...
Rust语法：所有权引用生命周期

Rust语法：所有权引用生命周期

文章目录 所有权垃圾回收管理内存手动管理内存Rust的所有权所有权转移函数所有权传递 引用与借用可变与不可变引用 生命周期悬垂引用函数生命周期声明结构体的生命周期声明Rust生命周期的自行推断生命周期约束静态生命周期 所有权 垃圾回收管理内存 Python&#xff0c;Java这…
阅读更多...
Cesium加载ArcGIS Server4490且orgin -400 400的切片服务

Cesium加载ArcGIS Server4490且orgin -400 400的切片服务

Cesium在使用加载Cesium.ArcGisMapServerImageryProvider加载切片服务时&#xff0c;默认只支持wgs84的4326坐标系&#xff0c;不支持CGCS2000的4490坐标系。 如果是ArcGIS发布的4490坐标系的切片服务&#xff0c;如果原点在orgin X: -180.0Y: 90.0的情况下&#xff0c;我们可…
阅读更多...
最新文章

Copyright @ 2022~2023