当前位置：首页 > web >正文

ES6/ES11知识点续二

web 2025/7/1 9:44:54

箭头函数

在 ES6 中，箭头函数（Arrow Functions） 是 JavaScript 的一种新语法，它使得定义函数变得更加简洁且易读。箭头函数不仅在语法上更紧凑，还有一些重要的行为区别，尤其是在 this 的绑定上。下面我们将详细介绍箭头函数的特性。
在这里插入图片描述

箭头函数的基本语法

箭头函数的语法使用箭头 => 来分隔参数和函数体，常见的格式如下：

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

示例：这是一个简单的箭头函数，接受两个参数 a 和 b，并返回它们的和。

如果函数体只有一行表达式，可以省略大括号 {} 和 return 关键字，如上所示。如果有多行代码，则需要使用大括号并明确使用 return：

const add = (a, b) => {return a + b;
};

箭头函数的特点

简洁的语法

箭头函数让函数的定义变得非常简洁。特别是在传递回调函数时，它比传统的函数表达式更简洁清晰。

省略小括号

let add = n=>{return n+n;
}

省略花括号
当代码体中只有一条语句的时候，可以省略花括号，此时return 必须省略，而且语句的执行结果就是函数返回值

let add= n => n+n;
console.log(add(5))

不绑定 this

传统的函数会根据调用的上下文来绑定 this，而箭头函数不会自己创建 this，它会继承外部作用域的 this。

function Counter() {this.num = 0;setInterval(function() {this.num++; // 这里的 this 指向全局对象，导致错误console.log(this.num);}, 1000);
}const counter = new Counter();

在上述代码中，this 会指向全局对象（在浏览器中是 window），导致 this.num++ 无法正确工作。

使用箭头函数改正：

function Counter() {this.num = 0;setInterval(() => {this.num++; // 箭头函数继承外部的 this，指向 Counter 实例console.log(this.num);}, 1000);
}const counter = new Counter();

在这个例子中，箭头函数继承了外部 Counter 函数中的 this，因此能够正确访问和修改 this.num。

无法作为构造函数

箭头函数不能用作构造函数，因为它没有自己的 this，也就无法在实例化时正确绑定 this。

示例：

const Person = (name) => {this.name = name;
};const p = new Person("Alice"); // 会抛出错误

上述代码会抛出错误，因为箭头函数没有构造函数的能力。

没有 arguments 对象

箭头函数没有自己的 arguments 对象。如果需要访问函数的参数，可以使用剩余参数（Rest Parameters）。

传统函数：

function example() {console.log(arguments);
}
example(1, 2, 3);

箭头函数：

const example = () => {console.log(arguments); // ReferenceError: arguments is not defined
};

如果需要使用类似 arguments 的功能，可以使用剩余参数：

const example = (...args) => {console.log(args);
};
example(1, 2, 3); // 输出 [1, 2, 3]

箭头函数与传统函数的比较

特性	箭头函数	传统函数
this 绑定	继承外部作用域的 this	根据调用方式决定 this 的值
是否可以作为构造函数	不能作为构造函数	可以作为构造函数
arguments 对象	不提供 arguments 对象	提供 arguments 对象
new 关键字支持	不支持	支持

使用场景

箭头函数适合于this无关的回调，定时器、数组的方法回调

结论

箭头函数是 JavaScript 中非常有用的语法糖，它可以使函数定义更加简洁，尤其在使用回调函数和处理 this 时非常方便。然而，它也有一些限制，例如不能作为构造函数和没有 arguments 对象，因此在某些情况下仍然需要使用传统的函数表达式。

函数参数的默认值设置

在 ES6 中，函数的参数可以为其设置默认值。如果调用函数时没有传递相应的参数，或者传递 undefined，则会使用默认值。这可以帮助简化代码，避免检查 undefined 的情况。接下来，我们将详细介绍如何设置函数参数的默认值。

函数参数的默认值语法

函数参数的默认值通过 = 运算符来设置。例如：

function greet(name = "Guest") {console.log(`Hello, ${name}!`);
}greet();          // 输出：Hello, Guest!
greet("Alice");   // 输出：Hello, Alice!

在上面的代码中，name 参数有一个默认值 “Guest”。如果调用 greet() 时没有传入 name，则会使用 “Guest” 作为默认值；如果传入了 “Alice”，则使用 “Alice”。

默认值与 undefined 的区别

如果函数调用时显式传递了 undefined 作为参数，默认值仍然会生效。因为在 JavaScript 中，undefined 会被视为“缺失的值”，所以它会触发默认值的应用。

function greet(name = "Guest") {console.log(`Hello, ${name}!`);
}greet(undefined); // 输出：Hello, Guest!

但是，如果传递了 null，默认值就不会生效，因为 null 是一个有效的值，不会被视为“缺失的值”。

function greet(name = "Guest") {console.log(`Hello, ${name}!`);
}greet(null);  // 输出：Hello, null!

默认值可以是表达式

默认值不仅可以是简单的常量，还可以是更复杂的表达式。例如，可以使用函数调用、运算或其他变量作为默认值。

function add(a, b = a + 1) {return a + b;
}console.log(add(5));    // 输出：11
console.log(add(5, 3)); // 输出：8

在这个例子中，b 的默认值是 a + 1，所以如果没有传递 b，则会使用 a + 1 作为默认值。

默认值与剩余参数（Rest Parameters）一起使用

默认值与剩余参数（Rest Parameters）结合使用时，可以为函数的多个参数设置默认值。

function displayInfo(name = "Anonymous", ...hobbies) {console.log(`Name: ${name}`);console.log(`Hobbies: ${hobbies.join(", ")}`);
}displayInfo("Alice", "Reading", "Hiking"); // 输出：Name: Alice Hobbies: Reading, Hiking
displayInfo(undefined, "Cooking", "Dancing"); // 输出：Name: Anonymous Hobbies: Cooking, Dancing