关键词

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

一文带你玩转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关键字,使代码更加简洁。

本文链接:http://task.lmcjl.com/news/11162.html

展开阅读全文