四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 5log(1, 2) // 1 2function foo({x, y = 5}) {console.log(x, y);}foo({}) // undefined 5foo({x: 1}) // 1 5foo({x: 1, y: 2}) // 1 2foo() // 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 学习吧），一起学习进步：