![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 61
小湾生产队队长
这个作者很懒,什么都没留下…
展开
-
JS中 json数组内部key不完全相同,根据某个key值相同的,其他属性直接合并
【代码】JS中 json数组内部key不完全相同,根据某个key值相同的,其他属性直接合并。原创 2022-12-29 14:29:22 · 645 阅读 · 0 评论 -
20 个 JS 工具函数助力高效开发
Day.js 是一个仅 2kb 大小的轻量级 JavaScript 时间日期处理库,下载、解析和执行的JavaScript更少,为代码留下更多的时间。此方法存在一定局限性:一些特殊情况没有处理: 例如Buffer对象、Promise、Set、Map。关于时间操作,没必要自己再写一大串代码了,强烈推荐使用 day.js[2]假设我们要从树状结构数据中查找 id 为 9 的节点。不过要吐槽一句的是,uuid一般应由后端来进行生成。{number} number:要格式化的数字。arr 要去重的数组。原创 2022-09-08 10:00:46 · 1141 阅读 · 0 评论 -
JS项目开发中常用的一些小功能
目录字符串技巧1、比较时间2、格式化money3、生成随机ID4、生成随机 HEX 颜色值5、Generate star ratings6、网址查询参数数字技能7、Arrangement8、零填充9、转数10、时间戳11、精确小数12、平价13、取最小值最大值14、生成范围随机数布尔技能15、短路运算符16、原创 2022-04-24 09:18:11 · 1250 阅读 · 0 评论 -
10 个项目中常用的 JS 工具库,大多数项目应该都可以用到
Day.js一个极简的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持一样, 但体积仅有2KB。npminstalldayjs基本用法importdayjsfrom'dayjs'dayjs().format('YYYY-MM-DDHH:mm')//=>2022-01-0315:06dayjs('2022-1-315:06').toDate()//=>MonJan03202215:06:00G...原创 2022-04-07 09:16:09 · 354 阅读 · 0 评论 -
JS:数组根据某个属性值,将其他属性值相加
JS操作数组根据某个属性值,将其他属性值相加求和var carbonData = [{ CountyName: '瑶海区', CityName: '合肥市', ProvinceName: '安徽省', sequestration2010: 0.159123646, sequestration2011: 0.163177413, sequestration2012: 0.158292146,原创 2022-03-29 11:16:16 · 760 阅读 · 0 评论 -
javascript工具操作集合(es6写法)
目录一、数字操作(1)、生成指定范围随机数(2)数字千分位分隔2. 数组操作(1)数组乱序(2)数组扁平化(3)数组中获取随机数3. 字符串操作(1)生成随机字符串(2)字符串首字母大写(3)手机号中间四位变成*(4)驼峰命名转换成短横线命名(5)短横线命名转换成驼峰命名(6)全角转换为半角(7)半角转换为全角4. 格式转化(1)数字转化为大写金额(2)数字转化为中文数字5. 操作存储(1)存储loalStorage(2)获原创 2021-10-28 09:33:19 · 152 阅读 · 0 评论 -
JavaScript 处理颜色问题
一、生成随机的十六进制颜色可以使用Math.random和padEnd属性生成随机的十六进制颜色。const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`; console.log(randomHex());// Result: #92b008二、颜色rgb转换十六进制const rgbToHex = (r, g, b) =>...原创 2021-10-08 09:13:14 · 177 阅读 · 0 评论 -
js常用功能代码……
一、获取一个随机布尔值(true/false) 这个函数使用Math.random()方法返回一个布尔值(true 或 false)。Math.random将在 0 和 1 之间创建一个随机数,之后我们检查它是否高于或低于 0.5。这意味着得到真或假的几率是 50%/50%。...原创 2021-06-21 10:18:55 · 478 阅读 · 1 评论 -
javascript点击按钮定位到本html上某个Div位置
<button style="margin-top: 30px;" onclick=" window.location.href = '#wrap'">Explore the bar-line chart</button>原创 2021-06-05 09:57:26 · 814 阅读 · 1 评论 -
javascript:一个json数组,根据内部某个属性,将该属性值相同的合并到一块。
javascript:一个json数组,根据内部某个属性,将该属性值相同的合并到一块。需求:一个json数组,根据内部某个属性,将该属性值相同的合并到一块;具有相同“tagName”的对象合并成新数组数据情况:let resData = [ { "name": "住院医疗最高报销", "tagName": "医疗", "insuredAmount": "6000" }, { "name":原创 2021-06-03 10:59:51 · 1571 阅读 · 0 评论 -
常用的前端JavaScript方法封装
1、输入一个值,返回其数据类型**functiontype(para){returnObject.prototype.toString.call(para)}2、数组去重functionunique1(arr){return[...newSet(arr)]}functionunique2(arr){varobj={};returnarr.filter(ele=>{if(!obj[ele]...原创 2021-03-12 09:02:25 · 247 阅读 · 1 评论 -
JS树结构操作:查找、遍历、筛选、树结构和列表结构相互转换
JS树结构操作:查找、遍历、筛选、树结构和列表结构相互转换目录JS树结构操作:查找、遍历、筛选、树结构和列表结构相互转换一、遍历树结构二、列表和树结构相互转换三、树结构筛选四、树结构查找五、结语经常有同学问树结构的相关操作,也写了很多次,在这里总结一下 JS 树形结构一些操作的实现思路,并给出了简洁易懂的代码实现。本文内容结构大概如下:JS树结构相关操作一、遍历树结构1. 树结构介绍JS中树结构一般是类似于这样的结构:lettree=[...原创 2021-02-23 11:57:55 · 144 阅读 · 0 评论 -
超全超详细的 JS 数组方法
目录一、创建数组二、数组方法1.join()2.push()和 pop()3.shift() 和 unshift()4.sort()5.reverse()6.concat()7.slice()8.splice()9.indexOf()和 lastIndexOf()10.forEach()11.map()12.filter()13.fill() es6 新增14.every()15.some()16.includes() es7 新增原创 2021-02-23 09:10:52 · 120 阅读 · 0 评论 -
javascript操作HTML标签集合
javascript操作HTML标签集合一、radio篇1、根据radio的name获取当前处于选中状态的radio的valueradio排版:<input type="radio" name="image" checked="checked" value="13年">13年航空影像<br> <input type="radio" name="image" value="16年">16年航空影像<br> <input type="r原创 2020-11-05 20:17:34 · 170 阅读 · 0 评论 -
说说JavaScript异步的几种搞法——一篇学会异步操作
说说JavaScript异步的几种搞法异步在JS中是常用的,六种异步方案:回调函数、事件监听、发布/订阅、Promise、Generator和Async。其中重点是发布/订阅、Promise、Async。一、六种异步方案1、回调函数核心思想:把任务的第二段单独放到一个函数里面,等到重新执行这个任务的时候,直接调用这个函数。优点:简单、容易理解和实现缺点:结构混乱,特别多次调用时候用法:function sleep(time, callback) { setTim原创 2020-09-24 15:44:41 · 749 阅读 · 0 评论 -
JavaScript常用操作集合
JavaScript常用特殊操作集合1、三元运算符用法://基础用法: 判断大于100,true前者,false后者x > 100 ? "Above 100" : "Below 100";//引申用法:判断大于100,如果大于100再判断是不是大于200x > 100 ? (x > 200 ? "Above 200" : "Between 100-200") : "Below 100";2、类型转换2.1 数字转为字符串快速的将数字转为字符串,可以用连接运算符(原创 2020-09-15 10:51:37 · 175 阅读 · 0 评论 -
JavaScript实现原生table元素鼠标移动到tr上,行变背景色
JavaScript实现原生table元素鼠标移动到tr上,行变背景色代码:trbgColorChange () { const self = this; var oObj = event.srcElement; if (self.currentTr) { self.currentTr.style.backgroundColor = "#FFF"; } if (oObj.tagName.toLowerCase() == "原创 2020-08-11 17:40:45 · 528 阅读 · 0 评论 -
ES6数组操作:forEach、map、filter、find、every、some、reduce、concat(合并)详细用法
目录ES6数组操作:forEach、map、filter、find、every、some、reduce详细用法1、forEach2、map3、filter4、find5、every6、some7、reduceES6数组操作:forEach、map、filter、find、every、some、reduce详细用法1、forEach作用:循环遍历numbers=[1,2,3,4,5]numbers.forEach(number => { .原创 2020-07-13 18:41:07 · 1224 阅读 · 0 评论 -
JavaScript中获取json所有的Key作为一个数组,并利用变量作为json对象的KEY,来获取属性值。
JavaScript中将变量作为json对象的KEY,来获取属性值场景描述json对象要回去某个属性的值,一般都是根据键值key来获取,json.a="",但是有时候,需要动态的传键值Key来获取对应的属性值实现方式:1、获取json多有的key值,作为一个数组var data={k:'aa',b:'aaa'};var keyData=Object.keys(data)//keyData=['k','b']2、动态传变量作为keyvar data={k:'aa',b:'a原创 2020-07-13 10:33:00 · 3848 阅读 · 0 评论 -
JavaScript 数组和字符串互转
一、数组转字符串(用join)a = new Array(a,b,c,d,e); b = a.join('-'); //a-b-c-d-e 使用-拼接数组元素c = a.join(''); //abcde二、字符串转数组:splitvar str = 'ab+c+de';var a = str.split('+'); // [ab, c, de]var b = str.split(''); //[a, b, +, c, +, d, e]...原创 2020-06-22 16:47:30 · 278 阅读 · 0 评论 -
JavaScript数字数组找最大值最小值的方法与效率比较
JS数字数组找最大值最小值的方法与效率比较应用场景:数字数组找最大值和最小值。例子:vararr = [12,56,25,5,82,51,22];方法1:排序法思路:按照从大到小排序,第一个和最后一个就是想要获取的值。arr.sort(function (a, b) { return a-b; //a-b返回的值是正数、负数就可以排序了}); // [5,12...原创 2020-04-08 10:59:08 · 1635 阅读 · 0 评论 -
js数组去重方法以及其效率总结
js数组去重方法以及其效率总结主要是针对一些常用的数组去重方法以及这些方法需要消耗的时间的总结。测试用的数组是百万级别的,下面是创建测试数组的方法:let arr = [];for(let i = 0; i < 1000000;i ++) { arr.push(Math.floor(1000000* Math.random()))}使用console.time...原创 2019-10-15 10:07:51 · 975 阅读 · 0 评论 -
JS 数组操作集合
数组操作——JS篇目录数组操作——JS篇一、JS 对象数组,根据对象中某个属性从大到小排序sort二、数组去重三、数组元素重复次数统计,并建立新对象记录元素和重复次数四、判断单个元素在不在某个数组中一、JS 对象数组,根据对象中某个属性从大到小排序sort应用场景:一个对象数组,比如: var arr = [{'name': '张三', age: 2...原创 2019-10-15 09:17:18 · 2058 阅读 · 0 评论 -
坐标转换:墨卡托 & 经纬度
坐标转换:墨卡托 & 经纬度var lonlat={x:114.514864,y:38.04232};var mercator={x:12747736.346966475,y:4585405.935084799};//经纬度转墨卡托function lonlat2mercator(lonlat){var mercator={x:0,y:0};var x = lonlat.x ...原创 2019-07-16 11:16:49 · 860 阅读 · 0 评论 -
JS中this作用域的问题:常见报错:XXX function 或者变量 未定义
JS中this作用域的问题:常见报错:XXX function 或者变量 未定义场景:定义了全局的函数,但是使用的时候,报错XXX 函数或者变量未定义,但实际上js中明明已经定义了且正确问题原因:大多数是因为调用过程中this.functionname 或者this.varname中this指向的作用域问题解决办法:在调用函数中,函数体最外层添加this指代,var self=this;调...原创 2019-07-16 13:23:13 · 508 阅读 · 0 评论 -
JavaScript基础
JavaScript基础console.log(信息); // 这个是常用的输出打印信息的手段.前端开发程序员都喜欢用 Chrome 讨厌用 IE目前前端开发喜欢用的 IDE(编辑器)是 VScode测试用的html模板,在这里Lesson1 变量变量的初始化var在 ES5 (ES 表示ECMAScript ,是一个标准,可以参考百度) 之前,变量命名都是使用var ...原创 2019-07-19 10:22:41 · 92 阅读 · 0 评论 -
原生DIV,控制两个DIV显示隐藏切换,且切换后样式形状不乱
原生DIV,控制两个DIV显示隐藏切换,且切换后样式形状不乱功能:做项目时候经常需要设置两个DIV显示或者隐藏,切换显示,并且保证之前设置的样式不乱:实现:保证样式不乱的方法是:先进行有关数据渲染的操作,最后再执行隐藏和显示的操作,这样数据已经填充好了,样式就不会乱了。一.方式1:隐藏后仍占有页面空间,显示空白div的visibility可以控制div的显示和隐藏,但是隐藏后页面...原创 2019-07-19 10:41:36 · 663 阅读 · 0 评论 -
JavaScript实现DIV可随意移动,无需设置监听
JavaScript实现DIV可随意移动,无需设置监听每次使用时候,给drag函数传递一个DIV的id号,该DIV即可被鼠标移动 drag:function(id) { var $ = function (flag) { return document.getElementById(flag); } ...转载 2019-07-25 15:19:41 · 510 阅读 · 0 评论 -
javascript通过appendChild(dom)方法插入一个dom元素无效
javascript通过appendChild(dom)方法插入一个dom元素:父dom的ID:thediv子dom的ID:closeImgContainer insertCloseImage:function(){ var titleDiv=document.getElementById("thediv"); if(titleDiv){ ...原创 2019-07-25 17:53:26 · 5295 阅读 · 0 评论 -
JavaScript获取屏幕、窗口、页面、网页正文等各种高度宽度
var s = ""; s += " 网页可见区域宽:"+ document.body.clientWidth+"\n"; s += " 网页可见区域高:"+ document.body.clientHeight+"\n"; s += " 网页可见区域宽:"+ document.body.offsetWidth + " (包括...原创 2019-07-27 17:22:48 · 180 阅读 · 0 评论 -
DOM节点的创建、插入、删除等经验集合
目录DOM节点的创建、插入、删除各种经验集合一、DOM节点的创建1.1 JS方法1.1.1 HTML页面中:1.1.2 JS页面中1.2 JQ方法二、DOM节点的插入2.1 DOM内部插入2.2 DOM外部插入三、DOM节点的删除DOM节点的创建、插入、删除各种经验集合一、DOM节点的创建主要流程和涉及的方法 创建节点 :crea...原创 2019-08-26 11:09:19 · 328 阅读 · 0 评论 -
JS中,判断变量是否是未定义类型
应用场景:编程中,经常有很多时候因为在某处,之前定义的变量还没执行到,导致调用的时候报错:“ XXXXis undefined”解决这个问题的办法:就是利用typeof()函数先判断下,如果这个变量已经存在就执行操作,即可。 if(typeof(hnCityself)!="undefined"){ hnCityself.destroy(); ...原创 2019-09-05 15:49:40 · 1335 阅读 · 0 评论 -
JavaScript 创建DIV 设置样式不起作用,很多都是因为设置样式的顺序问题
JavaScript 创建DIV 设置样式不起作用,很多都是因为设置样式的顺序问题,因为有的样式需要之前设置其他样式才能生效,推荐的样式排序如下:insertDIV:function(){ var divId=document.getElementById("divContainer"); if(divId){ divId.style.display="block"; ...原创 2019-07-16 11:06:36 · 599 阅读 · 0 评论