ES6中的函数

函数参数的默认值

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

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

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

参数的默认值也可以是一个表达式。参数默认值不是传值的，而是每次都重新计算默认值表达式的值。

let x = 99;
function foo(p = x + 1) {
  console.log(p);
}
foo() // 100

x = 100;
foo() // 101

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

参数默认值可以与结构赋值的默认值，结合起来使用。

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 read property 'x' of undefined

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

function foo({x, y = 5} = {}) {
  console.log(x, y);
}
// 解构赋值的默认值
foo() // undefined 5

只有当函数的参数是一个对象时，变量的x和y才会通过解构赋值生成，因此提供一个空对象作为参数的默认值才可以确保x和y可以生成。

参数默认值的位置

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

// 例一
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]

上面的代码中，有默认值的参数都不是尾参数。若想使用参数的默认值只能通过显式的输入undefined。当传入undefined时将触发该参数等于默认值，null则没有这个效果。

function foo(x = 5, y = 6) {
  console.log(x, y);
}

foo(undefined, null)
// 5 null

函数的length属性

制定了默认值以后，函数的length属性，将返回没有指定默认值的参数的个数。

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

length属性的含义是该函数预期传入的参数个数。某个参数指定默认值以后，预期传入的参数个数就不包括这个参数了。同理，rest参数也不会计入length属性。

(function(...args) {}).length // 0

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

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

rest参数

ES6 引入了 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

name 属性

函数的name属性，返回函数的函数名称。

function foo() {}
foo.name // "foo"

如果将一个匿名函数赋值给一个变量，ES5 的name属性，会返回空字符串，而 ES6 的name属性会返回实际的函数名。

var f = function () {};

// ES5
f.name // ""

// ES6
f.name // "f"

如果将一个具名函数赋值给一个变量，则 ES5 和 ES6 的name属性都返回这个具名函数原本的名字。

const bar = function baz() {};

// ES5
bar.name // "baz"

// ES6
bar.name // "baz"

箭头函数

ES6 允许使用 =>定义函数。

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

注：如果函数只有一个参数，那么可以省略掉括号，如果函数的函数体只有一条返回语句，那么可以省略掉花括号和return。

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

let f = () => 5;
// 等价于
let f = function(){
    return 5;
}

let sum = (num1, num2) => num1 + num2;
// 等价于
let sum = function(num1, num2){
    return num1+num2
}

如果箭头函数的代码块部分多于一条语句，就要使用大括号扩起来，并使使用return语句返回。

var sum = (num1, num2) => {
    let sum = num1 + num2;
    return sum;
}

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

  // 直接返回一个对象
   let getTempItem = id =>({id: id, temp: 10});
   console.log(getTempItem(10));

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

const full = ({ first, last }) => first + ' ' + last;
// 等价于
function full(person){
    return person.first + ' '+person.last;
}

箭头函数可以使得表达更加简洁。

const isEven =  n => n % 2 === 0;
const square =  n => n * n;

箭头函数可以用来简化回调函数。

// es5函数的写法
[1, 2, 3].map(function(x){
    return x * x;
});

// 箭头函数的写法
[1,2,3].map(x => x * x);

排序的写法。

// es5函数写法
let result = values.sort(function(a, b){
    return a - b;
});

// 箭头函数写法
let result = values.sort((a, b) => a - b );

箭头函数使用注意点

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用rest参数替代。
不可以使用yield命令，因此箭头函数不能用作Generator。

关于箭头函数中 `this`的说明

this对象的指向是可变的，但是在箭头函数中，它是固定的。

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

// 编译成es5的代码如下：
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  });
}

var id = 21;
foo.call({
  id: 42
});

this指向的固化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正式因为它没有this，所以也就不能用作构造函数。

It's my life