es6 函数的扩展

更新日期: 2019-03-18阅读: 1.9k标签: 函数

函数参数的默认值

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

代码

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(21)) // 3

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

function f(x,x,y=2) {
    return x+y
}
console.log(f(22, 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参数传值,以及严格模式下函数的运作

链接: https://fly63.com/article/detial/2425

JavaScript 函数式编程

我理解的 JavaScript 函数式编程,都认为属于函数式编程的范畴,只要他们是以函数作为主要载体的。

Js函数式编程,给你的代码增加一点点函数式编程的特性

给你的代码增加一点点函数式编程的特性,最近我对函数式编程非常感兴趣。这个概念让我着迷:应用数学来增强抽象性和强制纯粹性,以避免副作用,并实现代码的良好可复用性。同时,函数式编程非常复杂。

让我们来创建一个JavaScript Wait函数

Async/await以及它底层promises的应用正在猛烈地冲击着JS的世界。在大多数客户端和JS服务端平台的支持下,回调编程已经成为过去的事情。当然,基于回调的编程很丑陋的。

JavaScript函数创建的细节

如果你曾经了解或编写过JavaScript,你可能已经注意到定义函数的方法有两种。即便是对编程语言有更多经验的人也很难理解这些差异。在这篇博客的第一部分,我们将深入探讨函数声明和函数表达式之间的差异。

编写小而美函数的艺术

随着软件应用的复杂度不断上升,为了确保应用稳定且易拓展,代码质量就变的越来越重要。不幸的是,包括我在内的几乎每个开发者在职业生涯中都会面对质量很差的代码。这些代码通常有以下特征:

javascript回调函数的理解和使用方法(callback)

在js开发中,程序代码是从上而下一条线执行的,但有时候我们需要等待一个操作结束后,再进行下一步操作,这个时候就需要用到回调函数。 在js中,函数也是对象,确切地说:函数是用Function()构造函数创建的Function对象。

js调用函数的几种方法_ES5/ES6的函数调用方式

这篇文章主要介绍ES5中函数的4种调用,在ES5中函数内容的this指向和调用方法有关。以及ES6中函数的调用,使用箭头函数,其中箭头函数的this是和定义时有关和调用无关。

JavaScript中函数的三种定义方法

函数的三种定义方法分别是:函数定义语句、函数直接量表达式和Function()构造函数的方法,下面依次介绍这几种方法具体怎么实现,在实际编程中,Function()构造函数很少用到,前两中定义方法使用比较普遍。

js在excel的编写_excel支持使用JavaScript自定义函数编写

微软 称excel就实现面向开发者的功能,也就是说我们不仅可以全新定义的公式,还可以重新定义excel的内置函数,现在Excel自定义函数增加了使用 JavaScript 编写的支持,下面就简单介绍下如何使用js来编写excel自定义函数。

js中的立即执行函数的写法,立即执行函数作用是什么?

这篇文章主要讲解:js立即执行函数是什么?js使用立即执行函数有什么作用呢?js立即执行函数的写法有哪些?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!