ES6学习笔记（函数）

1.函数参数的默认值

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

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

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

参数变量是默认声明的，因此不能用 let 或 const 再次声明。

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

 使用参数默认值时，函数不能有同名参数。

// 不报错 function foo(x, x, y) {
  // ... }
 // 报错 function foo(x, x, y = 1) {
  // ... } // SyntaxError: Duplicate parameter name not allowed in this context

 参数默认值能够与解构赋值的默认值，结合起来使用。

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

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

 

2.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

 注意，rest 参数以后不能再有其余参数（即只能是最后一个参数），不然会报错。

// 报错 function f(a, ...b, c) {
  // ... }

 

3.name 属性

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

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

 

4.箭头函数

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 full = ({ first, last }) => first + ' ' + last;
 // 等同于 function full(person) {
  return person.first + ' ' + person.last;
}

 箭头函数的一个用处是简化回调函数。

// 正常函数写法 var result = values.sort(function (a, b) {
  return a - b;
});
 // 箭头函数写法 var result = values.sort((a, b) => a - b);