前言初衷：整理工作中常用的JavaScript技巧，分享给大家，希望对各位朋友有所帮助，提高工作中的开发效率。适合人群：前端初级开发，大佬绕道。1.函数参数默认值在Es6之前，如果我们要写参数默认值，需要在函数体中写一堆判断逻辑，而在Es6之后，新的参数默认值语法，我们来看看。functionperson(name,age,sex="male"){console.log(name,age,sex)//frogman24male}person("frogman",24)2.使用reduce之前的数组求和使用for循环来遍历求和，或者使用reduce方法求和，代码简洁。letnums=[1,22,31,4,56]letsum=nums.reduce((prev,cur)=>prev+cur,0)3.我们写判断的时候舍弃ifelse，我们会用ifelsebut当业务变大，有几个状态的时候，代码就太冗余了，那就简化一下吧。if(xxx=1){xxx="Enabled"}elseif(xxx=2){xxx="Disabled"}//...省略//废除上面的写法letoperation={1:"Enabled",2:"Disable"3:"Logout",4:"Modify"5:"Details"}xxx=operation[status]//代码简洁明了4.交换变量在Es6之前，我们必须使用第三个，当我们exchangevariablevalues一个变量，在Es6解构赋值的时候，我们可以非常快速的交换变量。让x=10；让y=20；[x,y]=[y,x];5.数组去重在Es6之前，我们使用for循环遍历或者indexOf来对数组进行去重，但是在Es6中出现了Set结构，非常方便。不了解Set结构的可以看我之前的文章《理解数据结构之Set，只要5分钟！》letarr=[1,1,2,434,2,1]console.log([...newSet(arr)])//124346.快速获取URL地址栏参数有时候我们想获取地址栏的参数，都是手写的方法。有一个Api实用方法来处理URL查询字符串。letparams=newURLSearchParams(location.search);params.get("xxx")//获取地址栏参数7.生成随机Id有些情况下我们希望获取随机的不重复的字符串，可以使用如下方法数学.random().toString(36).substr(2)8。获取对象的键值快速获取对象的键值letperson={name:"Frogman",age:24};console.log(Object.keys(person))//["name","age"]9.获取对象的值快速获取对象的值letperson={name:"frogman",age:24};console.log(Object.values(person))//["Frogman",24]10、Es6模板字符串表达式之前，我们使用+号来拼接字符串变量，这样拼接还可以，但是很容易拼接html标签很不爽，稍不注意就会报errorsymbol问题。在Es6中，模板字符串使用``，然后在${}中绑定变量，这让我们的开发非常方便。letname="Frogman"console.log(`hello${name}`)console.log(`
${name}
`)11.获取对象中指定的值使用对象解构得到object的值非常简洁，不需要像传统方式那样使用。获取constperson={name:"frogman",age:24,sex:"male"}的语法；let{age,sex}=personconsole.log(age,sex)//24male12.字符串快速转数组不再使用字符串拆分方法，使用展开运算符快速转数组。让str="abcdefg"控制台。log([...str])//["a","b","c","d","e","f","g"]13.强烈建议使用三元运算判断值if只有两种状态，舍弃ifelse。让status=1;status=status==1?“男”：“女”14.??操作员？？只有在前一个值未定义或为空时才会执行运算符。它在某些情况下在工作中使用。我们来看看。让状态=未定义；让文本=状态？？"None"console.log(text)//否15.?.操作员？。Operator有时候在处理对象的时候很有用，看下面的例子，person.name返回undefined，然后调用toString就会报错。这时，使用?。运算符不会导致错误。这？。运算符只会在值未定义时调用toString方法。letperson={}console.log(person.name.toString())//错误console.log(person.name?.toString())//undefined16.~~双重非运算符~~双重非运算符可以用于四舍五入。console.log(~~4.3)//417.使用Es6的新方法Object.assign来合并对象。如果合并对象中有重复值，后面会覆盖前面，可以接收无限个参数。工作中也经常用到。letperson={name:"Frogman",age:24}letobj=Object.assign({},person)console.log(obj)//{name:"Frogman",age:24}18.Array数组中的值是否满足要求当前方法只要数组中有满足要求的值就返回true，否则返回false。letlist=[1,2,2,2,2,2]letres=list.some(item=>item>1)console.log(res)//true19。数组中的所有值是否满足我们之前使用的要求用于遍历判断当前数组中的值是否满足要求，并声明一个变量累加，直接使用every全部满足时返回true要求，否则返回falseletlist=[1,2,2,2,2,2]letres=list.every(item=>item>1)console.log(res)//false20.随机打乱数组的顺序有时候在我们的场景中，需要打乱一个数组的顺序。letlist=[1,2,'Frogman',1,34,3,12]letres=list.sort(()=>Math.random()-0.5)console.log(res)21.事件委托之前我们有100个li元素，我们必须绑定一个onclick事件，所以性能不是很好，我们可以通过事件委托来实现。ul.on("click","li",e=>{....omitoperation})22.检查值是否为数组letarr=[]console.log(Array.isArray(arr))//trueconsole.log(Object.prototype.toString.call(arr)=="[objectArray]")//true23。伪数组转换为真实数组。伪数组不能调用真实数组对象的方法，所以伪数组必须转成True数组，得到的js元素就是伪数组。document.querySelectAll("div")//NodeList[div,div,div,div][...document.querySelectorAll('div')]//转换为真正的数组Array.from(document.querySelectorAll('div'))//转为真正的数组24.快速获取时间戳console.log(+newDate())console.log(Date.now())25.获取一个值的下标Es6之前我们只知道使用indexOf方法获取下标。Es6之后还有一个方法。如果找到该值，则返回当前值的下标，没有找到-1。letcolors=["red","blue","green"]functiongetIndex(val){returncolors.findIndex(i=>i==val)}getIndex("blue")//126.将数组转换为对象在某些情况下，需要将数组转换为对象，这是可以做到的。letperson=["frogman",24,"male"]letobj={}person.forEach(item=>(obj[item]=item))27.是奇数还是偶数letnum=val=>val%2==0;num(10)//tureevennum(1)//falseodd28.检测当前页面是否隐藏监听当前页面是否隐藏页面隐藏，切换页面时显示true，false打开。一般主要用于工作中判断用户在页面停留的时间。document.addEventListener("visibilitychange",function(){console.log(document.hidden);});29、去除当前数组中的假值，过滤掉数组中的假值。letlist=["",false,1,null,undefined,"frogman",24]letres=item=>item.filter(Boolean)console.log(res(list))30.this指向有时我们不'想要this是this值，所以需要改变this的方向，改变this的方向有很多方法，箭头函数，bind，apply，call，我这里演示一个，大家可以选择哪个方法根据不同的业务场景来使用！letperson={name:"Frogman"}ul.onclick=(function(e){console.log(this.name)}).bind(person)31.判断地址是否有效functionIsUrl(val){try{if(newURL(val)){returntrue}}catch(e){returnfalse}}IsUrl("https://www.baidu.cn")//trueIsUrl("www.baidu.cn")//假32。使用Map让数组直接返回结果。有时我们在处理数组的时候，希望直接返回处理后的结果，而不是重新组装一个数组。这时，Map登场了。letperson=[10,20,30]functionfn(item){returnitem+1}letres=person.map(fn)console.log(res)//[11,21,31]感谢阅读，这样的as如果觉得有帮助，请关注并收藏。如果你觉得有帮助，可以关注前端娱乐圈公众号，我每天都会为你推送小知识。也可以加我微信加我好友，可以和我聊天或者拉你进技术交流群