10、函数的扩展 为函数参数指定默认值、函数的 rest 参数、箭头函数—ES6学习笔记

函数的扩展
- 1 为函数参数指定默认值
- 2 函数的 rest 参数
- 3 箭头函数

1 为函数参数指定默认值
在ES5中想为函数指定默认的值，只能通过变通的方法，如：

function fn(a, b){  a = a || 10; //a等于a或者等于10;  b = b || 20; //b等于b或者等于20;  console.log(a + b);}fn(); // 30fn(0, 10); // 20 这是因为这里把0传给了a,这里的"或者"会把0判断为一个false值，就会把a这个参数赋值为一个10;所以得到的就是10+10之后的计算结果

为了解决上述问题，在ES6中，为函数参数指定指定参数的写法,
直接在写参数的时候写上a = 10, b = 20

function fn(a = 10, b = 20){  console.log(a + b);}fn(); //30fn(0, 10); //10

这种ES6 的写法不仅解决了上面的问题，而且写起来更简洁。

2 函数的 rest 参数
rest 参数形式为（“…变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。
rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。如：
之前我们需要这样写

function sum(){  var args = arguments;  var res = 0;  for(var i=0; i<args.length; i++){    res += args[i];  }  console.log(res);//15}sum(1, 2, 3, 4, 5);

如果使用rest参数的时候，我们就不再需要使用argument参数了.

function sum(a, ...arr){  var res = a;  for(var i=0; i<arr.length; i++){    res += arr[i];  }  console.log(res); // 15}sum(10, 1, 2, 3, 4, 5);

…arr前面可以添加其他参数，…arr后面不可以添加其他参数，否则会报错

3、使用“箭头”（=>）定义函数。

const fn = a => a;const fn2 = function (a){  return a;};console.log(fn(1)); //1console.log(fn2(2)); //2

可以发现fn和fn2的写法是一个意思，但是fn1更简洁。

我们再来看看箭头函数在使用过程中的语法点：

1、你想写多个参数的时候，参数部分需要写个小括号.如:

const fn = (a, b) => a + b;console.log(fn(1, 2)); // 3const fn = (a, b) => {  a = a * 2;  b = b * 2;  return a + b;};console.log(fn(1, 2));

2、当这个箭头函数的返回值是一个对象的时候，需要使用一个小括号将它的返回值包裹起来
如：我们想返回一个对象，里面有一个a还有一个b，这个时候如果不用括号括起来，它就会把这个当做函数体内的代码；如果说我们想返回这个对象，需要使用一个小括号将对象括起来。

const fn = (a, b) => ({a, b});

一般箭头函数都常用于回调函数当中，
比如说数组的sort方法,我们希望这个数组能执行一个从小到大的排序，我们先回顾一下我们传统的写法

console.log(fn(1, 2)); // {a:1,b:2} 可以看到返回值就是一个对象var arr = [5, 2, 3, 4, 1];arr.sort(function (a, b){  return a - b;});console.log(arr);//[1,2,3,4,5]

我们再看看ES6中箭头函数的排序方法,对比一下我们发现这种写法比上面的写法简洁的多

arr.sort((a, b) => a - b);console.log(arr);   //[1,2,3,4,5]

我们再来看看箭头函数在使用过程中的一些注意事项:
1 箭头函数体内没有自己的this对象，所以在使用的时候，其内部的this就是定义时所在环境的对象，而不是使用时所在环境的对象。

function fn(){  setTimeout(function (){ // 普通函数    console.log(this); //window {...}  }, 1000);  setTimeout(() => { // 箭头函数 Object{a:1} 箭头函数体内没有自己的this对象，这里this就是定义时所在环境的对象    console.log(this);  },1000);}var obj = {a: 1};fn.call(obj); //利用call修改函数体内this的指向

所以这也就说明了不能给箭头函数使用 call apply bind 去改变其内部的this指向

2 箭头函数体内没有arguments对象，如果要用，可以用Rest参数代替。

function fn(){  setTimeout(() => {    console.log(arguments);//打印出的是fn的arguments对象  }, 1000)}//这个例子很好的说明了箭头函数不存在anguments对象,这里打印的实际上是通过作用链打印它父级的对象fn(1, 2, 3);

如果说我们使用箭头函数的时候需要不定参的对象，可以用Rest参数代替

const fn = (...arr) => arr;console.log(fn(1, 2, 3, 4));// [1,2,3,4]

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

const Fn = (a, b) => a + b;const f = new Fn(1, 2); //Fn is not a contructor 报错 这就说明了它不能当做构造函数去调用

4 箭头函数不能当做Generator函数。