es6函数之箭头函数用法实例详解

关于es6函数之箭头函数用法实例详解，我来为你进行详细的讲解。

什么是箭头函数？

箭头函数是ES6中新增的一个函数语法，它是一个匿名函数，语法比传统函数更加简洁。箭头函数的定义方式如下：

// 无参箭头函数
() => {}

// 有参箭头函数
(arg1, arg2) => {}

// 带表达式的箭头函数
(arg1, arg2) => arg1 + arg2

// 带代码块的箭头函数
(arg1, arg2) => {
    // some code
}

箭头函数和传统函数的最大不同就是箭头函数没有自己的this、arguments、super和new.target绑定。箭头函数内的this和外部的this是一样的，其作用域取决于外层最近的非箭头函数作用域。

箭头函数的优点

相对于传统函数，箭头函数具备以下优点：

• 简洁：语法非常简洁，可以让你写出更加精简的代码。
• 易读：代码清晰，不需要使用function关键字，代码可读性更好。
• 不需要绑定this：箭头函数内的this和外部的this是一样的，避免了传统函数经常出现的this指向问题。

箭头函数使用说明

基本用法

下面是箭头函数的一个基本用法，用来计算a、b 两个数的和：

const sum = (a, b) => a + b;

console.log(sum(1, 2)); // 3

使用map函数

在数组中使用箭头函数常常是极比如使用map函数筛选出年龄大于18岁的人员。下面是代码示例：

const users = [
    {name: 'Tom', age: 20},
    {name: 'Jack', age: 16},
    {name: 'Lucy', age: 32},
    {name: 'Mike', age: 24},
];

const adults = users.filter(user => user.age > 18);

console.log(adults); // [{name: "Tom", age: 20}, {name: "Lucy", age: 32}, {name: "Mike", age: 24}]

在上述示例代码中，我们使用了箭头函数来筛选年龄大于18岁的人员，filter函数将符合条件的用户返回至我们的新数组中。

总结

箭头函数作为ES6最实用的语言特性之一，可以极大地简化我们的代码，并且避免了很多传统函数常常会带来的this指向问题。但在实际使用过程中，我们也需要注意诸多细节问题，如箭头函数的参数问题等，因此在使用箭头函数时一定要注意安全、简洁、易读这些标准。