es6函数的扩展介绍（代码示例）

本篇文章给大家带来的内容是关于es6函数的扩展介绍（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

函数参数的默认值

我们都知道声明函数可以设置形参，但你有没有想过形参也可以直接设置默认值，我们接下来看看如何去写

代码

function f(x,y=2) {
    return x+y
}
console.log(f(2)) // 4

上面的小例子只是设置了一个y的默认值2，然后我们使用这个函数的时候，只传递了x的参数2，所以我们会得到4，如果我们给y传递参数1呢？我们会得到什么样的结果，继续看下面的例子

function f(x,y=2) {
    return x+y
}
console.log(f(2，1)) // 3

我们会得到3，因为你传递实参的话会替换默认值，更多的例子需要大家自己去实验！！！

function f(x，x,y=2) {
    return x+y
}
console.log(f(2，2, 1)) // 报错

上面的例子会报错，因为我们不能设置相同的参数

let x = 3
function f(x,y=x) {
    return x+y
}
console.log(f(2))

var x = 3
function f(x,y=x) {
    return x+y
}
console.log(f(2))

function f(x,y=x) {
    console.log(x,y) // 2 2
    var x = 3
    console.log(x,y) // 3 2
    return x+y
}
console.log(f(2)) // 5

上面三个例子是函数参数作用域的例子，我们来看一下第一个和第二个例子函数默认值会有一个自己单独的作用域，所以我们在外面声明修改的x是不会起作用的，但是第三个例子我们在函数内部修改x，我们可以看一看我们打印的值可以看的未声明之前我们的x，y都是2，这里没有变量提升，声明下面x则变成了3，y依旧不变，所以得到5

rest 参数

官方注解：ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中

代码

function f(...x) {
    console.log(x) // [1,2,3]
}
f(1,2,3)

上面的例子我们会得到一个数组，这正和它定义的一样它会把多余的变量一起放到一个数组里面

function f(arr,y,...x) {
    console.log(x)
}

function f(arr,...x，y) {
}

上面的两个例子第一个可以执行并可以得到自己想要的结果，第二个则会执行报错，因为rest参数只能放到最后一个参数位置使用

严格模式下rest如何去使用?

从Es5开始函数内已经可以定义严格模式了，但Es6规定函数参数默认值定义严格模式会报错，但也要看严格模式定义在局部还是全局

严格模式不懂的可以去看看了解
严格模式

代码

 function fn(a=5) {
   'use strict';
   console.log(a)
   }
   fn()

上面这个例子我们在函数内部设置了严格模式但是它并没有我们如期的那样返回结果，而是报错了。我们来看一看官方解释：函数内部的严格模式，同时适用于函数体和函数参数。但是，函数执行的时候，先执行函数参数，然后再执行函数体。也就是说在函数内部定义严格模式，函数参数是先执行的函数体后执行（不定义严格模式也是先执行函数参数），这样在函数体验证参数是否为严格模式则为不合理存在

那我们该怎么避免这样的错误呢？
代码

   'use strict';
   function fn2(a=5) {
       console.log(a)
   }
   fn2()
   
    function fn() {
   'use strict';
       return function (a=5) {
           console.log(5)
       }
   }
   fn()() // 5

我们可以在全局定义严格模式，或是在一个函数内部定义然后返回一个带参数的函数，这样就可以绕过执行函数参数，执行函数体的时候不会报错

name 属性

 官方注解： 函数的name属性，返回该函数的函数名  使用方式   函数名.name

代码

function a() {
}
console.log(a.name) // a

function b() {
}
console.log(b.name) // a

上面两个例子通过使用name属性我们会得到函数的名字，当然Es5也能使用，大家可以去尝试在Es6环境和Es5环境测试一下

箭头函数

  let fn = a => a
  console.log(fn(10)) // 10
  
  // 对比
  
  let fn1 = function (a) {
      return a
  }
  console.log(fn1(10)) //10
  
  let fn2 =  (a,b) => a+b
  console.log(fn2(1,2))
  
  // 对比
  
  let fn21 = function (a,b) {
      return a+b
  }
  console.log(fn2(1,2))

我们可以看看上面的箭头函数与Es5中我们常用书写的函数的区别，就是大大缩减英文字母的编写而且变得更简洁了，其实箭头函数和普通函数作用都差不多，而且简单易懂，可以相互嵌套，对于自己代码整洁度非常有帮主，鼓励大家多使用箭头函数，那么箭头函数也有几个注意点需要大家记住

1. 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象（this指向固定）
2. 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误
3. 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替
4. 不可以使用yield命令，因此箭头函数不能用作 Generator 函数（这个函数到最后咱们会提到这里看看就行）

尾调用

 通俗的解释：就是在函数中最后一步调用函数

代码

  let fn = () => {
  console.log(123)
  return () => 5
  }
  console.log(fn()()) // 123     5

尾递归

let fn = (a,b) => {
  if(a===b) return b
  console.log(1)
  return fn(a+1, b)
  }
  console.log(fn(1,5))

在函数内部最后一步进行递归调用本身，从而达到递归的效果

函数参数的尾逗号

Es7中允许函数形参最后一个带有逗号，以前都是不允许带有逗号的
  let fn = (a,) => {
      console.log(a)
  }
  fn(1)

上面一个例子我们在参数的后面加了一个逗号，执行结果之后发现可以正常运行，但是我在es6环境下也是不会报错的试了下es5也不报错，大家可以在去试试、

函数的扩展就到这里了，最主要需要我们学的就是箭头函和rest参数传值，以及严格模式下函数的运作

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript教程视频栏目！

以上就是es6函数的扩展介绍（代码示例）的详细内容，更多请关注其它相关文章！