1.缩进两个字符:text-indent:2em
2.座机正则 /^[\d]{3,4}-[\d]{7,8}/
3.数组解构也可以用来进行值的互换,交换两个变量的值 [a,b] =[b,a]
4.判断是否存在 用可选链 ?. 空值合并运算符 '??'
5.object 是否含有某个属性 用('属性名')in object 数组 includes 字符串要用includes startsWith(), endsWith(), padStart(),padEnd(),repeat()等方法
6.节流:短期内触发1次
var isRuning = false;
function checkUsername(it) {
if (!isRuning) {
isRuning = true;
setTimeout(() => isRuning = false, 1000)
}
}
清除定时器:
this.$once('hook:beforeDestory',() => { clearInterval(timer) timer=null })
组件,使用keep-alive
let timer=setInterval(() => {
console.log('开启定时器') },1000)
this.$on('hook:activated',() => {
// 避免重复开启定时器
if(timer===null){
timer=setInterval(() => { console.log('开启定时器') },1000)
}
})
this.$on('hook:deactivated',() => { clearInterval(timer) timer=null }) }
7.数组去重
const arr = [1,1,3,3,4,4,98,8,89,8];
const setData = Array.from(new Set(arr));
console.log(setData);
8.数字判定Number.isFinite()和Number.isNaN()
9.对象的扩展运算符...用在解构赋值时,扩展运算符只能用在最后一个参数(otherFruits后面不能再跟其他参数)
10.Object原型上新增了assign()方法,用于对象新增属性或者多个对象合并,Object.assign(target, source1, source2);
注意: assign合并的对象target只能合并source1、source2中的自身属性,并不会合并source1、source2中的继承属性,也不会合并不可枚举的属性,且无法正确复制get和set属性(会直接执行get/set函数,取return的值)。
11.getOwnPropertyDescriptors()方法可以获取指定对象所有自身属性的描述对象,加上defineProperties()方法,可以完美复制对象,包括复制get和set属性。
12.Object.keys(),Object.values(),Object.entries()用来获取对象的所有键、所有值和所有键值对数组。
13.网上抄过来的深拷贝,目前暂时没发现问题
const deepClone = (obj, map = new WeakMap()) => {
if (obj instanceof Date) return new Date(obj);
if (obj instanceof RegExp) return new RegExp(obj);
if (map.has(obj)) { return map.get(obj); }
const allDesc = Object.getOwnPropertyDescriptors(obj);
const cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc);
map.set(obj, cloneObj);
for (const key of Reflect.ownKeys(obj)) {
const value = obj[key];
cloneObj[key] = value instanceof Object && typeof value !== 'function'
? deepClone(value, map) : value;
}
return cloneObj;
};
原文链接:https://juejin.cn/post/7133733538024652830
14.深拷贝简单使用const deepCopy = obj => JSON.parse(JSON.stringify(obj)) 可能有兼容性问题,
const wait = (ms) => new Promise((resolve)=> setTimeout(resolve, ms))
const asyncFn = async () => {
await wait(1000) console.log('等待异步函数执行结束')
}
asyncFn()
16.当别人的方法挂载在window上时候,公共方法去获取到这个的方法之后,用window上的eval('window.'+ 方法名)或者eval(‘方法名‘’),eval可以直接调用挂载window上方法名,这个方法名必须为字符串。
17.split() 把一个字符串分割成字符串数组; 语法:string.split(separator,limit)
**join()**用于把数组中的所有元素转换一个字符串; 语法:array.join(separator) separator:可选,指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。 var str = [123,456,789]; console.log(str.join('')); // 123456789
18.document.visibilitychange事件:判断页面可见性,也可以用于检测页面有没有使用hrefWeburlPlugin去重新开启容器。
19.多接口异步处理--主流程还是需要链式调用,promise.all容易出现接口全部不通过的问题
promise.then(async(res)=>{
this.xxx=res.data
const result= await this.getImgUrl();
if(result && result.data && result.data.key){
this.xxx.forEach((item)=>{
item.yyy = ${result.data.key}${item.imgUrl}
})
}
}); getImgUrl(){ return Promise('xxx',{},false) } 20.主流程里需要后端接口返回信息后进行处理,需要前端加等待层。(不要相信后端接口响应速度) 21.简单的拖动 document.querySelector("#idname").removeEventListener("touchmove",postion) document.querySelector("#idname").addEventListener("touchmove",postion) fuction postion(){ e.preventDefault(); let eHeight=document.documentElement.clientHeight-id高度; let moveRangY=event.clientY > eHeight ?eHeight : event.clientY < 6 ? 6:event.clientY; //给个最低位置 document.querySelector("#idname").style.top = moveRangY +"px"; }
22.# 原生获取下载进度百分比、上传附件百分比的事件。(onDownloadProgress与onUploadProgress)