![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端实用工具集
该集合里面是前端开发中使用的一些工具类型的代码
loyd3
不加微信捏
展开
-
【js】根据给定的数组和属性从源数组中获取数据
在上面的方法中,sourceArray是要取数据的数组,IndexArray是指定想要取出的数据 ,indexKey是IndexArray中的数据对应sourceArray的属性值,要从sourceArray 中取出id为physical-activity和taste的数据。想从一个数组中,根据该数组的某个属性值,例如id,取出相对应的数据,可以参考下面的方法。原创 2023-08-14 16:00:35 · 515 阅读 · 0 评论 -
【js】链接中有多余的&怎么取出参数值
在上面的代码中,首先使用decodeHtml函数对URL中的HTML实体进行解码,该函数创建一个临时的textarea元素,并使用其innerHTML属性对HTML实体进行解码。然后,我们创建一个URL对象,并使用URLSearchParams对象来解析查询字符串并获取fname参数的值。, 而如果使用下面的代码,因为在URL中,&符号是一个特殊字符,用于分隔不同的参数。请注意,此解决方案需要DOM环境,因此它可以在浏览器中工作,但在没有DOM实现的Node. js环境中则不行。原创 2023-08-14 15:34:47 · 352 阅读 · 0 评论 -
【前端js】基于某个特定属性创建嵌套数组
返回一个数组,返回的数组的内容是传入的对象中 所有键的值,跟对象的keys方法刚好是相对的,因为对象内部的元素是以键值对的形式存在的,所以很好理解。从方法名称的释义也可以大概的知道,英文单词 key有 键 的意思,单词 value 有值、价值的意思,所以方法的作用显而易见。reduce与他们不同的是函数的第一个参数得到的是。参考下面的代码,想要根据对象的group属性,将下面的数组进行重组,组成group相同的对象放在一个数组的嵌套新数组。参数:obj 是 被返回可枚举属性值的对象。arr:被遍历的数组。原创 2023-06-12 15:11:47 · 565 阅读 · 0 评论 -
【前端js】将一个数组的顺序随机打乱
下面代码将一个数组的顺序随机打乱。原创 2023-06-06 16:03:09 · 163 阅读 · 0 评论 -
【前端js】根据一个数组的排序去给另一个数组排序
方法用于查找满足给定条件的数组中第一个元素的索引。它将回调函数作为参数,为数组中的每个元素执行该参数,直到满足条件为止。如果元素满足条件,回调函数应返回true,否则返回false。是一种有用的方法,用于查找满足给定条件的数组中元素的索引。它可以用于各种场景,例如根据特定属性对数组进行排序或查找特定元素的索引。方法中要比较的每个类型调用一次。然后使用两个索引之间的差异来确定类型数组的顺序。用于查找与type.type属性匹配的groupType的索引。要根据这个数组的id顺序去给下面这个数组排序。原创 2023-06-01 13:12:18 · 458 阅读 · 0 评论 -
【前端js】以指定数量切分数组
以指定数量(10)各一组切分数组,组成一个数组,这个数组包含由最多指定数量(10)个数据的数组(数组集合)例如指定数量是10,原数组时[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]切分后组成新数组,[[1,2,3,4,5,6,7,8,9,10],[11,12,13,14,15]]slice() 方法从已有的数组中返回选定的元素。原数组不改变返回新选定的元素组成的新数组。原创 2023-03-29 09:51:31 · 1316 阅读 · 1 评论 -
【前端样式】h5页面移动端上下两个相邻的div中间出现缝隙
在某些移动设备尺寸下,两个相邻的div中间出现一条白线。可以通过给上半部分div的样式添加。上半部分div的样式。下半部分div的样式。原创 2022-07-28 14:35:56 · 1119 阅读 · 0 评论 -
【js】实现html整个页面生成单张pdf
首先引入html2canvas和jspdfhtml2canvas: http://html2canvas.hertzen.com/jspdf: https://parall.ax/products/jspdf创建方法downloadAsPdfdownloadAsPdf(){ // 特别重要:当页面超过一页,出现滚动条,滚动的部分生成的图片为空白 window.pageYoffset = 0 document.documentElement.scrollTop = 0 doc原创 2022-02-22 09:02:31 · 701 阅读 · 0 评论 -
【前端】ES6去重的几种方法
去除数组的重复成员的方法[...new Set(array)]去除数组重复成员的另一种方法。function dedupe(array) { return Array.from(new Set(array));}去除字符串里面的重复字符。[...new Set('ababbc')].join('')// "abc"原创 2020-09-17 14:23:15 · 474 阅读 · 0 评论 -
js 字符串非空判断
一般:if(str!=null && str!=undefined && str!=""){ //something}可简化为if(!str){undefined //something}原创 2022-01-14 08:32:21 · 502 阅读 · 0 评论 -
js 数组的几种数组遍历方法
foreach遍历数组中的每一项,没有返回值,对原数组没有影响,不支持IE//1 没有返回值arr.forEach((item,index,array)=>{ //执行代码})//参数:value数组中的当前项, index当前项的索引, array原始数组;//数组中有几项,那么传递进去的匿名回调函数就需要执行几次map有返回值map的回调函数中支持return返回值;return的是啥,相当于把数组中的这一项变为啥(并不影响原来的数组,只是相当于把原数组克隆一份,把克隆原创 2022-01-03 13:41:11 · 6030 阅读 · 0 评论 -
【前端实用工具集】js对url进行编码和解码的三种方式
前提知识:只有 0-9[a-Z] $ - _ . + ! * ’ ( ) , 以及某些保留字,才能不经过编码直接用于 URL。中文字符等会被转码1 escape 和 unescape对除ASCII字母、数字、标点符号 @ * _ + - . / 以外的其他字符进行编码。escape编码,unescape解码例子:编码:escape(‘http://www.baidu.com?name=zhang@xiao@jie&order=1’)结果:“http%3A//www.baid原创 2021-12-06 10:10:22 · 9036 阅读 · 0 评论 -
【前端】scrollIntoView 滑动到指定区域
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。注意:页面(容器)可滚动时才有用!element.scrollIntoView(); // 等同于element.scrollIntoView(true)element.scrollIntoView(alignToTop); //布尔参数element.scrollIntoView(scrollIntoViewOptions); //对象参数参数alignToTop: 布尔参数true:相当于原创 2021-11-16 13:33:03 · 2161 阅读 · 1 评论 -
【前端】iframe根据子内容高度进行自适应
针对多个iframe的情况iframe标签<iframe width="100%" height="100%" src="/..."></iframe>js代码function iframeLoad() { var ifms = document.getElementsByTagName("iframe"); //获取iframe for (let index = 0; index < ifms.length; ind原创 2020-09-08 16:15:46 · 2513 阅读 · 0 评论 -
【前端】深拷贝:数组和对象
深拷贝数组扩展运算符提供了复制数组的简便写法const a1 = [1, 2];// 写法一const a2 = [...a1];// 写法二const [...a2] = a1;上面的两种写法,a2都是a1的克隆。深拷贝对象// 写法一const clone1 = { __proto__: Object.getPrototypeOf(obj), ...obj};// 写法二const clone2 = Object.assign( Object.create(Ob原创 2020-08-27 16:24:13 · 255 阅读 · 0 评论 -
【前端】实践中常用css样式总结
Eric Reset Css/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del,原创 2020-08-21 16:22:08 · 330 阅读 · 0 评论 -
【前端】点击导出excel
exportExcel() { const apiUrl = BASEURL + "/admin/member/out-excel"; //接口地址 axios({ method: "get", //get请求 url: apiUrl, responseType: "arraybuffer", //responseType可选的参数有:"text"、"arraybuffer"、"blob"或"document"; //对应的返回数据为D原创 2020-07-29 08:27:13 · 188 阅读 · 0 评论 -
【前端】js科学计数转换
scientificNotationToString(param) { let strParam = String(param); let flag = /e/.test(strParam); if (!flag) return param; // 指数符号 true: 正,false: 负 let sysbol = true; if (/e-/.test(strParam)) { sysbol = false; } // 指数 let index = Numb原创 2020-07-29 08:16:45 · 519 阅读 · 0 评论 -
【前端】js 秒转化成年月日时分秒
timestampToTime(cjsj) { var date = new Date(cjsj); //时间戳为10位需*1000,时间戳为13位的话不需乘1000 var Y = date.getFullYear() + "-"; var M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-"; var D = date.getD原创 2020-07-29 08:12:00 · 1127 阅读 · 1 评论 -
【前端】各种兼容
IE兼容<meta http-equiv="x-ua-compatible" content="IE=9" ><meta http-equiv="x-ua-compatible" content="IE=8" ><meta http-equiv="x-ua-compatible" content="IE=7" >兼容IE6,IE8,IE9,IE10,IE11,谷歌,火狐,360等常见的10个浏览器的HTML头部信息配置代码<!DOCTYPE html&原创 2020-07-08 10:08:26 · 653 阅读 · 0 评论