es6-函数扩展

在es6中更新了不少函数的特性。其中在开发经常使用的有参数默认值，不定参数，展开运算符和箭头函数等。

参数默认值

在es5函数的默认值是用||实现:

function func(url, timeout, cb) {
  timeout = timeout || 2000;
  cb = cb || function() {};

  console.log(url, timeout, cb);
}

func('a.com');  // a.com 2000 function() {}
func('b.com', 0);  // b.com 2000 function() {}
复制代码

这种方式能够看出若是参数传递一个转为boolean值为false的状况都会用默认值。除非在函数里面判断参数是否为undefiend再使用默认值。

在es6中，能够直接在参数列表直接用=赋值方式定义默认值：

function func(url, timeout = 2000, cb = function() {}) {
  console.log(url, timeout, cb);
}

func('a.com'); // a.com 2000 function() {}
func('b.com', 0); // b.com 0 function() {}
复制代码

上面的代码在不传或者传入undefiend时才使用默认值。

默认值可使用函数调用的方式。当函数调用是才会执行参数的默认值函数，声明是不执行：

let value = 5;

function getValue() {
  return value++;
}

function add(a, b = getValue()) {
  return a + b;
}

console.log(add(1)); // 6
console.log(add(1)); // 7
console.log(add(1, 2)); // 3
复制代码

默认值容许使用左边先声明的参数变量，不容许使用后面的参数，由于此时处于临时死区。

function getValue(value) {
  return value;
}

function add(a, b = getValue(a)) {
  return a + b;
}

console.log(add(1)); // 2
console.log(add(1, 2)); // 3
复制代码

剩余参数

当函数调用当参数比声明时多，要访问声明的参数能够遍历arguments。在es6中，提供剩余参数这一特性，用...args表示，args表示多余参数的数组：

function func(a, ...args) {
  console.log(args);  // [2,3]
  return args.reduce((pre, cur) => pre + cur, a);
}

console.log(func(1, 2, 3));
复制代码

剩余参数必须是最后一个参数，而且不容许在对象的set函数使用，由于set函数只能传递一个参数。

function func(a, ...args, b) {
  console.log(args); 
}

console.log(func(1, 2, 3));  // Rest parameter must be last formal parameter
复制代码

展开运算符

若是咱们须要把一个数组每一个元素做为函数调用的参数，在es5中能够用apply方式调用：

const arr = [1, 2, 3];

console.log(Math.max.apply(Math, arr)); // 3
复制代码

在es6中利用开展运算符能够更方便调用。展开运算符用...符号对一个数组拆散，做为函数的参数：

const arr = [1, 2, 3];

// 能够在其余参数共用
console.log(Math.max(...arr, 0)); // 3
复制代码

箭头函数

在es6引入的一种新的定义函数的方式，基本用法：

// 无参数
const func = () => {};

// 单个参数省略括号
const funcA = a => a;

// 多个参数
const funcB = (a, b) => a + b;

// 多条语句用{}包括函数体
const funcC = (a, b) => {
  b++;
  return a + b;
};

// 返回对象
const funcD = () => ({ a: 1 });
复制代码

没有this绑定。在箭头函数中无this对象，它的值为最近一个不是箭头函数的this。

let obj = {
  name: 'wozien',

  show: function() {
    return () => {
      // 这里的this就是调用show函数的this
      console.log(this.name);
    };
  }
};

obj.show()();
复制代码

不能做为new调用。 箭头函数没有函数内部属性[[Constructor]]，因此没法做为构造函数。

const Person = name => {
  this.name = name;
};

new Person('wozien');  // TypeError: Person is not a constructor
复制代码

没有arguments参数。取值和this相似：

function func(a) {
  return () => {
    console.log(arguments[0]);
  };
}

func(1)();  // 1
复制代码

没法经过call和apply改变this指向，可是能够执行函数。

let obj = {
  name: 'wozien'
};

const show = () => {
  console.log(this.name);
};

show.call(obj);  // undefined
复制代码

总而言之，箭头函数只是看成是普通函数一种简写方式，在大部分场景都适用，好比在一个对象内绑定回调函数，并且回调函数用到该对象的属性等，这是回调函数就能够用箭头函数定义。

咱们不建议箭头函数做为对象方法的定义，由于这违背了咱们在方法中使用对象属性的初衷。

let obj = {
  name: 'wozien',

  show: () => {
    console.log(this.name);
  }
};

obj.show();  // undefined
复制代码

参考

github.com/mqyqingfeng…

>>>原文地址