CSS部分框边倾斜clip-path:polygon(12%0,100%0,100%100%,0100%);禁止点击事件/鼠标事件“穿透”div*{pointer-events:none;/*链接,点击事件,没有效果*/}用于控制元素在移动设备上使用滚动回弹效果。main{-webkit-overflow-scrolling:touch;}可以解决IOS中使用overflow:auto形成的滚动条,滚动不流畅。文字渐变效果.text-gradient{background-image:linear-gradient(135deg,deeppink,deepskyblue);-webkit-背景剪辑:文本;颜色:透明;}css三角形#triangle-up{宽度:0;高度:0;左边框:50px实心透明;border-right:50pxsolidtransparent;border-bottom:100pxsolidred;}实现圆弧裁剪-path:ellipse(80%60%at50%40%);JS部分JavaScript中检测数组的方法(一),typeof操作符这个方法对一些常用的类型检查没有问题,但是它判断array和null对于object(二),instanceof操作符这个操作符就是检测对象的原型链是否指向构造函数的原型对象(3),对象的构造函数属性constarr=[]console.log(arr.constructor===Array)//true(4),Object.prototype.toStringconstarr=[]console.log(Object.prototype.toString.call(arr)==='[objectArray]')//true(5),Array.isArray()常用的字符串操作字符串转换为String()stringsplitsplit()stringreplacereplace()getlengthlengthquerysubstringindexOf返回字符串或字符串在指定位置的编码stringtoLowerCasetoUpperCase去除空格trim()用于删除字符串前后的空格9号中三者的区别如下:(1)slice(),参数可以为负数,负数表示从字符串的最后一个位置切割到对应的结束位置(2)substring(),参数不能为负数,从第一个位置切割字符串到第二个位置(3)substr(),参数可以是一个负数,第一个参数为起始位置,第二个参数为切割长度字符串去重conststr='11122223333'constuniqueStr=[...newSet(str)].join('')常用数组操作1.Array.map()这个方法是对数组中的每个元素调用一个提供的函数,结果作为一个新数组返回,不改变原来的数组2.Array.forEach()这个方法是将数组中的每个元素执行提供的函数传入,没有返回值。请注意,它与map方法不同。3.Array.filter()该方法将满足条件的元素作为新数组返回。4.Array.every()This方法判断数组的所有元素,返回一个布尔值。如果所有元素都满足判断条件,则返回true,否则返回false5。Array.some()这个方法判断数组的所有元素,返回一个布尔值。如果有元素满足判断条件则返回true,所有元素都不满足则返回falsearray8末尾的元素,Array.shift()删除数组9的第一个元素,Array.pop()删除数组10的最后一个元素,Array.unshift()将元素11添加到数组的前面,Array.isArray()判断是否为数组12,Array.concat()数组拼接13,Array.toString()数组转成字符串14,Array.join()数组转成字符串,并使用第一个参数作为connector15,Array.splice(起始位置,删除个数,元素)其中reduce的方法为:arr.reduce(callback,[initialValue])跳过第一个index如果提供了initialValue,则从index0开始callback(执行数组中每个值的函数,包括四个参数)1.previousValue(上一次回调调用返回的值,或者提供的初始值(initialValue))2.currentValue(数组中当前处理的元素)3.index(当前元素在数组中的索引)4.array(调用reduce的数组)initialValue(作为第一次调用callback的第一个参数。)如果不提供initialValue,reduce将从索引1开始。回调方法,数组去重:constarr=[1,2,3,1,2,3]constuniqueArr=[...newSet(arr)]普通对象方法1,Object.assign()用于克隆,两个参数,将第二个对象赋值给第一个2.Object.is()用于判断两个值是否为same//注意这个函数和==运算符不同,不会强制转换任何类型,应该更类似于===,但是值得注意的是它会把+0和-0当成不同的值3、Object.keys()用于返回对象的可枚举属性和方法的名称,返回一个属性或方法名的String数组。4.Object.defineProperty()劫持变量的set和get方法,给对象添加属性,或者修改已有属性的特性vara={};Object.defineProperty(a,'name',{value:'kong',enumerable:true//属性是否可枚举})5.Object.defineProperties()可以添加多个属性,对应Object.defineProperty(),6.isPrototypeOfffunctiona(){}varb=newa();console.log(a.prototype.isPrototypeOf(b));//trueAndroid监听可见区域变化,如果(/Android/gi.test(navigator.userAgent)){窗口。addEventListener('resize',function(){if(document.activeElement.tagName==='INPUT'||document.activeElement.tagName==='TEXTAREA'){window.setTimeout(function(){document.activeElement.scrollIntoViewIfNeeded();},0);}});};在vue中平滑滚动到某个位置this.$refs.rule.scrollIntoView({block:'start',behavior:'smooth'})appendparameterstoURL/***AppendparameterstoURL*@functionstringifyUrlArgs*@param{string}url-URL路径*@param{object}params-参数对象*@return{string}conststringifyUrlArgs=(url,params)=>{url+=(/\?/).test(url)?'&':'?url+=Object.keys(params).map(key=>`${key}=${params[key]}`).join('&')returnurl}解析URL参数/***解析URL参数*@functionparseUrlArgs*@param{string}url-字符串*@return{object}exportconstparseUrlArgs=url=>{constarr=url.match(/([^?=&]+)(=([^&]*))/克)||[]constargs=arr.reduce((a,v)=>{a[v.slice(0,v.indexOf('='))]=v.slice(v.indexOf('=')+1)returna},{})returnargs}好用JavaSrcipt库和模块(包)日期时间处理库1、monent.js2、day.jsday比monent和很多高精度数学运算number-precisionNP更轻量。strip(num)//将数字剥离到最右边的数字NP.plus(num1,num2,num3,...)//加法,num+num2+num3,至少需要两个数。NP。minus(num1,num2,num3,...)//减法,num1-num2-num3NP.times(num1,num2,num3,...)//乘法,num1*num2*num3NP.divide(num1,num2,num3,...)//除法,num1/num2/num3NP.round(num,ratio)//舍入一个num基于ratio实用程序库的berLodashlodash是一个JavaScript实用程序库,提供一致性,以及模块化、性能和附件等功能Lodash简化了JavaScript、数字、对象、字符串等。
