es6 函数的扩展

hqman 发布于2019-08-23 16:05 / 722人阅读

摘要：我们来看一看官方解释函数内部的严格模式，同时适用于函数体和函数参数。

函数参数的默认值

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

代码

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

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象（this指向固定）

不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误

不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替

不可以使用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://www.ucloud.cn/yun/102677.html

es6 - 函数的扩展

摘要：函数的扩展上一篇，我们介绍了箭头函数的内容箭头函数。匿名函数的属性的值为空字符串。最佳实践新引入的默认参数和剩余参数特性都非常好用。推荐使用默认参数代替原来默认值的书写方式，使用剩余参数代替的能力来操作参数。 es6 - 函数的扩展上一篇，我们介绍了es6箭头函数的内容 - es6 - 箭头函数。事实上，箭头函数只是函数扩展中最有意思的那部分，除此以外，es6函数还增加了一些其他的...

youkede 2019-08-26 11:46 评论0 收藏0
《ES6标准入门》读书笔记

摘要：标准入门读书笔记和命令新增命令，用于声明变量，是块级作用域。用于头部补全，用于尾部补全。函数调用的时候会在内存形成一个调用记录，又称为调用帧，保存调用位置和内部变量等信息。等到执行结束再返回给，的调用帧才消失。《ES6标准入门》读书笔记 @(StuRep) showImg(https://segmentfault.com/img/remote/1460000006766369?w=3...

HollisChuang 2019-08-19 18:41 评论0 收藏0
ES6入门之对象的扩展

摘要：循环遍历对象自身的和继承的可枚举属性不含属性。返回一个数组，包含对象自身的所有属性的键名。目前，只有对象方法的简写法可以让引擎确认，定义的是对象的方法。showImg(https://user-gold-cdn.xitu.io/2019/5/21/16ada8456223b0e1); 1. 属性的简洁表示法在ES6中允许直接写入变量和函数，作为对象的属性和方法，使得代码的书写更为简洁。...

RiverLi 2019-05-23 11:58 评论0 收藏0
ES6学习手稿之基本类型扩展

摘要：它是一个通用标准，奠定了的基本语法。年月发布了的第一个版本，正式名称就是标准简称。结语的基本扩展还有一些没有在这里详细介绍。前言 ES6标准以及颁布两年了，但是，好像还没有完全走进我们的日常开发。这篇文章从ES6的基本类型扩展入手，逐步展开对ES6的介绍。 ECMAScript和JavaScript JavaScript是由Netscape创造的，该公司1996年11月将JavaSc...

tommego 2019-08-21 18:25 评论0 收藏0
ES6入门之函数的扩展

摘要：如果所有函数都是尾调用，那么完全可以做到每次执行时，调用帧只有一项，这将大大节省内存。等同于等同于注意，只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行尾调用优化。 showImg(https://segmentfault.com/img/bVbrTHp?w=1080&h=1920); 1. 函数参数的默认值 1.1 用法在ES6之前是不能为...

dackel 2019-08-02 16:15 评论0 收藏0
ES6入门之函数的扩展

摘要：如果所有函数都是尾调用，那么完全可以做到每次执行时，调用帧只有一项，这将大大节省内存。等同于等同于注意，只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行尾调用优化。 showImg(https://segmentfault.com/img/bVbrTHp?w=1080&h=1920); 1. 函数参数的默认值 1.1 用法在ES6之前是不能为...

graf 2019-08-23 17:10 评论0 收藏0