工作随笔

86 阅读1分钟

1.缩进两个字符:text-indent:2em

2.座机正则 /^[\d]{3,4}-[\d]{7,8}d6|^d{6}/

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)

链接:juejin.cn/post/712727…