ES6函数扩展(箭头函数)

一、函数参数的用法
1、参数默认值的设置,与ES5 对比
ES5中设置参数默认值的写法

 function animal(name, type) {
  var name = name || 'yuan';
  var type = type || 'monkey';
  console.log(name, type);
}

这个写法有个缺陷:参数传递进来的布尔值必须为true,如果传入的值为空字符串或者undefined 等这些转换为false的参数,则会影响结构。所以,ES6为了弥补这个缺陷,做了如下设置:

function animal(name = 'yuan', type = 'monkey') {
  console.log(name, type);
}

2、传入参数类型对输出结果的影响

function animal(name = 'yuan', type = 'monkey') {
  console.log(name, type);
}
animal(); // yuan monkey
animal(name = 'dog');  // dog monkey
animal(name = 'yuan', undefined); // yuan monkey
animal(name = 'yuan', null); // yuan null
animal(false, undefined); // false "monkey"
animal(0, undefined); // 0 "monkey"

上面代码4中调取函数的方式,只有不传和传入undefined 的会触发默认值,而传入其它值或者null,则不会触发默认值。
3、注意参数放置位置

// 错误写法
function animal(name = 'yuan', type) {
  console.log(name, type);
}
// 正确写法
function animal(name, type = 'monkey') {
  console.log(name, type);
}

如上,在设置了默认值的参数后,就不需要在设置其他参数了,通常情况下,若有参数为默认值时,一般是放在尾参数位置。
4、参数默认值与解构赋值默认值的结合使用
对比下面两种写法

// 第一种写法,参数默认值为空对象,解构赋值有具体的默认值
function method1({x = 0, y = 0} = {}) {
  return [x, y];  
}
// 第二种写法,参数默认值是一个具体的属性对象,而对象解构赋值没有设置默认值 
function method2({x, y} = {x: 0, y: 0}) {
  return [x, y];
}
// 函数没有参数时
method1(); // [0, 0]
method2(); // [0, 0]

// x 和 y 都有值
method1({x: 2, y: 3}); // [2, 3]
method2({x: 2, y: 3}); // [2, 3]

// x 有值, y 没有值
method1({x: 2}); // [2, 0]
method2({x: 2}); // [2, undefined]

// x 没有值, y 有值
method1({y: 2}); // [0, 2]
method2({y: 2}); // [undefined, 2

// x 和 y 都没有值
method1({});  // [0, 0]
method2({}); // [undefined, undefined]

5、使用参数默认值对函数length 属性的影响

(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2
(function(a, ...b) {} ).length // 1

由上面代码可以看出,函数的参数在指定默认值之后,函数的length 属性会失真,返回的length 值,是没有指定默认值的参数的个数,注意这里的length 也不包括rest参数(如第二点介绍)的个数。
6、注意点
因函数参数是默认声明的,如果如果用let 或 const 重新声明变量,会报错:

function animal(name = "yuan") {
  let name = dog;
  console.log(name);
}
animal(); // 报错: Uncaught SyntaxError: Identifier 'name' has already been declared

二、rest 参数
案例 呈现

// 求和,把结果赋值给 result
function sum(result, ...values) {
  console.log(values); // [1, 2, 3, 4],这个变量返回的是一个数组
  values.forEach( function(value, index) {
    result += value;
  })
  console.log(result); 
}
sum(11, 1, 2, 3, 4,); // 21

如上,rest参数(3个点 + 变量名)表示的是:获取函数多余的参数,且这个变量是一个数组。还有一点要注意的是rest参数必须是尾参数,后面不能加其他的参数,否则会报错:

// 错误写法
function sum(res, ...values, another) {
  console.log(values);
}
sum(); // 报错:Uncaught SyntaxError: Rest parameter must be last formal parameter

三、name属性
ES6中增加了函数的name属性

const animal = function() {};
animal.name;  // "animal"

Function 构造函数会发的函数实例,name 属性的值为“anonymous”

(new Function).name; //  "anonymous"

bind 返回的函数,name属性值会加上“bound”前缀

function animal() {};
animal.bind({}).name; // "bound animal"

匿名函数的bind 返回的值“bound”

(function () {}).bind({}).name; //  "bound"

四、箭头函数
1、定义
用箭头“=>”来定义函数。
2、用法
对比

// ES5 写法
var sum = function(a) {
  return a;
}
// ES6 写法
var sum = a => a;

如上代码,在ES6中,第一个a表示函数参数,箭头“=>”后面的 a 表示函数体。
上述只是针对一个参数和函数体只有一条语句的写法,若函数参数的个数和函数体的语句超过1个要如何表示呢?如下:

var sum = (a, b) => { return a + b};
sum(1,4); // 5

如上,若函数的参数个数超过一个时,需要用圆括号“()”来代表参数,函数体的语句条数超过一条时,需要用大括号将它们括起来。
当函数体中返回的是对象时,我们需要将其用圆括号“()”括起来:

var person = name => ({ name: 'yuan', type: 'monkey'});

3、使用注意点
(1)、函数体内的 this 指向,指向的是定义时所在的对象,而不是使用时所在的对象。
在箭头函数中 this 指向是固定的:

function foo() {
 setTimeout( () => {
    console.log('id:', this.id)
  }, 100);
}
var id = 21;
foo.call({ id: 42}); // 42

如上输出结果,此处的this 指向并不是全局对象 window,因为在箭头函数中,this 总是指向函数定义生效时所在的对象,所以输出的结果是 42。
如果还不清楚箭头函数 this 指向的含义,我们可以这样通俗的理解:在JavaScript 中每一个 function 都有一个独立的运行上下文,而箭头函数不是一个普通的 function ,没有自己的运行上下文。所以在箭头函数中写的 this,具体指的是包含这个箭头函数最近的 function 的上下文中的 this,如果没有最近的 function,this 指向的是全局。
(2)、不能当做构造函数用,即不能使用 new 命令,否则会报错
(3),、不可以使用arguments 对象,该对象哎函数体内不存在。如果要用,使用 rest 参数代替
(4)、不能使用 yield 命令,因为箭头函数不能用作Generator 函数
六、函数的尾调用
1、定义
尾调用是函数式编程的一个重要概念,是指某个函数的最后一步调用另一个函数。

function f(x) {
  return g(x);
}

函数f 的最后一步是调用函数g,这就是尾调用。
2、尾递归
函数调用自身叫做递归,如果尾调用自身就是尾递归。

function factorial(n) {
  if(n === 1) return 1;
  return n * factorial(n - 1);
}
factorial(5); // 120

在ES6 中只要使用尾递归,就不会发生栈溢出,相对节省内存。
3、尾递归改写
为了确保最后一步只调用自身,需要对尾递归函数进行改写,把所有用到的内部变量改写成函数的参数。
使用柯里化函数编程思想,将多参数的函数转换成单参数的形式:

function curring(fn, n) {
  return function (m) {
    return fn.call(this, m, n);
  }
}

function tailFactorial(n, total) {
  if(n === 1) return total;
  return tailFactorial(n - 1, n * total);
}
const factorial = curring(tailFactorial, 1);
factorial(5); // 120

采用ES6的函数默认值改写:

function factorial(n, total = 1) {
  if(n === 1) return total;
  return factorial(n - 1, n * total);
}
factorial(5); // 120

在尾调用优化时,循环是可以用递归代替的,而一旦使用递归,就最好使用尾递归。
五、总结
1、本章需要掌握ES6中函数的表示方式,以及 rest 参数的使用。
2、本章重点:箭头函数的表示方法,以箭头函数使用的注意事项,特别是箭头函数中 this 的指向问题。

戳我博客

章节目录

1、ES6中啥是块级作用域?运用在哪些地方?
2、ES6中使用解构赋值能带给我们什么?
3、ES6字符串扩展增加了哪些?
4、ES6对正则做了哪些扩展?
5、ES6数值多了哪些扩展?
6、ES6函数扩展(箭头函数)
7、ES6 数组给我们带来哪些操作便利?
8、ES6 对象扩展
9、Symbol 数据类型在 ES6 中起什么作用?
10、Map 和 Set 两数据结构在ES6的作用
11、ES6 中的Proxy 和 Reflect 到底是什么鬼?
12、从 Promise 开始踏入异步操作之旅
13、ES6 迭代器(Iterator)和 for...of循环使用方法
14、ES6 异步进阶第二步:Generator 函数
15、JavaScript 异步操作进阶第三步:async 函数
16、ES6 构造函数语法糖:class 类

你可能感兴趣的:(ES6函数扩展(箭头函数))