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

墨蓝 2023-10-14 09:21 69阅读 0赞

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

在 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);