43.赋值表达式和运算符a+=b的组合等价于a=a+b。可以这样使用的运算符包括*=、/=、%=、+=、-=、<<=>>=、>>>=、&=、^=、|=、**=44、reactsetState方法立即生效this.state={count:0}this.setState((prevState)=>{return{count:0}})this.setState((prevState)=>{return{count:prevState.count+1}//最后一个setState的返回是count为0,当前返回1})this.setState((prevState)=>{return{count:prevState.count+2}//当前返回3})上面我们设置了三次State,但实际上组件只会重新渲染一次,而不是三次;这是因为在React.js内部,JavaScript事件循环中消息队列的同一个消息中的setState会被合并,然后重新渲染组件。\r?\n|\r/).length46,查询npm插件使用情况https://www.npmjs.com/package/package47,电话号码脱敏phoneHide(phone){varreg=/(\d{3})\d*(\d{4})/varhiddenPhone=phone.replace(reg,"$1****$2")returnhiddenPhone}48.forEach跳出循环Array.forEach(item=>{if(true){thrownewerror()})另外,every和some可以使用return终止循环49.添加、删除和修改url参数1.将参数提取为object格式(qs库,url-parse)2.改变objects3.Objects然后转换成参数格式拼接到url50,下发返回处理树数据constselectFormat=items=>{returnitems.map(({title,value,children,id,name})=>{consthasChildren=Array.isArray(children)constselectKey=UUID()return{title:title||name,value:hasChildren?selectKey:value||id,children:hasChildren?selectFormat(children):[],key:selectKey,}})}字符串.ivu-table-cell>span:empty:after{content:'暂无数据';字体大小:12px;color:#ccc;}52.命令行工具#在~/.zshrc末尾添加如下内容#重启命令行或执行`source~/.zshrc`生效#输入`code`命令打开代码在任何地方用VSCode,比如输入`code.`打开当前目录aliascode="/Applications/Visual\Studio\Code.app/Contents/Resources/app/bin/code"#输入`history`查询历史操作命令aliashistory="fc-il1"#代码管理别名命令#切换到qa分支,更新qa为最新代码aliasreset-qa="gitfetch--all&&gitcheckoutqa&&gitreset--hardupstream/qa"#切换到生产分支并将生产更新到最新的代码别名reset-production="gitfetch--all&&gitcheckoututproduction&&gitreset--hardupstream/production"#推送代码,自动创建一个MergeRequest到qa分支,Pipeline成功后会自动mergealiaspush-qa="gitpushorigin-omerge_request.create-omerge_request.merge_when_pipeline_succeeds-omerge_request.target=qa"53,复制文本//复制文本exportconstcopyText=(text,cb)=>{if(window.clipboardData&&window.clipboardData.setData)returnwindow.clipboardData.setData('Text',text)//IE兼容函数save(e){e.clipboardData.setData('text/plain',text)e.preventDefault()}document.addEventListener('copy',save)try{if(!document.execCommand('copy'))thrownewError('copyfailed')}catch(err){window.prompt('Ctrl+Ccopyclipboard',text)}finally{document.removeEventListener('copy',save)cb&&cb()}}54.【问题记录】如何在不阻塞或等待加载的情况下加载iframehttps://stackoverflow.com/questions/53583045/how-to-load-an-iframe-没有血腥cking-onload-or-waiting-for-onload55,网上人们常用的英文缩写PM-ProductManager-ProductManager-ProjectManager-项目经理RD-ResearchandDevelopment-R&DFE-Front-End-前端;Web前端研发;OP-Operations-运维UI-UserInterface-用户界面UID-UserInterfaceDesign-用户界面设计ID-InteractionDesign-交互设计UE或UX-UserExperience-用户体验UED-UserExperienceDesign-用户体验设计UCD-UserCenteredDesign-用户中心设计DBA-DatabaseAdministrator-数据库管理员文档PRD-ProductRequirementsDocument-产品需求文档BRD-BusinessRequirementsDocument-业务需求文档MRD-MarketRequirementsDocument-市场需求文档FSD-FunctionalSpecificationsDocument-功能细节思维过程判断两个区间是否有交集。情况太多,很容易错过情况。曲线救国。如果两个区间没有交集,先排序,然后比较大小为57。生产环境强制打开VueDevtoolshttps://blog.eh5。me/force-enable-vue-devtools/58、前端大文件上传前端大文件上传网上大部分文章都给出了解决方案,核心是使用Blob.prototype.slice方法,类似于数组slice方法,调用的slice方法可以返回原始文件的一个切片,这样我们就可以把文件按照预设的最大切片数切分,然后利用http的并发同时上传多个切片时间,所以从原来的上传一个大文件变成了同时传输多个小文件切片,可以大大减少上传时间。此外,由于并发性,传输到服务器的顺序可能会发生变化,因此我们还需要记录每个分片的顺序。59、前端续传大文件的原理是前端/服务器需要记住上传的分片,这样下次上传可以跳过之前上传的部分。内存功能的实现有两种方式:1、前端使用localStorage记录上传切片的hash。服务端保存上传的切片2.hash,每次上传前前端从服务端获取上传的切片。第一是前端方案,第二是服务器,前端方案有个硬伤。如果换了浏览器就会失去记忆效果,所以这里选择后者。60.检测文件类型插件file-typenpmlink:file-type61,?。和??操作员?。operator如果对象不存在,就返回undefined//这种写法可以让代码更加健壮//Objectconsole.log(user.homeaddress?.country);//如果数组中不存在hobbies[3]的name属性,则报错user.hobbies[3].name//重写为user.hobbies?.[3].name??操作字符不返回undefined而是返回一个默认值constcountry=user.officeaddress?.country;console.log(country);//undefined需要返回默认值:constcountry=user.officeaddress?.country??“中国”;console.log(country);//China62,browserresendrequestFirefox找到请求,右键编辑重新发送,编辑请求数据点击send重新发送请求GoogleChrome右键->复制->复制为fetch,然后复制粘贴到控制台,修改,回车执行代码63,即使界面改正后,也不要相信任何后台操作返回所有页面。所有的操作都要做好64.waitOneSecondwaitOneSecond(){returnnewPromise(resolve=>{setTimeout(resolve,1000);});}65.IntersectionObserverIntersectionObserver接口(属于IntersectionObserverAPI)提供了异步观察的方法目标元素及其祖先元素的交集状态或顶级文档窗口(视口)方法。祖先元素和视口称为根。
