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

文章目录

  • 前言
  • 一、箭头函数
    • 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>Documenttitle>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    style>
head>
<body>
body>



<script>

    const fn = ()=>{
        console.log('fn')
    }

    fn()

script>

html>

【JS进阶】ES6箭头函数、forEach遍历数组_第1张图片

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>Documenttitle>
    <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是下标
})

注意

  1. forEach 主要是遍历数组
  2. 参数当前数组元素是必须要写的,
    索引号可选。

示例代码:

// 创建一个数组
const fruits = ['apple', 'banana', 'orange', 'grape'];

// 使用forEach遍历数组,并输出每个元素
fruits.forEach(function(fruit) {
  console.log(fruit);
});


总结

ES6箭头函数和forEach方法作为现代JavaScript中的重要特性,为开发者提供了更便捷、简洁的编码方式。箭头函数不仅让函数定义更加简洁,还解决了传统函数中this关键字引起的一些问题,使得代码更易读、易维护。而forEach方法则为数组的遍历提供了一种更为语义化的选择,使得代码更具可读性。通过深入了解和熟练使用这两个特性,开发者能够提高代码的效率,写出更为现代化和优雅的JavaScript代码。在进阶的道路上,ES6箭头函数和forEach方法无疑是必备的利器。

你可能感兴趣的:(Javascript保姆级教程,javascript,es6,开发语言,ecmascript,前端,html5)