ES6学习笔记7--函数的扩展

• 函数参数的默认值

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

函数参数默认值注意事项：

（1）参数变量都是默认声明的，在函数体中不能再用 let 和 const 再次声明

function foo(x=5){
    let x =1; //Uncaught SyntaxError: Identifier 'x' has already been declared
    const x = 2; // Uncaught SyntaxError: Identifier 'x' has already been declared
}

（2）使用参数默认值时，函数不能有同名参数.参数默认值不是传值的，而是每次都重新计算默认值表达式的值。

function foo(x,x=1,y){
  console.log(x);
}
//Uncaught SyntaxError: Duplicate parameter name not allowed in this context

（3）函数参数的默认值可以与解构赋值默认值结合使用

function fetch(url,{method='GET',headers={}}={}){
  console.log(method);
}

fetch("http://example.com") //"GET"

（4）若有默认值的参数不是尾参数，无法省略该参数，除非显示输入 undefined

function f(x=1,y){
  return [x,y];
}

f(,5)  //"Unexpected token ','"
f(undefined,5) //[1,5]

（5）指定了默认值后，函数的length 属性将返回没有指定默认值的参数的个数。若设置了默认值的参数不是尾参数，

length 属性也不再计入后面参数。rest参数也不会计入 length属性。

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

（6）若参数设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域。等到初始化结束，这个作用域才会消失。

//简单案例

let x = 1;
function f(y = x) {
  let x = 2;
  console.log(y);
}
f() // 1

/*函数 f 调用时，参数 y=x 形成一个单独的作用域，在此作用域中x指向了外层的全局变量 x 。
函数调用时，函数体内部的局部变量x影响不到默认值变量 x*/

var x = 1;
function f(x, y = x) {
  console.log(y);
}
f(2) // 2

/*上面代码中，参数y的默认值等于变量x。调用函数f时，参数形成一个单独的作用域。
在这个作用域里面，默认值变量x指向第一个参数x，而不是全局变量x，所以输出是2*/


//复杂案例
var x = 1;
function foo(x, y = function() { x = 2; }) {
  x = 3;
  y(); //赋值 x=2
  console.log(x);
}
foo() // 2
x // 1

/*函数foo的参数形成一个单独作用域。这个作用域里面，首先声明了变量x，
然后声明了变量y，y的默认值是一个匿名函数。这个匿名函数内部的变量x，
指向同一个作用域的第一个参数x,函数foo的内部变量x就指向第一个参数x，
与匿名函数内部的x是一致的*/

（7）可利用参数默认值，可以指定某一个参数不得省略。

function throwIfMissing() {
  throw new Error('Missing parameter');
}
function foo(mustBeProvided = throwIfMissing()) {
  return mustBeProvided;
}
foo() //"Missing parameter"

（8）将默认值设为 undefined ，表明这个参数是可以省略的。

• rest参数（形式为 ...变量名）

rest参数（形式为 ...变量名）用于获取函数的多余参数，rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

注意事项：

（1）rest参数之后不能再有其他参数（只能是最后一个参数），否则会报错。

（2）函数 length 属性不包括使用 rest参数

function add(...values) {
  let sum = 0;
  for (var val of values) {
    sum += val;
  }
  return sum;
}
add(2, 5, 3) // 10

//错误写法，rest参数只能是最后一个参数
function f(a,...b,c){
    //....
}

• 箭头函数（=>）

（1）基本用法：

var f = v=>v;
//等同于
var f = function(v){
    return v;
}

注意事项：

1、若箭头函数不需要参数或需要多个参数，可使用圆括号代表参数部分。

2、若箭头函数的代码块多于一条语句，就要使用大括号将他们括起来，并且使用return 语句返回。

3、若箭头函数直接返回一个对象，必须在对象外面加上括号。

4、箭头函数可以与变量解构结合使用。

var f = () => 5;
var f = (sum1,sum2) => num1 + num2;
var f = (sum1,sum2) => {return num1 + num2;}
let getTempItem = id => ({ id: id, name: "Temp" });
const full = ({ first, last }) => first + ' ' + last;

5、箭头函数体内的 this 对象是定义时所在的对象，而不是使用时所在的对象。

除了this，arguments、super、new.target 三个变量在箭头函数中也是指向外层函数的对应变量。

由于 箭头函数没有自己的this,所以也不可以使用call(),apply(),bind()方法去改变this的指向。

6、不可以当做构造函数，不可以使用 new 命令，否则会抛出一个错误

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

8、不可以使用 yield 命令，因此箭头函数不能用作Generator 函数。

9、箭头函数不适合在定义对象的方法中，且该方法内部包括使用 this。

10、箭头函数也不适合在需要动态 this 的时候。

 阮一峰 箭头函数详解              

• 尾调用优化

尾调用优化详解

• ES6允许函数的最后一个参数有逗号

• Function.protoype.toString()方法返回函数代码本身，以前会省略注释以及空格

ES6 要求返回一模一样的原始代码。

• catch 命令参数可以省略参数。