JS删除绑定事件一、直接删除法1、适用于直接绑定的事件，如：<h1id="h1"onclick="_click();">送你一朵花</h1>2、解除法：functionunbind(){varh1=document.getElementById('h1');h1.onclick=false;//或者h1.onclick=null;}二、先有绑定函数，再次解除法1、先使用addEventListener绑定事件varh1=document.getElementById('h1');h1.addEventListener('click',clickx_,false);functionclickx_(){alert("点击到了");unclick();}2、再使用removeEventListener删除绑定事件functionunclick(){varh1=document.getElementById('h1');h1.removeEventListener('click',clickx_,false);}
javascriptjs字母大小写转换方法1、转换成大写：toUpperCase()2、转换成小写：toLowerCase()3、举例：（1）vara="aBcD";a=a.toUpperCase();alert(a);提示出来的就是ABCD（2）vara="accd";a=a.toUpperCase();alert(a);提示出来的就是ACCD（3）vara="aBcD";a=a.toLowerCase();alert(a);提示出来的就是abcd
在JavaScript中，对数值进行四舍五入操作的场景有以下几种：向上取整：ceil向下取整：floor四舍五入：round固定精度：toFixed固定长度：toPrecision取整：parseInt、位运算本文将对这6个API进行简单的讲解和总结。1、向上取整：ceilceil是`天花板`的意思，表示在一个数值之上，且距离该数最近的整数。ceil是Math对象的静态方法，需要传递一个参数，其调用方法如下：Math.ceil(12.34);//13Math.ceil(12.68);//132、向下取整：floorfloor是`地板`的意思，表示在一个数值之下，且距离该数最近的整数。floor是Math对象的静态方法，需要传递一个参数，其调用方法如下：Math.floor(12.34);//12Math.floor(12.68);//123、四舍五入：roundround的作用是对一个浮点数进行四舍五入，并保留整数位。round也是Math对象的静态方法，也需要传递一个参数，其调用方法如下：Math.round(12.34);//12Math.round(12.54);//134、固定精度：toFixedtoFixed和上面三个方法不同，它是Number原型上实现的一个方法，其作用是对一个浮点数进行四舍五入并保留固定小数位。toFixed需要传递一个参数，其调用方式如下：100.456001.toFixed(2);//100.46100.456001.toFixed(3);//100.4565、固定长度：toPrecisiontoPrecison也是Number原型上实现的一个处理浮点数的方法，和toFixed不同的是，它是对一个浮点数进行四舍五入并保留固定长度的有效数字，包括整数部分。99.456001.toPrecision(5);//99.456100.456001.toPrecision(5);//100.466、取整：parseIntparseInt是全局对象window上的一个方法，其作用是对一个可转换的数值取整，分为以下两种情况：1.将字符串数值转化为Number整数，对字符串的每一个字符进行转化，直到遇到不可转化的字符（包括小数点）停止。2.对浮点类型数值取整，忽略小数部分，不做四舍五入处理//字符串数值parseInt('100');//100parseInt('100axt');//100parseInt('100xh20');//100parseInt('100.78');//123//Number类型parseInt(100.12);//100parseInt(100.78);//1007、取整：位运算|0 ：和0进行按位或操作，原值不变~~ ：两次按位非操作得到的也是原值>>0：右移0位<<0：左移0位>>>0：无符号右移0位这些位运算符在实现取整操作时，会表现出一些共同的特征：对于Number类型来说，直接应用位操作，和parseInt得到的结果几乎一样；对于其他类型，内部会先通过Number()将其转换为一个数值，然后再应用位操作。对特殊NaN和Infinity值应用位操作时，这两个值都会被当成0来处理。对于Number类型，直接应用位运算。~~100.12;//100100.78|0;//100100.45>>0;//100100.50<<0;//100100.96>>>0;//100对于其他类型，先使用Number()转换为数值类型，再进行位运算。~~'100.12'//100，Number('100.12')==100.12'100.50'>>0;//100，Number('100.50')==100.50'100.96'<<0;//100，Number('100.96')==100.96~~'abc'//0,Number('abc')==NaN'12abc'>>0;//0,Number('12abc')==NaNundefined|0;//0,Number(undefined)==NaN~~null;//0,Number(null)==0true>>0;//1,Number(true)==1false>>0;//0,Number(false)==0[]<<0;//0,Number([])==0~~NaN;//0Infinity>>>0;//0位运算作用于最基本的层次上，即按内存中表示数值的位来操作数值。位运算能取整的原因是：ECMAScript中的数值以64位双精度浮点数存储，但位运算只能作用于整数，因此要先将64位的浮点数转换成32位的整数，然后再进行位运算，最后再将计算结果转换成64位浮点数存储。
Array是javascript中经常用到的数据类型。javascript的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据。本文主要讨论javascript中数组的声明、转换、排序、合并、迭代等等基本操作。创建数组和数组检测1、使用Array构造函数创建数组。//创建一个空数组varcars=newArray();//创建一个指定长度的数组varcars=newArray(20);//向构造函数传递数组项varcars=newArray('Mercedes-benz','BMW','Audi');这里要注意的是，当只传递一个参数给Array构造函数时，如果参数是数字则会创建一个指定长度的数组，如果参数是一个字符串则创建一个只包含该字符串的长度为1的数组。varcars=newArray(1);//[undefined×1]varcars=newArray('BMW');//["BMW"]另外使用Array构造函数创建数组时也可以省略掉new操作符，和上面的一样只是去掉new关键字即可，这里不做演示。2、使用数组字面量法创建数组这种方法使用一对方括号'[]'表示数组，直接把数组项书写在方括号中，多个数组项之间用逗号','隔开。注意：为避免兼容性问题请不要在最后一个项后面添加‘,’。//创建一个空数组varcars=[];//创建一个包含3个项的数组varcars=['Mercedes-benz','BMW','Audi'];在读取和设置数组的值时，只需通过方括号提供相应项的索引即可varcars=['Mercedes-benz','BMW','Audi'];console.log(cars[0]);//输出“Mercedes-benz”cars[2]='Jeep';//把Audi修改为Jeepcars[3]='Audi';//增加第四项Audi通过数组的length属性可读取数组的长度，但是该属性不是只读的，通过修改该属性可以变更数组的长度。如果新length小于原length则会删掉原数组中多余的数组项；若新length大于原length则数组中仍保持原来的数组项，但是length被增加到了新length,当访问这些不存在的项时会返回undefined。varcars=['Mercedes-benz','BMW','Audi'];console.log(cars.length)//console.log(cars)//["Mercedes-benz","BMW","Audi"]cars.length=2;console.log(cars)//["Mercedes-benz","BMW"]cars.length=4;console.log(cars)//["Mercedes-benz","BMW"]cars//["Mercedes-benz","BMW",undefined×2]3、检测数组有两种方法可以检测某个对象是否为数组valueinstanceofArray和Array.isArray(value)。Array.isArray()方法是ES5中新增的方法，其优势在于当页面中的多个框架间传递数组时，仍可正确返回数据类型。数组转换toString()方法可以返回由数组中项组成的字符串，项与项之间由“,”连接。当进行转换时会调用数组中每个项的toString()方法；toLocaleString()会返回与tostring类似的结果，只不过其调用的是数组中每项的toLocaleString()；valueOf会返回数组本身；join()函数接受一个字符串类型的参数，返回之类似tostring()，不同之处在于该函数使用传递给他的参数作为数组项之间的连接符。队列和栈通过push()和pop()函数可实现LIFO（Last-in-first-out）。push()方法接收任意数量的参数，把它们逐个添加到当前数组的末尾，返回修改后数组的长度。而pop()方法则从数组末尾一处最后一项2，减少数组的length值，然后返回数组移除的项。varcars=newArray();cars.push('Mercedes-benz','BMW');//console.log(cars);//["Mercedes-benz","BMW"]cars.push('Audi');//console.log(cars);//["Mercedes-benz","BMW","Audi"]cars.pop();//"Audi"console.log(cars);//["Mercedes-benz","BMW"]与pop()类似，还有shift()方法，不同之处在于，shift()从数组的前端移除项。shift配合push使用可以实现FIFO(First-In-First-Out)。varcars=newArray();cars.push('Mercedes-benz','BMW');//console.log(cars);//["Mercedes-benz","BMW"]cars.push('Audi');//console.log(cars);//["Mercedes-benz","BMW","Audi"]cars.shift();//"Mercedes-benz"console.log(cars);//["BMW","Audi"]合并&拼接concat()该方法会基于当前数组中的所有项创建一个新数组，先创建一个当前数组的副本，然后将接受到的参数添加到这个副本的末尾，最后返回新构建的数组。如果没有为方法提供参数，则会仅复制当前数组并返回该副本。传递给concat()的参数可以是一个或多个数组，该方法会将这些数组中的项都添加到新构建的结果数组中。如果传递的参数不是数组，这些值会被简单的添加到结果数组的末尾处。splice()上面提到的方法都是在数组的结尾或头部进行操作，splice()不同，它可用于在数组的任意位置删除指定数量的项并在当前位置插入新项。删除任意数量的项，需指定两个参数：第一个参数指定要删除的第一个项的位置，第二个参数是要删除的项数。如splice(0,2)会删除当前数组的前两项。插入任意数量的项，需指定三个参数：第一个参数指定要插入的第一个项的位置，第二个参数是0，第三至n个参数是需要插入的任意的项。如splice(2,0,'a','b')替换任意数量的项，需指定三个参数：第一个参数指定需替换的第一个项的位置，第二个参数指定需替换的项的个数，第三个以后的参数为要替换的新项。如splice(2,2,'a','b')varcars=['Mercedes-benz','BMW','Audi'];cars.splice(0,1);//['BMW','Audi'];cars.splice(0,0,"Mercedes-benz");//["Mercedes-benz","BMW","Audi"]cars.splice(2,1,"Tesla");//["Mercedes-benz","BMW","Tesla"]项的位置ES5中提供了两个位置方法indexOf()和lastIndexOf()。这两个方法都接收两个参数，第一个参数为要查找的项，第二个参数为在数组中查找时的起点位置。这两个方法的唯一区别在于indexOf由前往后查找，lastindexof是由后往前查找。它们都返回要查找的项在数组中的位置，如果没找到则返回-1。在比较参数是否与数组中的项相等时是使用全等操作符（===）。varcars=['Mercedes-benz','BMW','Audi','Tesla'];cars.indexOf('BMW');//cars.indexOf('bmw');//-1cars.indexOf('BMW',1);//cars.indexOf('BMW',2);//-1varcars=['Mercedes-benz','BMW','Audi','Tesla'];cars.lastIndexOf('BMW');//cars.lastIndexOf('bmw');//-1cars.lastIndexOf('BMW',0);//-1cars.lastIndexOf('BMW',2);//数组排序实际应用中经常会遇到要对数组进行排序的情况，javascript中有两个可以直接用来排序的法：reverse()和sort()。一个用来反转数组排序，另一个用来排序。varcars=['Mercedes-benz','BMW','Audi','Tesla'];varnumbers=[1,2,3,14,15,16];cars.sort();//["Audi","BMW","Mercedes-benz","Tesla"]numbers.sort();//[1,14,15,16,2,3]cars.reverse();//["Tesla","Mercedes-benz","BMW","Audi"]numbers.reverse();//[3,2,16,15,14,1]reverse()方法可以反转数组中的项。sort()方法在排序时会调用较数组中各项的toString()然后进行比较，所以在对numbers排序后，数组项“16”排在了"2"和“3”前面。由此可见，默认情况下sort()在排序时并不总是如人所愿。其实sort方法还可以接收一个比较函数作为参数以干预sort()的排序行为。比较函数接受两个参数，第一个参数应该位于第二个参数前则返回负数，如果两个参数相等返回0，如果第一个参数应该位于第二个参数后面则返回正数。numbers.sort(compare);//[1,2,3,14,15,16]functioncompare(item1,item2){returnitem1-item2;}数组迭代ES5中定义了迭代数组的方法，每个方法都接受两个参数，第一个参数为要在每个项上执行的函数，第二个参数为作用域对象（可选）。传入这些方法的函数接受3个参数：数组中的项、该项在数组中的索引、数组本身。every()对数组中的每个项执行给定函数，如果每项都返回true则返回true。some()对数组中的每个项执行给定函数，如果任何一项返回true则返回true。filter()对数组中的每个项执行给定函数，返回所有返回值为true的项组成的数组。map()对数组中的每个项执行给定函数，返回每个数组项的执行结果组成的数组。forEach()对数组中的每个项执行给定函数。varcars=['Mercedes-benz','BMW','Audi','Tesla'];cars.every(function(item,index,arr){returnitem.length>4});//falsecars.some(function(item,index,arr){returnitem.length>4});//truecars.filter(function(item,index,arr){returnitem.length>4});//["Mercedes-benz","Tesla"]cars.map(function(item,index,arr){return'New-'+item});//["New-Mercedes-benz","New-BMW","New-Audi","New-Tesla"]cars.forEach(function(item,index,arr){//code});reduce()和reduceRight()会逐个遍历数组中的每个项，并用给定函数将前两项的计算结果作为基础参与下一个项的计算，依次递归，直至结束。reduceRight与reduce的不同之处仅仅在于递归顺序的不同，reduceRight是从结尾向前递归。varnumbers=[1,2,3,4,5,6,7];varsum=numbers.reduce(function(pre,cur,index,arr){returnpre+cur;});console.log(sum);//总结javascript中有很多对数组进行操作的方法，熟练使用它们非常有助你提高写代码的速度和代码执行的效率（一般情况下，要尽量避免自己实现JS已有的方法），需要注意的是部分方法是ES5中新增的，使用时需考虑浏览器支持情况。
本文章是以prototype原型的方式，给string字符串类型添加方法，用于实现颜色值格式的转换。如果你不用原型方法，那么你只要借鉴实现方法就好了。RGB转换为16进制String.prototype.colorHex=function(){//RGB颜色值的正则varreg=/^(rgb|RGB)/;varcolor=this;if(reg.test(color)){varstrHex="#";//把RGB的3个数值变成数组varcolorArr=color.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(",");//转成16进制for(vari=0;i<colorArr.length;i++){varhex=Number(colorArr[i]).toString(16);if(hex==="0"){hex+=hex;}strHex+=hex;}returnstrHex;}else{returnString(color);}};使用方法："rgb(255,255,255)".colorHex();//#ffffff16进制转换为RGBString.prototype.colorRgb=function(){//16进制颜色值的正则varreg=/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;//把颜色值变成小写varcolor=this.toLowerCase();if(reg.test(color)){//如果只有三位的值，需变成六位，如：#fff=>#ffffffif(color.length===4){varcolorNew="#";for(vari=1;i<4;i+=1){colorNew+=color.slice(i,i+1).concat(color.slice(i,i+1));}color=colorNew;}//处理六位的颜色值，转为RGBvarcolorChange=[];for(vari=1;i<7;i+=2){colorChange.push(parseInt("0x"+color.slice(i,i+2)));}return"RGB("+colorChange.join(",")+")";}else{returncolor;}};使用方法："#fff".colorRgb();//rgb(255,255,255)"#ffffff".colorRgb();//rgb(255,255,255)
本地图片字节大小本地图片是比较简单的，使用FileApi即可<inputtype="file"id='file'multiple/><br/><script>document.getElementById("file").addEventListener("change",selectFile,false);functionselectFile(e){varfiles=e.target.files;console.log(files[i].size);}</script>宽高需要使用FileReader来宽高dataurl，然后使用Image来获取宽高。<inputtype="file"id='file'multiple/><br/><script>document.getElementById("file").addEventListener("change",selectFile,false);functionselectFile(e){varfiles=e.target.files;varf=files[0];varreader=newFileReader();reader.onload=(function(theFile){returnfunction(e){varimg=newImage();img.src=e.target.result;img.onload=function(){console.log(img.width);console.log(img.height);};};})(f);reader.readAsDataURL(f);}</script>网络图片字节大小通过fetch请求获取字节大小，在这里获取头信息Content-Length为空，需要使用blob数据中的size。<spanid='output'></span><br/><imgid="preview"width="300"/><script>fetch('/images/gzjzz2.png').then(function(res){returnres.blob()}).then(function(data){document.getElementById("output").innerHTML=`${data.size}bytes`})document.getElementById("preview").src='/images/gzjzz2.png'</script>宽高只需要使用Image即可<spanid='output'></span><br/><imgid="preview"width="300"/><script>varimg=newImage();img.src='/images/gzjzz2.png';img.onload=function(){content=`宽：${img.width}高：${img.height}`document.getElementById("output").innerHTML=content;};document.getElementById("preview").src='/images/gzjzz2.png'</script>
/***防抖函数(可用于防止重复提交),就是指触发事件后在n秒内函数只能执行一次*节流函数,就是指连续触发事件但是在n秒中只执行一次函数。节流会稀释函数的执行频率**@paramfunc执行函数*@paramtime执行时间间隔*@paramisDebounce是否防抖或者节流*@paramctxevent*/constdebounce=(func,time,isDebounce,ctx)=>{vartimer,lastCall,rtn;//防抖函数if(isDebounce){rtn=(...params)=>{if(timer)clearTimeout(timer);timer=setTimeout(()=>{func.apply(ctx,params);},time);};//节流函数}else{rtn=(...params)=>{constnow=newDate().getTime();if(now-lastCall<time&&lastCall)return;lastCall=now;func.apply(ctx,params);};}returnrtn;};exportdefault{name:'Debounce',abstract:true,props:{time:{type:Number,default:800,},events:{type:String,default:'click',},isDebounce:{type:Boolean,default:true,},},created(){this.eventKeys=this.events.split(',');this.originMap={};this.debouncedMap={};},render(){constvnode=this.$slots.default[0];this.eventKeys.forEach(key=>{consttarget=vnode.data.on[key];if(target===this.originMap[key]&&this.debouncedMap[key]){vnode.data.on[key]=this.debouncedMap[key];}elseif(target){this.originMap[key]=target;this.debouncedMap[key]=debounce(target,this.time,this.isDebounce,vnode);vnode.data.on[key]=this.debouncedMap[key];}});returnvnode;},};使用方法：<Debounce:time='200'><el-button@click.native="handleUserLogin">登录</el-button></Debounce>main.js//防抖or节流importDebouncefrom'@/utils/debounce'Vue.component('Debounce',Debounce)
/***判断当前环境是否是微信环境*/functionisWeixin(){varua=navigator.userAgent.toLowerCase();if(ua.match(/MicroMessenger/i)=="micromessenger"){returntrue;}else{returnfalse;}}
/***判断是在手机端|平板端|PC端*@returns0：手机端1：PC端2：平板端*/functionos(){varua=navigator.userAgent;isWindowsPhone=/(?:WindowsPhone)/.test(ua),isSymbian=/(?:SymbianOS)/.test(ua)||isWindowsPhone,isAndroid=/(?:Android)/.test(ua),isFireFox=/(?:Firefox)/.test(ua),isChrome=/(?:Chrome|CriOS)/.test(ua),isTablet=/(?:iPad|PlayBook)/.test(ua)||(isAndroid&&!/(?:Mobile)/.test(ua))||(isFireFox&&/(?:Tablet)/.test(ua)),isPhone=/(?:iPhone)/.test(ua)&&!isTablet,isPc=!isPhone&&!isAndroid&&!isSymbian;if(isAndroid||isPhone){return0}elseif(isPc){return1}elseif(isTablet){return2}}
/***金额大写*@paramprice要转换大写的金额*/functiondigitUppercase(price){letfraction=['角','分'];letdigit=['零','壹','贰','叁','肆','伍','陆','柒','捌','玖'];letunit=[['元','万','亿'],['','拾','佰','仟']];lethead=price<0?'欠':'';price=Math.abs(price);lets='';for(leti=0;i<fraction.length;i++){s+=(digit[Math.floor(price*10*Math.pow(10,i))%10]+fraction[i]).replace(/零./,'');}s=s||'整';price=Math.floor(price);for(leti=0;i<unit[0].length&&price>0;i++){letp='';for(varj=0;j<unit[1].length&&price>0;j++){p=digit[price%10]+unit[1][j]+p;price=Math.floor(price/10);}s=p.replace(/(零.)*零$/,'').replace(/^$/,'零')+unit[0][i]+s;}returnhead+s.replace(/(零.)*零元/,'元').replace(/(零.)+/g,'零').replace(/^整$/,'零元整');}
中国互联网举报中心