ES6 函数

1.函数参数的默认值

（1）基本用法

ES6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法。

function log(x, y) {
  y = y || 'World';
  console.log(x, y);
}
log('Hello')                 // Hello World
log('Hello', 'JavaScript')   // Hello JavaScript
log('Hello', '')             // Hello World，如果y赋值对应的布尔值为false，那么该赋值不起作用。

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

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

ES6 的写法有两个好处：一、阅读代码的人，可以立刻意识到哪些参数是可以省略的，不用查看函数体或文档。二、有利于将来的代码优化，即使未来的版本在对外接口中，彻底拿掉这个参数，也不会导致以前的代码无法运行。

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

function a(x=1,y=2){
    var x = 3;
    console.log(x);  //可以
    let y = 5;
    console.log(y);//error
}

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

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

参数默认值不是传值的，而是每次调用函数时都重新计算默认值表达式的值。

let x = 4;
function a(p = Math.pow(x,2)) {
  console.log(p);
}
a()        // 16
x = 2;
a();      //4

（2）函数的length属性

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

function a(p,x,y=1) {
  console.log(p);
}
function s(p,x=1,y) {
  console.log(p);
}
console.log(a.length);
//2,只会查看从左往右碰到第一个定义默认参数为止的未定义默认值参数的数量。
console.log(s.length);
//1

（3）参数默认值的位置。

定义了默认值的参数，应该是函数的尾参数。因为这样比较容易看出来，到底省略了哪些参数。如果把定义了默认值的参数放在未定义默认值的参数前面，那么函数的length属性会返回参数从左往右开始计算，碰到第一个定义了默认值的参数结束。

2.rest参数

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

function compare(v1,v2){
    if(v1>v2){
        return 1;
    }
    else return -1;
}
// arguments变量的写法
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort(compare);
}

// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();
console.log(sortNumbers(1,2,3,7,42,354,11));

arguments对象不是数组，而是一个类似数组的对象。所以为了使用数组的方法，必须使用Array.prototype.slice.call先将其转为数组。rest 参数就不存在这个问题，它就是一个真正的数组，数组特有的方法都可以使用。

注意，rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。并且函数的length属性，不包括 rest 参数。

function add(...values) {
  let sum = 0;
  for (var val of values) {
    sum += val;
  }
  return sum;
}
console.log(add(1,2,3,4,5,6));
//21

3.严格模式

从 ES5 开始，函数内部可以设定为严格模式。ES2016 做了一点修改，规定只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错。

// 报错
function doSomething(a, b = a) {
  'use strict';
  // code
}

// 报错
const doSomething = function ({a, b}) {
  'use strict';
  // code
};

// 报错
const doSomething = (...a) => {
  'use strict';
  // code
};

const obj = {
  // 报错
  doSomething({a, b}) {
    'use strict';
    // code
  }
};

4.name属性

函数的name属性，返回该函数的函数名。ES6 对这个属性的行为做出了一些修改。如果将一个匿名函数赋值给一个变量，ES5 的name属性，会返回空字符串，而 ES6 的name属性会返回实际的函数名。

5.箭头函数

 （1）基本用法

ES6允许使用“箭头”（=>）来定义函数。箭头函数提供了一种更加简洁的函数书写方式。

基本语法是：参数 => 函数体

var f = v => v; //第一个v表示函数参数
// 等同于
var f = function (v) {
  return v;
};

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

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

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

当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。

var f = (a,b) => {let result = a+b;  return result;  }
f(6,2);  // 8

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

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

rest 参数与箭头函数结合的例子。

const numbers = (...nums) => nums;
//返回所有参数
numbers(1,2,3,4,5);
// [1,2,3,4,5]

const headAndTail = (head, ...tail) => [head, tail];
//返回head,tail组成的数组。而tail因为rest参数的原因它也是一个数组。
headAndTail(1, 2, 3, 4, 5)
// [1,[2,3,4,5]]

（2）箭头函数使用注意点

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

（3）不适合场景

第一个场合是定义对象的方法，且该方法内部包括this。

var Person = {
    'age': 18,
    'sayHello': ()=>{
        console.log(this.age);
      }
};
var age = 20;
Person.sayHello();  // 20
// 此时 this 指向的是全局对象
 
var Person1 = {
    'age': 18,
    'sayHello': function () {
        console.log(this.age);
    }
};
var age = 20;
Person1.sayHello();   // 18
// 此时的 this 指向 Person1 对象

第二个场合是需要动态this的时候，也不应使用箭头函数。

var button = document.getElementById('userClick');
button.addEventListener('click', () => {
     this.classList.toggle('on');
});

 

6.尾调用

尾调用（Tail Call）是函数式编程的一个重要概念，就是指某个函数的最后一步是调用另一个函数。

以下三种情况，都不属于尾调用。

// 情况一调用函数g之后，还有赋值操作，所以不属于尾调用。
function f(x){
  let y = g(x);
  return y;
}

// 情况二属于调用后还有操作，即使写在一行内。
function f(x){
  return g(x) + 1;
}

// 情况三属于函数体最后面还有一个省略的“return undefined;”语句
function f(x){
  g(x);
}