【JS】js常用工具类:

news2024/11/20 12:40:10

文章目录

        • 一、 将对象拼接到url地址后面
        • 二、正则获取url中的图片名称
        • 三、获取多数组之间的差集
        • 四、数组遍历判断是否需要拼接地址
        • 五、 数组去重
        • 六、如果值不存在就 push 进数组, 反之不处理
        • 七、过滤对象中为NaN,undefined的属性
        • 八、字符串中插入千位分隔符
        • 九、保留小数位数


一、 将对象拼接到url地址后面

ObjConcatURL(obj) {
   if (!(typeof obj == 'object') || Object.keys(obj).length == 0) {
     return "";
   } else {
     // 过滤对象中为NaN,undefined的属性
    for (let key in obj) {
       if (obj.hasOwnProperty(key) && (obj[key] == null || obj[key] == undefined || obj[key] == NaN || obj[key] == '')) {
         delete obj[key]
       }
     }
     // 拼接字符串到url
     return obj ? '?' + Object.keys(obj).map(i => `${i}=${obj[i]}`).join('&') : "";
   }
},

在这里插入图片描述

二、正则获取url中的图片名称

// 下载
handleDownload(url) {
   if (!url) {
      this.$message.warning("链接不存在")
      return
   }
   let link = document.createElement('a')
   link.style.display = 'none'
   link.href = url

   // 正则获取url中的图片名称
   const reg = /[^/]+(?!.*\/)/g
   const imgName = url.match(reg).filter(item => item).pop()

   link.setAttribute('download', imgName)
   document.body.appendChild(link)
   link.click()
   document.body.removeChild(link) //下载完成移除元素
   window.URL.revokeObjectURL(url) //释放掉blob对象
}

在这里插入图片描述

三、获取多数组之间的差集

// 获取多数组之间的差集
arrayAminus(arrA, arrB, arrC) {
  return arrA.filter(v => !arrB.includes(v) && !arrC.includes(v));
},

在这里插入图片描述

四、数组遍历判断是否需要拼接地址

/*
*  数组遍历判断是否需要拼接地址
* @param arr:需要遍历的数组
* @param type(["xxx" || "xxx"]/String):用来区分毛重与皮重图片等 
*/
pushArrType(arr, type) {
      if (!Array.isArray(arr) || arr.length == 0) {
        return []
      } else {
        let newArr = [], filterUrl = ["http" || "https" || ";base64,"]
        arr.forEach(item => {
          if (typeof item == 'object' && item.url) {//判断数组里面是否为对象,url是否存在
            if (type) {
              // 存在type并判断是否需要拼接地址
              if (item.url.includes(filterUrl) && item.url.includes(type)) {//不需要拼接地址
                newArr.push(item.url)
              } else if (!item.url.includes(filterUrl) && item.url.includes(type)) {//需要拼接地址
                newArr.push(process.env.VUE_APP_FILE_URL + item.url)
              }
            } else {
              // 不存在type并判断是否需要拼接地址
              item.url.includes(filterUrl) ? newArr.push(item.url) : newArr.push(process.env.VUE_APP_FILE_URL + item.url)
            }
          } else {//数组里面就是字符串(即地址)
            if (type) {
              // 存在type并判断是否需要拼接地址
              if (item.includes(filterUrl) && item.includes(type)) {
                newArr.push(item)
              } else if (!item.includes(filterUrl) && item.includes(type)) {
                newArr.push(process.env.VUE_APP_FILE_URL + item)
              }
            } else {
              // 不存在type并判断是否需要拼接地址
              item.includes(filterUrl) ? newArr.push(item) : newArr.push(process.env.VUE_APP_FILE_URL + item)
            }
          }
        })
        return newArr
      }
},

五、 数组去重

// 数组去重
export function arrFilter(arr) {
	if (!Array.isArray(arr) && arr.length == 0) { return []; }
	return Array.from(new Set(arr)); // 利用Array.from将Set结构转换成数组
}

六、如果值不存在就 push 进数组, 反之不处理

/*
 * 如果值不存在就 push 进数组, 反之不处理
 * @param array 要操作的数据 
 * @param value 要添加的值 
 * @param key 可空, 如果比较的是对象, 可能存在地址不一样但值实际上是一样的情况, 可以传此字段判断对象中唯一的字段, 例如 id。 不传则直接比较实际值 
 * @returns { boolean } 成功 push 返回 true, 不处理返回 false 
 */
export function pushIfNotExist(array, value, key) {
	for (let item of array) {
		if (key && (item[key] === value[key])) {
			return false
		} else if (item === value) {
			return false
		}
	}
	array.push(value)
	return true
}

七、过滤对象中为NaN,undefined的属性

// 过滤对象中为NaN,undefined的属性
export function objFilter(obj, type) {
	if (!(typeof obj == 'object')) {
		return;
	}
	for (let key in obj) {
		if (obj.hasOwnProperty(key) && (obj[key] == null || obj[key] == undefined || obj[key] == NaN)) {
			console.log('---------过滤对象(null/undefined/NaN):' + key + ':' + obj[key] + '----------')
			if (type) {
				obj[key] == type;
			} else {
				delete obj[key];
			}
		}
	}
	return obj;
}

八、字符串中插入千位分隔符

// 字符串中插入千位分隔符
export function thousandsSeparator(num) {
	if (!(typeof num == 'number') || !isNaN(num)) {
		return;
	}
	return (num + "").replace(/\d(?=(\d{3})+$)/g, "$&,")
}

九、保留小数位数

/**
 * 保留小数位数
 * @param {*} num 
 * @param {*} digit 需要保留小数位数(全部显示:则不传或传null)
 * @param {*} type 是否四舍五入(是:不传或传"四舍五入")
 * @returns 
 */
export function keepDecimal(num, digit, type) {
  if (!type || type == null || type == '四舍五入') {
    // 1.四舍五入
    var result = parseFloat(num);
    if (isNaN(result)) { return }
    return digit && digit != null ? Number(result.toFixed(digit)) : Number(result)
  } else {
    // 2.不四舍五入 向下取整
    var result = digit && digit != null ? Math.floor(num * Math.pow(10, digit)) / Math.pow(10, digit) : parseFloat(num);
    if (isNaN(result)) { return }
    return result
  }
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于SpringBoot+Vue的校园疫情防控系统(附源码和数据库)

文章目录 第一章2.主要技术第三章第四章 系统设计4.1功能结构4.2 数据库设计4.2.1 数据库E/R图4.2.2 数据库表 第五章 系统功能实现5.1系统功能模块5.2后台功能模块5.2.1管理员功能 源码咨询 第一章 springboot校园疫情防控系统演示录像2022 一个好的系统能将校园疫情防控的管理…

ChatGPT网站如何像软件一样可以安装下载

今天给大家分享一下, 如何实现网站能够在手机端像软件一样下载在桌面保存, 这样下次就能像打开app一样访问网站了, 是不是听了之后会很心动呢, 接下来我们就一起来学习一下知识, 快来试试这样的效果吧, 最后分享一下我做的一个chatGPT网站, 欢迎大家免费试玩chatGPT, 不过我的免…

JVM系列-第8章-执行引擎

执行引擎 执行引擎概述 执行引擎概述 执行引擎是Java虚拟机核心的组成部分之一。“虚拟机”是一个相对于“物理机”的概念,这两种机器都有代码执行能力,其区别是物理机的执行引擎是直接建立在处理器、缓存、指令集和操作系统层面上的,而虚拟…

GreatSQL社区月报 | 2023.04

GreatSQL 是一个开源的 MySQL 技术路线数据库社区,社区致力于通过开放的社区合作,构建国内自主 MySQL 版本及开源数据库技术,推动中国开源数据库及应用生态繁荣发展。 为了帮助社区的小伙伴们更好地了解 GreatSQL 社区的实时进展&#xff0c…

项目经理什么事都做,只会让你成为工具人

每个人拥有的时间都是一样的,每天二十四个小时,为什么有的项目经理每天提前完成工作下班喝酒撸串,为什么有的项目经理每天熬夜加班到天明? 为什么总是你的时间不够用,每天都很忙碌呢。很可能是你的时间没有管理好。 …

笔记-指针的进阶

1.字符指针 char arr[] "hello bit." char * p arr 这里p指向的是数组的首元素,arr数组是可以修改的。 (const)char * pstr "hello bit." 这里的字符串是常量字符串,不能修改。 这里有一个面试题&#xf…

LeetCode_二叉树_中等_113.路径总和 II

目录 1.题目2.思路3.代码实现(Java) 1.题目 给你二叉树的根节点 root 和一个整数目标和 targetSum ,找出所有从根节点到叶子节点路径总和等于给定目标和的路径。 叶子节点是指没有子节点的节点。 示例 1: 输入:root…

网络基础知识(1)——从OSI七层模型和TCP/IP说起

网络通信概述 网络通信本质上是一种进程间通信,是位于网络中不同主机上的进程之间的通信,属于 IPC 的一种, 通常称为 socket IPC,如图中所示。所以网络通信是为了解决在网络环境中,不同主机上的应用程序之间的通信问题…

U盘上的文件删除了可以恢复吗 U盘上的文件怎么在电脑上恢复

随着数据时代的到来,人们使用U盘来存储和传输文件已经成为一种普遍的方式。然而,有时候人们会不小心将重要的文件从U盘上删除,或者由于其他原因导致文件丢失,这会给人们带来很多麻烦和不必要的损失。因此,在这篇文章中…

华为OD机试(1-20)老题库解析Java源码系列连载ing

华为OD机试算法题新老题库练习及源码 老题库1.敏感字段加密2.IPv4地址转换成整数3.VLAN资源池4. 求字符串中所有整数的最小和5.求满足条件的最长子串的长度6.字符串分割7.一种字符串压缩表示的解压8.矩阵最大值9.单词接龙10.找出符合要求的字符串子串11.字符串加密12.英文输入法…

指定目标对角线创建值全是1的下三角矩阵numpy.diagflat()方法

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 指定目标对角线 偏离主对角线的距离k 创建值全是1的下三角矩阵 numpy.tri() 选择题 关于以下代码说法错误的一项是? import numpy as np print("【执行】a np.tri(3, 3, 0, dtypeint)…

三十二、VPN技术概述——GRE、IPSec、MPLS vpn

文章目录 vpn 简介用途优缺 一、GRE-VPN1、基础配置步骤:2、可选配置 二、IPSEC-VPN 概述1、IPSes 特性2、IPSec 架构3、IPSec 数据封装 三、GRE OVER IPSEC VPN 配置1、配置2、注意 vpn 简介 vpn:virtual private network(虚拟专用网络&…

Prompt都不需要了,动动手就能玩多模态对话系统,iChat来啦!

作者 | 智商掉了一地 近日有很多团队基于用户友好的 ChatGPT 进行再创作,其中不乏有比较亮眼的成果。InternChat工作强调了用户友好性,这是通过超越语言的方式(光标与手势)与聊天机器人交互来进行多模态任务的。InternChat 的命名…

MATLAB基础入门:语法、数据类型和常用函数

MATLAB是一种非常强大的数学计算软件,广泛应用于工程、科学、金融和其他领域的计算分析中。如果您刚开始学习MATLAB,那么这篇文章就是为您准备的。在这篇文章中,我们将介绍MATLAB的基础语法、数据类型和常用函数,以帮助您快速入门…

容器技术Docker

什么是容器 Linux容器是与系统其他部分隔离开的一系列进程,从另一个系统镜像运行,并由该镜像提供支持进程所需的全部文件。 容器镜像包含了应用的所有依赖项,因而在从开发到测试再到生产的整个过程中,它都具有可移植性和一致性。…

C++ | std::bind

C | std::bind 文章目录 C | std::bindstd::bind函数原型bind函数参数返回对象的类型&#xff1a; 实战1.普通函数/类成员函数/类成员变量2.模板函数3.lambda表达式 Reference std::bind函数原型 // 无返回值&#xff08;1&#xff09; template <class Fn, class... Args&…

OpenHarmony下如何打印C/C++调用堆栈

普法OpenHarmony下如何打印C/C调用堆栈 引言 各位大姐&#xff0c;老妹&#xff0c;兄弟是否在OpenHarmony开发移植过程中有过如下烦恼呢&#xff1f;想跟踪源码探寻相关代码逻辑的时候&#xff0c;当面对代码分支逻辑太多&#xff0c;太复杂&#xff0c;打调试信息进行追踪已经…

Mach-O

看看逆向过程中&#xff0c;经常遇见的Mach-O文件类型&#xff1a; MH_OBJECT&#xff0c;这种类型的文件有目标文件(.o)、静态库文件(.a) &#xff08;静态库文件就是N个.o文件合并在一起的&#xff09; MH_EXECUTE&#xff0c;可执行文件&#xff0c;例如上面说的Super文件 …

如何选择一款好的护眼台灯给孩子用?儿童护眼台灯推荐

所以也想要分享给大家&#xff0c;那么热爱看书的你&#xff0c;是否有时候会因为光源的问题而烦恼呢&#xff1f;房间所用的大灯虽然亮度足够&#xff0c;但太过于分散的光&#xff0c;让眼睛在长期聚精会神后&#xff0c;有了红肿干涩&#xff0c;酸痛模糊的感觉。而专用的台…