一文带你玩转JavaScript的箭头函数

什么是箭头函数？

箭头函数是ES6引入的一种新的函数声明语法，它可以让我们更简洁地书写函数，并且可以解决一些this指向上的问题。

箭头函数与普通函数的区别在于箭头函数没有自己的this，它的this是词法作用域中的this，即在定义箭头函数时所处的上下文中的this。

箭头函数的基本语法

箭头函数有两种语法：

1. 不带参数的箭头函数

javascript
()=> {
// 函数体
}

1. 带参数的箭头函数

javascript
(参数1, 参数2, ...) => {
// 函数体
}

多个参数之间用逗号分隔，参数和箭头之间不能有空格。

对于只有一个参数的箭头函数，可以省略参数周围的括号：

参数 => {
    // 函数体
}

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

箭头函数与普通函数的区别在于this的指向。普通函数中的this是动态的，它的指向取决于函数的调用方式，而箭头函数中的this是静态的，它的指向在定义函数时就已经确定了。

例如：

const obj = {
    name: '张三',
    sayName() {
        console.log(this); // 输出：{ name: '张三', sayName: [Function: sayName] }
        function inner() {
            console.log(this); // 输出：全局对象
        }
        inner();
    },
    sayNameWithArrow() {
        console.log(this); // 输出：{ name: '张三', sayNameWithArrow: [Function: sayNameWithArrow] }
        const inner = () => {
            console.log(this); // 输出：{ name: '张三', sayNameWithArrow: [Function: sayNameWithArrow] }
        }
        inner();
    }
};
obj.sayName();
obj.sayNameWithArrow();

从输出结果可以看出，普通函数中的this指向的是调用该函数的对象（即obj），而内部的普通函数inner中的this指向的是全局对象。而箭头函数中的this永远指向定义函数时所处的上下文，即上面的例子中的obj对象。

箭头函数的使用场景

1. 简化回调函数的书写

箭头函数可以让我们更方便地书写回调函数，例如：

```javascript
const arr = [1, 2, 3, 4];

let newArr = arr.map(function(item) {
return item * 2;
});

// 使用箭头函数可以简化为：
let newArr = arr.map(item => item * 2);
```

1. 解决this指向的问题

箭头函数可以解决在普通函数中this指向的问题，例如：

```javascript
const obj = {
name: '张三',
sayName() {
setTimeout(function() {
console.log(this.name); // 输出：undefined
}, 1000);

       setTimeout(() => {
           console.log(this.name); // 输出：张三
       }, 1000);
   }

};
obj.sayName();
```

在上面的例子中，由于setTimeout函数是在全局上下文中调用的，因此内部的普通函数this指向的是全局对象，而箭头函数中的this指向的是定义函数时的上下文，即obj对象。

示例说明

下面给出两个使用箭头函数的示例：

示例1：计算商品价格

const products = [
    {
        name: '手机',
        price: 1999,
        count: 2
    },
    {
        name: '电脑',
        price: 8999,
        count: 1
    },
    {
        name: '耳机',
        price: 399,
        count: 3
    }
];

const totalPrice1 = products.reduce(function(total, product) {
    return total + product.price * product.count;
}, 0);

const totalPrice2 = products.reduce((total, product) => total + product.price * product.count, 0);

console.log(totalPrice1); // 输出：23396
console.log(totalPrice2); // 输出：23396

在上面的示例中，我们使用reduce方法计算商品的总价，第一个参数是回调函数，第二个参数是初始值。在普通函数的回调函数中，我们使用了this指向，而在箭头函数中，直接使用了total和product，使代码更加简洁。

示例2：获取数组元素的长度

const arr = ['hello', 'world', ''];

const len1 = arr.map(function(item) {
    return item.length;
});

const len2 = arr.map(item => item.length);

console.log(len1); // 输出：[5, 5, 0]
console.log(len2); // 输出：[5, 5, 0]

在上面的示例中，我们使用map方法计算数组元素的长度，第一个参数是回调函数。在普通函数中，我们需要使用return来返回长度，而在箭头函数中，可以直接省略return关键字，使代码更加简洁。