【JS进阶】ES6箭头函数、forEach遍历数组

人才程序员

已于 2024-06-15 19:51:51 修改

阅读量2k

点赞数 23

分类专栏：前端三件套文章标签： javascript es6 开发语言 ecmascript 前端 html5

于 2024-01-29 12:48:13 首次发布

本文链接：https://blog.csdn.net/m0_62599305/article/details/135909606

版权

前端三件套专栏收录该内容

32 篇文章 0 订阅

订阅专栏

本文详细介绍了ES6中箭头函数的语法、带参数的用法以及this指向规则，同时概述了forEach方法的用法和特点，帮助开发者提升JavaScript编程效率和代码可读性。

摘要由CSDN通过智能技术生成

文章目录

前言
一、箭头函数
- 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方法无疑是必备的利器。

人才程序员

关注

23
点赞
踩
24

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JS进阶】ES6箭头函数、forEach遍历数组

随着JavaScript语言的不断发展，ES6（ECMAScript 2015）引入了许多新的语法和特性，其中箭头函数和forEach方法成为了开发者们经常使用的重要工具。箭头函数简化了函数的写法，提升了代码的可读性和简洁性；而forEach方法则为数组遍历提供了一种更为直观的方式。本文将深入探讨ES6箭头函数和forEach方法，介绍它们的基本用法和一些实际应用场景，帮助读者更好地理解和运用这两个强大的JavaScript特性。
复制链接

扫一扫