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

ES6入门的功能扩展

时间:2023-04-02 20:44:26 HTML

1。函数参数的默认值1.1用法在ES6之前,无法为函数的参数指定默认值。默认值只能通过判断赋值来实现。在ES6中允许函数为参数设置默认值主要是为了提高代码的可读性,方便代码优化。另外需要注意的是,在给参数赋值的时候,参数不能被复用,不能使用letconst来定义。//在ES6之前实现函数log(x,y){y=y||'世界';if(typeofy==='undefined'){y='World';}console.log(x,y);}log('Hello')//HelloWorldlog('Hello','China')//HelloChinalog('Hello','')//HelloWorld//ES6实现的函数log(x,y='World'){console.log(x,y);}log('Hello')//HelloWorldlog('Hello','China')//HelloChinalog('Hello','')//HellofunctionPoint(x=0,y=0){this.x=x;this.y=y;}constp=newPoint();p//{x:0,y:0}functionfoo(x=5,x){让x=1;//错误,不能有同名参数,不能设置参数letconstdefinitionconstx=2;}1.2usewithdestructuringassignment如果函数在调用时不提供参数,则不会生成内部变量,An会出现错误,可以通过提供函数的默认值来解决,如下:functionfoo({x,y=5}){console.log(x,y);}foo()//errorfoo({x:1})//15foo({x:2,y:3)//23foo({})//未定义的5functionfoo({x,y=5}={}){console.log(x,y)}foo()//undefined5这个是调用时如果没有传值,默认赋一个空对象。以下示例:functionpost(url,{b='',type='get',h={}}){console.log(type)}post('w.b.c',{})//getpost('w.b.c')//报错//改成这个函数就行了post(url,{b='',type='get',h={}}={}){console.log(type)}post('w.b.c',{})//getpost('w.b.c')//获取下面例子的区别//写方法一functionm1({x=0,y=0}={}){return[x,y];}//写法2functionm2({x,y}={x:0,y:0}){return[x,y];}两者调用时都有默认值没有传递值时的情况是一样的。但是,传空值和不传值,区别如下:m1({})//因为它有默认值,所以是[0,0]m2({})//默认值为空,没有解构赋值传值so[undefined,undefined]//其他情况同上m1({x:3})//[3,0]m2({x:3})//[3,undefined]m1({z:3})//[0,0]m2({z:3})//[undefined,undefined]1.3参数默认值的位置If定义了具有默认值的参数,它应该是函数的尾参数。并且这个参数不能省略,除非输入的undefined1.4函数的length属性为函数参数指定了一个默认值,函数的length属性会减去指定默认值的参数个数。因为这个属性假定指定了默认值的参数不会被包含在期望的参数个数中。如下:(function(a){}).length//1(function(a=5){}).length//0(function(a,b,c=5){}).length//21.5函数域如果函数中的参数被设置为默认值,那么在函数声明和初始化时,参数会形成一个单独的作用域,初始化完成后这个作用域就会消失。只有当参数设置为默认值时才会出现这种情况。向下。如下:varx=1;functionf(x,y=x){console.log(y);}f(2)//2//因为设置了默认值,调用f的时候就形成了作用域,此时因为x赋值给y,输入x为2,所以y为2。如果此时调用时没有传值,那么x会指向全局,所以y=11.6应用使用参数的默认值,可以指定一定的值参数不能省略,省略会报错,如下()){returnmustBeProvided;}foo()//Error:Missingparameterfoo(2)//22.RestparameterES6中加入了restparameter(...variablename)来获取函数的冗余参数。rest参数匹配的变量是一个数组,变量将多余的参数放入数组中。函数添加(...值){让总和=0;for(varvalofvalues){sum+=val;}returnsum;}add(2,5,3)//10//注意:rest参数后面不能有其他参数,rest参数不计入函数的length属性。3.严格模式在ES6中,如果函数参数使用了默认值、解构赋值、展开运算符,那么函数不能显式设置为严格模式,否则会报错。因为在执行函数的时候,先执行函数参数,再执行函数体,但是因为只有在函数体内才能知道参数是否在严格模式下执行,但是参数应该先于函数执行。有两种方法可以避免这种情况:一是设置全局严格模式,二是将函数包装在一个不带参数的立即执行函数中。4、name属性返回函数的函数名,如下:functionfoo(){}foo.name//foovarf=function(){}//ES5f.name//''//ES6f.name//fvarf=functionc(){}f.name//c5.箭头函数ES6允许使用“箭头”(=>)来定义函数varf=v=>v;//等价于varf=function(v){returnv;};varf=()=>5;//等价于varf=function(){return5};varsum=(num1,num2)=>num1+num2;//等价于varsum=function(num1,num2){returnnum1+num2;};//如果箭头函数后面有很多语句,用大括号括起来返回varsum=(num1,num2)=>{returnnum1+num2;//rest结合参数和箭头函数的例子。constnumbers=(...nums)=>nums;numbers(1,2,3,4,5)//[1,2,3,4,5]constheadAndTail=(head,...tail)=>[head,tail];headAndTail(1,2,3,4,5)//[1,[2,3,4,5]]注1.函数体中的this对象是定义对象的地方,而不是使用它的对象。2、不能作为构造函数使用,即不能使用new命令,否则会报错。3、不能使用arguments对象,函数体中不存在。如果要使用它,可以使用rest参数代替。4、不能使用yield命令,所以箭头函数不能作为Generator函数使用。5.箭头函数既然没有自己的this,当然不能用call(),apply(),bind()来改变this的方向。不适用场景1.定义对象的方法,方法中包含this2.动态定义this时,比如在点击事件中,this指向嵌套箭头函数嵌套箭头函数中可以使用箭头函数。6.尾调用优化尾调用函数式编程的一个重要概念是什么,意思是一个函数的最后一步调用另一个函数functionf(x){returng(x);}//都不属于//情况1函数f(x){lety=g(x);returny;}//Case2functionf(x){returng(x)+1;}//Case3functionf(x){g(x);}尾调用优化只保留了内层的调用帧功能。如果所有的函数都是尾调用,完全可以每次执行只有一个调用帧,这样会大大节省内存。这就是“尾调用优化”的意思。函数f(){让m=1;让n=2;returng(m+n);}f();//等价于函数f(){returng(3);}f();//等价于g(3);注意只有当外层函数的内部变量不再使用时,内层函数的调用框架才会替换外层函数的调用框架,否则无法进行“尾调用优化”。尾递归函数调用自身,称为递归。如果尾部调用自己,则称为尾部递归。ES6的尾调用优化只在严格模式开启,普通模式无效。尾递归优化的实现在普通模式下,可以使用减少调用栈,用循环代替递归的方法。欢迎关注公众号【逍遥】ES6入门系列ES6入门let,续ES6变量解构赋值入门ES6入门字符串扩展正则性入门ES6值入门扩展ES6Gittutorial前端Git基础教程