ES6之函数扩展

函数

参数默认值

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

   function log(x, y = 'World') {
     console.log(x, y);
   }
   console.log('Hello') // Hello World
   console.log('Hello', 'China') // Hello China
   console.log('Hello', '') // Hello

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

   function foo(x = 5) {
      let x = 1; // error
      const x = 2; // error
   }

参数与解构赋值默认值结合使用

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

   // 写法一
  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]

   // x 和 y 都有值的情况
   m1({x: 3, y: 8}) // [3, 8]
   m2({x: 3, y: 8}) // [3, 8]

   // x 有值，y 无值的情况
   m1({x: 3}) // [3, 0]
   m2({x: 3}) // [3, undefined]

   // x 和 y 都无值的情况
   m1({}) // [0, 0];
   m2({}) // [undefined, undefined]

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

参数默认值位置

一般参数默认值都在最后面

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

f() // [1, undefined]
f(2) // [2, undefined])
f(, 1) // 报错
f(undefined, 1) // [1, 1]

// 例二
function f(x, y = 5, z) {
  return [x, y, z];
}

f() // [undefined, 5, undefined]
f(1) // [1, 5, undefined]
f(1, ,2) // 报错
f(1, undefined, 2) // [1, 5, 2]

length

指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。也就是说，指定了默认值后，length属性将失真。

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

如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了。

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

name

函数的name属性，返回该函数的函数名。
Function构造函数返回的函数实例，name属性的值为anonymous。
bind返回的函数，name属性值会加上bound前缀。

   var f = function () {};
   f.name // "f"
   
   (new Function).name // "anonymous"
   
   function foo() {};
   foo.bind({}).name // "bound foo"
   (function(){}).bind({}).name // "bound "

箭头函数

去掉function，然后将参数指向返回值
如果只有一个参数，（）可以省
如果只有一个return，{} 可以省

     //只有一个参数
    var f = v => v;
    // 等同于
    var f = function (v) {
    return v;
    };

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

   var f = () => 5;
   // 等同于
   var f = function () { return 5 };
   var sum = (num1, num2) => num1 + num2;
   // 等同于
   var sum = function(num1, num2) {
     return num1 + num2;
   };

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

   // 报错
   let getTempItem = id => { id: id, name: "Temp" };
   // 不报错
   let getTempItem = id => ({ id: id, name: "Temp" });

实例

        const num = [1,2,5,7,84];
        const dou = num.map((number) => {
            return number * 2;
        });
        const dous = num.map((number) => number * 2);
        console.log(num);
        console.log(dou);
        console.log(dous);

由于箭头函数使得this从“动态”变成“静态”，下面两个场合不应该使用箭头函数。
第一个场合是定义对象的方法，且该方法内部包括this。
第二个场合是需要动态this的时候，也不应使用箭头函数。