ES6/ES11知识点 续二

箭头函数

在 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无关的回调，定时器、数组的方法回调

结论

箭头函数是 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

在这个例子中，name 参数有默认值 Anonymous，而剩余参数 …hobbies 可以捕获所有额外传入的参数。

结论

ES6 的函数参数默认值功能非常强大，能够让你在函数参数缺失时提供合理的默认行为，减少了很多代码中的条件检查。无论是简单的常量，还是复杂的表达式，默认值都能够灵活应用，为你的代码带来更多便利。