本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于es6函数的扩展介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
函数参数的默认值
我们都知道声明函数可以设置形参,但你有没有想过形参也可以直接设置默认值,我们接下来看看如何去写
代码
1 2 3 4 |
|
上面的小例子只是设置了一个y的默认值2,然后我们使用这个函数的时候,只传递了x的参数2,所以我们会得到4,如果我们给y传递参数1呢?我们会得到什么样的结果,继续看下面的例子
1 2 3 4 |
|
我们会得到3,因为你传递实参的话会替换默认值,更多的例子需要大家自己去实验!!!
1 2 3 4 |
|
上面的例子会报错,因为我们不能设置相同的参数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
上面三个例子是函数参数作用域的例子,我们来看一下第一个和第二个例子函数默认值会有一个自己单独的作用域,所以我们在外面声明修改的x是不会起作用的,但是第三个例子我们在函数内部修改x,我们可以看一看我们打印的值可以看的未声明之前我们的x,y都是2,这里没有变量提升,声明下面x则变成了3,y依旧不变,所以得到5
rest 参数
1 |
|
代码
1 2 3 4 |
|
上面的例子我们会得到一个数组,这正和它定义的一样它会把多余的变量一起放到一个数组里面
1 2 3 4 5 6 |
|
上面的两个例子第一个可以执行并可以得到自己想要的结果,第二个则会执行报错,因为rest参数只能放到最后一个参数位置使用
严格模式下rest如何去使用?
1 |
|
严格模式不懂的可以去看看了解
严格模式
代码
1 2 3 4 5 |
|
上面这个例子我们在函数内部设置了严格模式但是它并没有我们如期的那样返回结果,而是报错了。我们来看一看官方解释:函数内部的严格模式,同时适用于函数体和函数参数。但是,函数执行的时候,先执行函数参数,然后再执行函数体。也就是说在函数内部定义严格模式,函数参数是先执行的函数体后执行(不定义严格模式也是先执行函数参数),这样在函数体验证参数是否为严格模式则为不合理存在
那我们该怎么避免这样的错误呢?
代码
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
我们可以在全局定义严格模式,或是在一个函数内部定义然后返回一个带参数的函数,这样就可以绕过执行函数参数,执行函数体的时候不会报错
name 属性
1 |
|
代码
1 2 3 4 5 6 7 |
|
上面两个例子通过使用name属性我们会得到函数的名字,当然Es5也能使用,大家可以去尝试在Es6环境和Es5环境测试一下
箭头函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
我们可以看看上面的箭头函数与Es5中我们常用书写的函数的区别,就是大大缩减英文字母的编写而且变得更简洁了,其实箭头函数和普通函数作用都差不多,而且简单易懂,可以相互嵌套,对于自己代码整洁度非常有帮主,鼓励大家多使用箭头函数,那么箭头函数也有几个注意点需要大家记住
- 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象(this指向固定)
- 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误
- 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替
- 不可以使用yield命令,因此箭头函数不能用作 Generator 函数(这个函数到最后咱们会提到这里看看就行)
尾调用
1 |
|
代码
1 2 3 4 5 |
|
尾递归
1 2 3 4 5 6 |
|
在函数内部最后一步进行递归调用本身,从而达到递归的效果
函数参数的尾逗号
1 2 3 4 5 |
|
上面一个例子我们在参数的后面加了一个逗号,执行结果之后发现可以正常运行,但是我在es6环境下也是不会报错的试了下es5也不报错,大家可以在去试试、
函数的扩展就到这里了,最主要需要我们学的就是箭头函和rest参数传值,以及严格模式下函数的运作
本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的JavaScript教程视频栏目!以上就是es6函数的扩展介绍(代码示例)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《javascript》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者