ES6学习笔记之函数（一）

1.函数的默认参数

在ES6 之前，我们不能直接为函数的参数指定默认值，只能采用其他方法。如：

function show (num, callback){
    num = num || 6;
    callback = callback || function (data){console.log(data);}
    callback(num * num);
}
show(); //36 (不传参输出默认值)
show(10, function (data){
    console.log(data * 10);
}); //1000

而ES6允许为函数的参数设置默认值，即直接写在参数定义的后面。让下面代码，可以看出，ES6的写法更加简洁自然。

function show (num = 6, callback = function (data){console.log(data);}){
    callback(num * num);
}
show(); //36
show(10, function(data){
    console.log(data * 10)  //1000
})

参数变量是默认声明的，所以不能用 let 或 const 再次声明。如：

function show (num = 1){
    let num = 2;
    console.log(num);
}
show(); //SyntaxError: Identifier 'num' has already been declared

2.与解构函数默认值结合使用

function foo ({x, y = 5}){
    console.log(x, y);
}
foo({});    //undefined 5
foo({x:1}); //1 5
foo({x:1, y:2});    //1 2
foo();  //TypeError: Cannot destructure property `x` of 'undefined' or 'null'.

上面代码只使用了对象的解构赋值，没有使用函数参数的默认值。只有当函数 foo 的参数是一个对象时，变量 x 和 y 才会通过解构赋值生成。如果函数 foo 调用时没提供参数，变量 x 和 y 就不会生成，从而报错。通过提供函数参数的默认值，就可以避免这种情况。

function foo ({x, y=2} = {}){
    console.log(x, y);
}
foo();  //undefined 2 

如上面代码，如果没有指定参数，函数 foo 的参数默认为一个空对象。

下面还有一个例子。

function fetch (url, {body = '', method = 'GET', headers = {} }){
    console.log(method);
}
fetch('http://example.com', {});    //GET
fetch('http://example.com');    //TypeError: Cannot destructure property `body` of 'undefined' or 'null'.

上面代码中，函数 fetch 的第二个参数是一个对象，可以为它的三个属性设置默认值。这种写法在调用函数 fetch 时，不能省略第二个参数，如果结合函数参数的默认值，就可以省略第二个参数。这时，就出现了双重默认值。

function fetch (url, {body = '', method = 'GET', headers = {} } = {}){
    console.log(method);
}
fetch('http://example.com');    //GET

上面代码中，调用函数 fetch 时，没有提供第二个参数，函数参数的默认值就会生效，接着才是解构赋值的默认值生效，变量 method 才会取到默认值 Get。

那么，我们来练习一下，下面两种写法有什么不同呢？

//写法一：
function m1 ({x = 0, y = 0} = {}){
    return [x, y];
}
//写法二：
function m2 ({x, y} = {x:0, y:0}){
    return [x, y];
}

写法一函数参数的默认值是空对象，但是设置了对象解构赋值的默认值；写法二函数参数的默认值是一个有具体属性的对象，但是没有设置对象解构赋值的默认值。

m1();  //[ 0, 0 ]
m2();  //[ 0, 0 ]

上面代码中，函数没有参数的情况，参数严格为 undefined，参数默认值生效。

写法一：首先，函数参数的默认值 {} 生效，由于 x , y 严格为undefined，接着解构赋值的默认值生效，x = 0, y = 0。

写法二：首先，函数参数默认值 {x:0, y:0} 生效，接着解构赋值成功，x = 0, y = 0。

m1({x:3, y:8});    //[ 3, 8 ]
m2({x:3, y:8});    //[ 3, 8 ]

上面代码中，x , y 都有值的情况

写法一和写法二相同：由于参数不为空，函数参数默认值失效，接着解构赋值成功，x = 3, y = 8。

m1({x:3}); //[ 3, 0 ]
m2({x:3}); //[ 3, undefined ]

上面代码中，x 有值，y 无值的情况，所传参数不严格为undefined，函数参数默认值失效。

写法一：实际执行的解构为 { x = 0, y = 0} = { x:3}，所以 x = 3, y = 0。

写法二：实际执行的解构为{ x , y } = { x :3 }，所以 x = 3, y = undefined。

m1({});    //[ 0, 0 ]
m2({});    //[ undefined, undefined ]

上面代码中，x, y 无值的情况，函数参数默认值失效

写法一：实际执行的解构为 { x = 0, y = 0 } = {} , 解构赋值默认值生效，所以 x=0, y=0。

写法二：实际执行的解构为 { x, y } = {} ,右侧 x, y 都为undefined ，左侧解构赋值没有默认值，所以 x = undefined, y = undefined。

console.log(m1({z:3})); //[ 0, 0 ]
console.log(m2({z:3})); //[ undefined, undefined ]

上面代码中，传入不包含 x ，y 的对象，函数参数默认值失效。

写法一：实际执行的解构为 {x = 0,y = 0} = { z = 3 }，右侧 x, y 的值为undefined ， 所以解构赋值默认值生效，x = 0, y = 0。

写法二：实际执行的解构为 { x , y } = { z = 3 }，右侧 x, y 的值为undefined ，左边没有设置对象解构赋值的默认值，所以  x = undefined, y = undefined。

3.参数默认值的位置

通常情况下，定义了默认值的参数，应该是函数的尾参数。因为这样比较容易看出来，到底省略了哪些参数。如果非尾部的参数设置默认值，实际上这个参数是没法省略的。

function f1(x = 1, y) {
    console.log(x, y);
}
f1();   //1 undefined
f1(2);  //2 undefined
f1(, 2); //报错 （非尾部的参数设置默认值，实际上这个参数是没法省略的）
f1(undefined,1);    //1 1
function f2(x, y = 1) {
    console.log(x, y);
}
f2(1);  //1 1   尾部的参数设置默认值，这个参数可以省略

4.函数的length属性

指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。这是因为length属性的含义是，该函数预期传入的参数个数。某个参数指定默认值以后，预期传入的参数个数就不包括这个参数了。同理，rest参数也不会计入length属性。并且，如果设置了默认值的参数不是尾参数，那么length属性也不再记入后面的参数了。如下面例子：

console.log((function (x) {}).length);  //1
console.log((function (x=1) {}).length); //0
console.log((function (x, y, z=1) {}).length); //2
console.log((function (...args) {}).length); //0
console.log((function (x=1, y, z) {}).length); //0