文章目录
- 前言
- 一、箭头函数
- 1.1 基本语法
- 1.2 带参数的箭头函数
- 1.3 this指针指向谁？
- 二、forEach遍历数组
- 总结
前言
随着JavaScript语言的不断发展，ES6（ECMAScript 2015）引入了许多新的语法和特性，其中箭头函数和forEach方法成为了开发者们经常使用的重要工具。箭头函数简化了函数的写法，提升了代码的可读性和简洁性；而forEach方法则为数组遍历提供了一种更为直观的方式。本文将深入探讨ES6箭头函数和forEach方法，介绍它们的基本用法和一些实际应用场景，帮助读者更好地理解和运用这两个强大的JavaScript特性。
一、箭头函数
1.1 基本语法
语法:
()=>{//函数体}
示例代码：
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
</body>
<script>
const fn = ()=>{
console.log('fn')
}
fn()
</script>
</html>
1.2 带参数的箭头函数
(x,y,z,...)=>{//函数体}
当只有一个参的时候可以省略小括号
只有一行代码的时候可以省略大括号
只有一行代码的时候，可以省略return
示例代码：
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
</body>
<script>
const fn = (x)=>{
console.log(x)
}
fn(1)
</script>
</html>
1.3 this指针指向谁？
JavaScript的箭头函数的this指向在定义函数时确定，并且在整个函数生命周期中保持不变。与普通函数不同，箭头函数的this值取决于函数所在的上下文，而不是调用它的方式。
具体来说：
箭头函数没有自己的this：箭头函数内部没有this绑定，它会从定义它的作用域链的上一层继承this。这意味着箭头函数的this与外层的非箭头函数的this保持一致。
词法作用域决定this：箭头函数的this值是词法作用域的this，而不是运行时的this。这意味着箭头函数的this取决于它所在的代码块，而不是调用方式。
这种行为与普通函数不同，普通函数的this在运行时才确定，并且取决于函数被调用时的上下文。这样的设计使得箭头函数在某些情况下更为简洁和直观，尤其是在需要访问外部作用域的this时。
举个例子：
function Person() {
this.age = 0;
setInterval(() => {
// 箭头函数的this指向Person函数的this
this.age++;
console.log(this.age);
}, 1000);
}
const person1 = new Person();
在这个例子中，箭头函数内部的this指向Person函数的this，因此每秒钟age会递增，并且this.age与person1.age指向同一个值。
二、forEach遍历数组
语法格式：
被遍历的数组.forEach((item,index)=>{
//item是元素
//index是下标
})
注意
- forEach 主要是遍历数组
- 参数当前数组元素是必须要写的，
索引号可选。
示例代码：
// 创建一个数组
const fruits = ['apple', 'banana', 'orange', 'grape'];
// 使用forEach遍历数组，并输出每个元素
fruits.forEach(function(fruit) {
console.log(fruit);
});
总结
ES6箭头函数和forEach方法作为现代JavaScript中的重要特性，为开发者提供了更便捷、简洁的编码方式。箭头函数不仅让函数定义更加简洁，还解决了传统函数中this关键字引起的一些问题，使得代码更易读、易维护。而forEach方法则为数组的遍历提供了一种更为语义化的选择，使得代码更具可读性。通过深入了解和熟练使用这两个特性，开发者能够提高代码的效率，写出更为现代化和优雅的JavaScript代码。在进阶的道路上，ES6箭头函数和forEach方法无疑是必备的利器。
