箭头函数第一章【什么是箭头函数】

箭头函数与普通函数的区别

在 ES6 中，我们可以使用（=>）定义函数。

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

与普通函数的区别在于，箭头函数如果只有一个参数的时候，可以省略括号。

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

如果箭头函数的代码块只有1条语句，那么可以省略大括号，不仅如此，还可以省略return。

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

如通箭头函数的点开多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

var sum = (num1, num2) => { return num1 + num2; }

对于初学者，在使用箭头函数返回对象的时候容易出错。为什么呢？因为函数体需要用大括号包裹，同时对象也需要用大括号包裹。如果返回对象的时候只写一个括号，那么就会被错。

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

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

一道面试题：

以下代码会报错吗？

let foo = () => { a: 1 };
foo() // undefined

答案是不会报错的。虽然可以运行，但会得到错误的结果。

上面代码中，最初的目的是返回一个对象{ a: 1 }，但是由于JavaScript引擎认为大括号是代码块，所以执行了一行语句a: 1。这时，a可以被解释为语句的标签，因此实际执行的语句是1;然后函数就结束了，没有返回值。

箭头函数的优点

箭头函数使得表达更加简洁。

//使用箭头函数更加简洁
const isEven = n => n % 2 === 0;
const square = n => n * n;


// 如果写成普通函数
function isEven(n) {
  return n % 2 === 0;
}

function square(n) {
  return n * n;
}

上面代码只用了两行，就定义了两个简单的工具函数。如果不用箭头函数，可能就要占用多行，而且还不如现在这样写醒目。

简化回调函数：

// 正常函数写法
[1,2,3].map(function (x) {
  return x * x;
});
// 箭头函数写法
[1,2,3].map(x => x * x);