当前位置: 首页 > Web前端 > JavaScript

ES6中的常用技巧

时间:2023-03-26 21:24:59 JavaScript

ES6中的常用技巧强制要求参数ES6提供了参数默认值机制,可以让你为参数设置默认值来防止这些参数在函数执行时被传入叫做。在下面的例子中,我们写了一个required()函数作为参数a和b的默认值。这意味着如果a或b的参数之一在调用时未传递值,则required()函数将被默认并抛出错误。constrequired=()=>{thrownewError('Missingparameter')};constadd=(a=required(),b=required())=>a+b;add(1,2)//3add(1)//错误:缺少参数。强大的reduce数组的reduce方法非常通用。它通常用于将数组中的每个项目减少为单个值。但是你可以用它做更多的事情。2.1使用reduce同时实现map和filter假设现在有一个数组,你想更新它的每一项(map的作用),然后过滤掉一部分(filter的作用)。如果先用map再用filter,需要遍历数组两次。在下面的代码中,我们将数组中的值加倍,并挑选出那些大于50的数字。注意我们如何非常高效地使用reduce来实现map和filter方法吗?常量数字=[10,20,30,40];constdoubledOver50=numbers.reduce((finalList,num)=>{num=num*2;if(num>50){finalList.push(num);}returnfinalList;},[]);翻倍超过50;//[60,80]2.2使用reduce代替map和filter如果你仔细阅读上面的代码,你应该能够理解reduce可以代替map和filter。2.3使用reduce匹配括号reduce的另一个用途是能够匹配给定字符串中的括号。对于包含括号的字符串,我们需要知道(和)的个数是否一致,以及(是否出现在)之前。在下面的代码中我们使用reduce来轻松解决这个问题。我们只需要先声明一个计数器变量,初始值为0。遇到时(计数器加一,遇到计数器减一)。如果左右括号个数匹配,则最终结果为0//Returns0ifbalanced.constisParensBalanced=(str)=>{returnstr.split('').reduce((counter,char)=>{if(counter<0){//在"("之前匹配")"returncounter;}elseif(char==='('){return++counter;}elseif(char===')'){return--counter;}else{//匹配了一些其他的charreturncounter;}},0);//<--计数器的起始值}isParensBalanced('(())')//0<--balancedisParensBalanced('(asdfds)')//0<--balancedisParensBalanced('(()')//1<--notbalancedisParensBalanced(')(')//-1<--notbalanced2.4统计数组中相同项的个数很多时候,你想在统计数组中重复项的个数则用一个对象来表示,那么就可以使用reduce方法来处理这个数组,下面的代码会统计每一种车的数量,然后用一个对象来表示总数。varcars=['宝马','奔驰','奔驰','特斯拉','宝马','丰田'];varcarsObj=cars.reduce(function(obj,name){obj[name]=obj[name]?++obj[name]:1;returnobj;},{});carsObj;//=>{BMW:2,Benz:2,Tesla:1,Toyota:1}reduce的其他用处实在是太多了,推荐阅读MDN上的相关代码示例。对象解构3.1移除不需要的属性有时你不想保留某些对象属性,可能是因为它们包含敏感信息或者只是太大了(justtoobig)。您可以枚举整个对象并删除它们,但实际上您可以简单地将这些无用的属性分配给变量,然后将您想要保留的有用部分作为剩余参数传递。在下面的代码中,我们希望删除_internal和tooBig参数。我们可以将它们分配给internal和tooBig变量,然后将其余属性存储在cleanObject中以备后用。让{_internal,tooBig,...cleanObject}={el1:'1',_internal:"secret",tooBig:{},el2:'2',el3:'3'};控制台日志(cleanObject);//{el1:'1',el2:'2',el3:'3'}3.2解构函数参数中的嵌套对象在下面的代码中,engine是嵌套在对象car中的对象。如果我们对引擎的vin属性感兴趣,可以使用解构赋值轻松获得。varcar={model:'bmw2018',engine:{v6:true,turbo:true,vin:12345}}constmodelAndVIN=({model,engine:{vin}})=>{console.log(model:${model}vin:${vin});}modelAndVIN(car);//=>model:bmw2018vin:123453.3MergeobjectsES6引入了扩展运算符(...)。它通常用于解构数组,但您也可以使用它来操作对象。接下来,我们使用展开运算符展开一个新的对象,第二个对象中的属性值覆盖第一个对象中的属性值。比如object2的b和c会改写object1的同名属性。letobject1={a:1,b:2,c:3}letobject2={b:30,c:40,d:50}letmerged={...object1,...object2}//展开并重新添加到mergedconsole.log(merged)//{a:1,b:30,c:40,d:50}Sets4.1使用Set实现数组去重在ES6中,由于Set只存储唯一值,可以使用Set去除重复项.让arr=[1,1,2,2,3,3];letdeduped=[...newSet(arr)]//[1,2,3]4.2在Set上使用数组方法使用展开运算符您可以简单地将Set转换为数组。因此,您可以将Array的所有本机方法与Set一起使用。例如,我们要过滤以下Set以获得大于3的项。letmySet=newSet([1,2,3,4,5]);varfiltered=[...mySet].filter((x)=>x>3)//[4,5]数组解构has有时候你会把函数返回的多个值放在一个数组中。我们可以使用数组解构来获取这些值中的每一个。5.1价值交换letparam1=1;letparam2=2;//param1¶m2互换赋值values[param1,param2]=[param2,param1];console.log(param1)//2console.log(param2)//15.2receive函数返回多个结果在下面的代码中,我们从/post获取一个post,从/comments获取相关的评论。由于我们使用的是async/await,该函数将返回值放在一个数组中。而我们可以在解构数组后,直接将返回值赋值给对应的变量。asyncfunctiongetFullPost(){returnawaitPromise.all([fetch('/post'),fetch('/comments')]);}const[post,comments]=getFullPost();转自:https://www.cnblogs.com/robin...