ES6学习（函数扩展）

今天主要是学习ES6中函数的扩展。例如常用的箭头函数、函数参数默认值等。

一、箭头函数

ES6可以使用“=>”箭头来定义函数。
我们为什么喜欢使用箭头函数呢，因为它可以简化我们的代码，使之看起来更美观。
如果定义的函数不需要传参则使用空括号来；传一个参数时，可以直接使用这个参数；传参大于一个时，则需要使用括号把参数括起来。

//不传参数
var func = () => 1;
// 等同于
var func= function () {
  return 1;
};

//一个参数
var func = data => data;
// 等同于
var func= function (data) {
  return data;
};

//两个参数
var func = (data,index) => data[index];
// 等同于
var func= function (data,index) {
  return data[index];
};

如果箭头函数的代码块中的语句大于一条的话，需要用大括号括起来，还要使用return把结果返回。
如果没有用return返回的话，则调用函数结果是undefined

var func = data => {
	let tempIndex = 2;
	return data[tempIndex]
};

那使用箭头函数需要注意哪些呢？

（1）this指向问题，在箭头函数中this的指向是不变的，就是定义时所在的对象。
（2）不能使用new命令来创建对象。
（3）在函数体内不存在arguments对象，不能使用。可以用 rest 参数代替。
（4）箭头函数不能用作 Generator 函数。

什么时候不能使用箭头函数呢？

（1）定义对象方法

const calculator = {
    array: [1, 2, 3],
    sum: () => {   //修改  sum(){
        console.log(this === window); // => true
        return this.array.reduce((result, item) => result + item);
    }
};

console.log(this === window); // => true

// Throws "TypeError: Cannot read property 'reduce' of undefined"
//原因是箭头函数把函数上下文绑定到了 window 上
calculator.sum();

//相同的问题，在定义原型方法也会有
function Cat(name) {
    this.name = name;
}

Cat.prototype.sayCatName = () => {  //修改 function(){  
    console.log(this === window); // => true
    return this.name;
};

const cat = new Cat('Mew');
cat.sayCatName(); // => undefined

（2）定义事件回调

//给一个按钮添加点击事件
const btn= document.getElementById('Btn');
btn.addEventListener('click', () => {  //修改 function(){
    console.log(this === window); // => true
    this.innerHTML = '搜索';
});
//this的指向为window

二、参数默认值

可以给参数默认值，也可结合我们两章学习的解构赋值。
如果函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错。

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

log(1) // 1 5
log(1, 2) // 1 2


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

三、reset参数

用于获取函数的多余参数。是一个数组，该变量将多余的参数放入数组中。

function add(...values) {
  let sum = 0;
  for (var val of values) {
    sum += val;
  }
  return sum;
}
add(2, 5, 3) // 10

欢迎关注公众号（web学习吧），一起学习进步：