函数扩展

默认值

function sayHi(name='xiaohui') {
  console.log(`hi, ${name}`)
}
sayHi()
sayHi('boy')

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

undefined，将触发该参数等于默认值，null则没有这个效果

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

foo(undefined, null)
// 5 null

解构赋值与默认值的结合

//ex1
function m1({x = 0, y = 0} = {}) {
  return [x, y];
}
//ex2 
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]

原因：

ex1： 调用函数需要你传递一个对象，如果你没传对象就用默认值对象{}，默认值对象里面都是 undefined， 所以属性使用初始值

ex2：参数需要是一个对象，如果没传对象，就用默认值对象{ x: 0, y: 0 }如果传了对象，就使用你传递的对象

函数的 length 属性

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

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

后文的 rest 参数也不会计入length属性。

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

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

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

name 属性

函数的name属性，返回该函数的函数名

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

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
上面代码的add函数是一个求

箭头函数

var f = v => v+1
//等价于
var f = function(v){return v+1}

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

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

var arr = [1, 2, 3]
var arr2 = arr.map(v=>v*v)
arr2 //[1, 4, 9]

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

//  等同于如下ES5
function foo() {
  var _this = this;
  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

箭头函数注意点：

• 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

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

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

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