JS中的箭头函数
source link: https://www.fly63.com/article/detial/12483
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
扫一扫分享
在JavaScript中，箭头函数是一种简化的函数语法，它在ES6（ECMAScript 2015）引入。箭头函数的语法比传统的function表达式更简洁，同时还有一些特性，例如继承外部作用域的this值。
箭头函数的基本语法如下：
(param1, param2, ..., paramN) => { statements }
(param1, param2, ..., paramN) => expression当箭头函数只有一个参数时，可以省略括号：
param => { statements }
param => expression当函数体只包含一个返回值表达式时，可以省略花括号并直接返回该表达式的值：
(param1, param2) => param1 + param2需要注意的是，箭头函数有以下特性：
1. 没有自己的this值 ：箭头函数内的this值继承自包含它的函数作用域，这有助于解决一些this指向问题。
2. 没有arguments对象 ：在箭头函数内部，无法访问传统函数中的arguments对象。但你可以使用剩余参数（...rest）语法来获取参数列表。
3. 不能用作构造函数 ：箭头函数不能用作构造函数，因此不能使用new运算符实例化。
4. 没有原型 ：箭头函数没有prototype属性，因为它们不能作为构造函数使用。
更多箭头函数的用法
1. 链式调用：
箭头函数的简洁语法使得在链式调用中使用它们变得更加容易。例如，我们可以在数组上使用多个数组方法并将箭头函数作为回调函数：
const numbers = [1, 2, 3, 4, 5];
const doubledAndFiltered = numbers
.map(num => num 2)
.filter(num => num > 5);
console.log(doubledAndFiltered); // [6, 8, 10]2. 事件处理程序：
箭头函数可以方便地用作事件处理程序，因为它们继承了外部作用域的 this 值。这样就避免了使用 bind 来绑定事件处理程序的需要。例如：
class Button {
constructor() {
this.buttonElement = document.createElement('button');
this.buttonElement.textContent = 'Click me!';
this.buttonElement.addEventListener('click', () => this.handleClick());
document.body.appendChild(this.buttonElement);
}
handleClick() {
console.log('Button clicked!');
}
}
const button = new Button();3. 在数组方法中使用：
常见的数组方法，如 filter 、 reduce 、 forEach 等，也可以与箭头函数一起使用，以简化代码并使其更具可读性：
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15
numbers.forEach((num, index) => console.log( Index ${index}: ${num} ));4. 立即调用的箭头函数：
箭头函数还可以作为立即调用函数表达式（IIFE）使用，这在某些场景下有助于限制变量的作用域：
const result = (() => {
const localVar = 'I am only available within this IIFE';
return localVar.toUpperCase();
})();
console.log(result); // 'I AM ONLY AVAILABLE WITHIN THIS IIFE'5. 对象字面量和箭头函数：
在箭头函数中直接返回对象字面量时，需要注意语法。由于大括号 {} 在箭头函数中被解释为代码块，而不是对象字面量，因此需要在对象字面量周围添加额外的括号：
const getObject = () => ({ key: 'value' });
console.log(getObject()); // { key: 'value' }6. 多行箭头函数：
虽然箭头函数通常用于简洁的单行函数，但它们也可以用于多行函数。在这种情况下，需要使用大括号包裹函数体，并在需要返回值时使用 return 关键字：
const addWithLogging = (a, b) => {
console.log( Adding ${a} and ${b} );
return a + b;
};
console.log(addWithLogging(3, 4)); // 输出 "Adding 3 and 4"，然后输出 77. 箭头函数与解构参数：
箭头函数可以与解构参数一起使用，可以更简洁地处理对象或数组。以下是一些示例：
// 对象解构
const users = [
{ id: 1, name: 'Alice', age: 30 },
{ id: 2, name: 'Bob', age: 25 },
{ id: 3, name: 'Charlie', age: 35 },
];
const getUserNames = users.map(({ name }) => name);
console.log(getUserNames); // 输出：['Alice', 'Bob', 'Charlie']
// 数组解构
const points = [
[1, 2],
[3, 4],
[5, 6],
];
const getDistancesFromOrigin = points.map(([x, y]) => Math.sqrt(x x + y y));
console.log(getDistancesFromOrigin); // 输出：[2.23606797749979, 5, 7.810249675906654]8. 箭头函数和 this ：
由于箭头函数在其词法作用域内捕获 this 值，因此在某些情况下可能导致问题。例如，在对象方法中使用箭头函数时，它不会获取到对象的 this ，而是捕获到外部作用域的 this 。为了解决这个问题，需要使用传统的 function 声明或表达式。
const obj = {
value: 10,
getValue: function() {
// 正常的function表达式， this 指向obj
return this.value;
},
getValueWithArrow: () => {
// 箭头函数， this 指向外部作用域（在这种情况下是全局对象或undefined）
return this.value;
},
};
console.log(obj.getValue()); // 输出：10
console.log(obj.getValueWithArrow()); // 输出：undefined（严格模式）或全局对象的value属性9. 箭头函数作为高阶函数的参数：
在处理高阶函数时，箭头函数非常有用，因为它们可以使代码更简洁。高阶函数是接受一个或多个函数作为参数、返回一个函数的函数。这里有一个使用箭头函数的高阶函数示例：
const add = a => b => a + b;
const add5 = add(5);
console.log(add5(3)); // 输出：8在上面的示例中， add 函数接受一个参数 a 并返回一个新的函数，该函数接受另一个参数 b 并返回 a + b 的结果。
10. 不要在所有场景中都使用箭头函数：
尽管箭头函数有很多优点，但并非所有场景都适用。以下是一些避免使用箭头函数的情况：
- 在需要动态上下文的函数（如事件处理程序）中，箭头函数继承了它们的词法作用域。在这种情况下，可能需要使用 function 声明或表达式，以便根据需要访问当前上下文。
- 当需要使用 arguments 对象时，箭头函数不会创建它。在这种情况下，需要使用传统的 function 声明或表达式。
总之，箭头函数的简洁语法和特性使得它们在许多情况下都非常有用，还可以用在setTimeout、错误处理、Promise中等等。但是，在遇到 this 、 arguments 或其他相关问题时，有时可能需要使用传统的 function 声明或表达式来解决特定问题。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK