undefinedif判断优化1.最简单的方法：if判断让商品={phone:'手机',computer:'电脑',television:'电视机',gameBoy:'游戏机',}functionprice(name){if(name===commodity.phone){console.log(1999)}elseif(name===commodity.computer){console.log(9999)}elseif(name===commodity.television){控制台。log(2999)}elseif(name===commodity.gameBoy){console.log(3999)}}price('手机')//9999缺点：代码太长，对维护阅读不友好2.更好的方法：Switchletcommodity={phone:'手机',computer:'电脑',television:'电视',gameBoy:'游戏机',}constprice=(name)=>{switch(name){casecommodity.phone:console.log(1999)breakcasecommodity.computer:console.log(9999)breakcasecommodity.television:console.log(2999)breakcasecommodity.gameBoy:console.log(3999)break}}price('手机')//99993，更好的方法：策略模式策略模式使用了组合、委托、多态等技术和思想，可以有效避免多个条件选择语句。它对开闭原则提供了完美的支持，将算法封装在独立的策略中，使其易于切换、易于理解、易于扩展。constcommodity=newMap([['phone',1999],['computer',9999],['television',2999],['gameBoy',3999],])constprice=(name)=>{returncommodity.get(name)}price('phone')//1999的优化包括是ES7的新API。和indexOf不同的是includes直接返回布尔值，而indexOf返回索引值，数组和字符String都有includes方法。需求：我们实现一个身份认证方法，通过传入身份Id返回对应的验证结果传统方法functionverifyIdentity(identityId){if(identityId==1||identityId==2||identityId==3||identityId==4){return'您的身份合法，请通过！'}else{return'您的身份无效'}}includes优化函数verifyIdentity(identityId){if([1,2,3,4].includes(identityId)){return'您的身份合法，请通过！'}else{return'你的身份不合法'}}for循环在JavaScript中，我们可以使用for(),while(),for(in),for(of)几种循环，其实就是这三种for的效率(in)in循环极差，因为需要查询hashkey，所以尽量少用。for循环是最传统的语句，它以变量i作为索引对数组进行操作，以跟踪它被访问的位置。vararr=['a','b','c']for(vari=0;ix*x)需要注意的是箭头函数不绑定参数，但使用其余参数...来解决。//不能使用参数letfun1=(b)=>{console.log(arguments)}fun1(2,92,32,32)//UncaughtReferenceError:argumentsisnotdefined//使用剩余参数letfun2=(...c)=>{console.log(c)}fun2(3,82,32,11323)//[3,82,32,11323]Dom创建创建多个dom元素时，首先将元素追加到DocumentFragment，最后将DocumentFragment统一添加到页面中。常规方法；for(vari=0;i<1000;i++){varel=document.createElement('p')el.innerHTML=idocument.body.appendChild(el)}使用DocumentFragment优化多次appendvarfrag=document.createDocumentFragment()for(vari=0;i<1000;i++){varel=document.createElement('p')el.innerHTML=ifrag.appendChild(el)}document.body.appendChild(frag)更好方法：使用innerHTML赋值而不是构建dom元素varhtml=[]for(vari=0;i<1000;i++){html.push(''+i+'
')}document.body.innerHTML=html.join('')内存泄漏系统进程不再使用而没有及时释放的内存称为内存泄漏。当内存占用越来越高时，轻则影响系统性能，重则导致进程崩溃。内存泄露的原因全局变量1、未声明的变量、或者使用this（this指向window）创建的变量都会导致内存泄露){this.a="Actually,I'maglobalvariable"}fn()解决方法：避免创建全局变量，使用严格模式，在JavaScript文件头或函数的顶部加上usestrict。2.vue单页应用中，切换页面时不清除声明的全局变量这是首页
exportdefault{mounted(){window.test={//here全局窗口对象中引用了本页面的dom对象name:'home',node:document.getElementById('home')}}}解决方法：在页面卸载的时候顺便处理掉引用。destroyed(){window.test=null//页面卸载时解引用}Closure闭包导致内存泄漏的原因：闭包可以在函数中维护局部变量，使其无法被释放。functionfn(){vara="I'ma"returnfunction(){console.log(a)}}解决方法：在外部定义事件处理函数，释放闭包，或者定义事件处理函数的外部函数,删除对dom的引用。定时器或者事件监听因为项目中有些页面难免会遇到定时器或者事件监听的需求。但是在离开当前页面时，如果没有及时合理的清除定时器，会造成业务逻辑混乱，甚至应用卡顿。这时候需要清空定时器事件监听，即页面卸载（关闭）的生命周期函数，清空定时器。方法：{resizeFun(){this.tableHeight=window.innerHeight-document.getElementById('table').offsetTop-128},setTimer(){this.timer=setInterval(()=>{})},clearTimer(){//清除定时器clearInterval(this.timer)this.timer=null}},mounted(){this.setTimer()window.addEventListener('resize',this.resizeFun)},beforeDestroy(){window.removeEventListener('resize',this.resizeFun)this.clearTimer()}防抖与节流在前端开发的过程中，我们经常需要绑定一些持续触发的事件，比如resize、scroll、mousemove等，但是有时候我们并不想在事件不断触发的过程中如此频繁的执行函数。这时候就用到了防抖和节流。案例一：远程搜索需要通过接口动态获取数据。如果每次用户输入时都请求该接口，这是对带宽和性能的浪费。
