箭头函数、默认参数、剩余参数

在 JavaScript 中，箭头函数、默认参数和剩余参数是常用的语法特性，它们极大地提高了代码的简洁性和可读性。这些特性常用于函数表达式、函数传参等场景，理解这些特性对于写出高效、简洁的代码至关重要。

1. 箭头函数（Arrow Function）

箭头函数是 ES6 引入的一种更简洁的函数定义方式。与传统的函数表达式相比，箭头函数语法更加简洁，并且没有自己的 this，其 this 是从外部上下文中继承而来。

1.1 箭头函数的基本语法

箭头函数的基本语法形式如下：

const 函数名 = (参数1, 参数2, ...) => {
  // 函数体
};

1.2 箭头函数的特点

语法简洁：去除了 function 关键字，减少了冗余的代码。
this 绑定：箭头函数没有自己的 this，而是继承外部函数的 this，这在一些回调函数中非常有用。

1.3 代码案例：箭头函数使用示例

// 定义一个普通函数
const add = function(a, b) {
  return a + b;
};

// 使用箭头函数定义相同的功能
const addArrow = (a, b) => a + b;

// 调用函数
console.log(add(2, 3));  // 输出 5
console.log(addArrow(2, 3));  // 输出 5

中文注释说明：

add 是一个传统的函数表达式，而 addArrow 是一个箭头函数，两者实现相同的功能。
箭头函数的写法更加简洁，且不会创建自己的 this。

1.4 箭头函数的 `this` 绑定

function Person(name) {
  this.name = name;
  setTimeout(() => {
    console.log(this.name); // 箭头函数继承外部的 `this`
  }, 1000);
}

const person = new Person('张三');  // 输出 "张三"

中文注释说明：

在上面的例子中，箭头函数中的 this 绑定了外部的 this，即 Person 构造函数中的 this。

2. 默认参数（Default Parameters）

默认参数是 ES6 引入的一个功能，它允许在函数定义时为某些参数指定默认值，当调用函数时没有传递这些参数时，会使用默认值。

2.1 默认参数的语法

const 函数名 = (参数1 = 默认值1, 参数2 = 默认值2) => {
  // 函数体
};

2.2 代码案例：默认参数使用示例

// 定义一个函数，第二个参数有默认值
const greet = (name, greeting = '你好') => {
  return `${greeting}, ${name}!`;
};

// 调用函数时提供两个参数
console.log(greet('李四', '早上好'));  // 输出 "早上好, 李四!"

// 调用函数时只提供一个参数
console.log(greet('王五'));  // 输出 "你好, 王五!"

中文注释说明：

在这个示例中，greeting 参数有默认值 '你好'，如果在调用时没有传入 greeting，则默认值会被使用。

3. 剩余参数（Rest Parameters）

剩余参数是 ES6 中的一项新特性，它允许将不定数量的参数收集到一个数组中，通常用于处理函数的可变参数列表。

3.1 剩余参数的语法

const 函数名 = (...参数) => {
  // 函数体
};

...参数 会收集所有传入的参数，并将它们放入一个数组中。

3.2 代码案例：剩余参数使用示例

// 定义一个函数，使用剩余参数收集多个参数
const sum = (...numbers) => {
  return numbers.reduce((total, num) => total + num, 0);
};

// 调用函数时传入多个参数
console.log(sum(1, 2, 3, 4, 5));  // 输出 15

// 只传入两个参数
console.log(sum(10, 20));  // 输出 30

中文注释说明：

在这个例子中，sum 函数使用剩余参数 ...numbers 收集所有传入的参数，并将它们相加。
不同数量的参数都能被处理，剩余参数会将它们收集成一个数组进行计算。

3.3 剩余参数与 `arguments` 的区别

arguments 是函数内部的一个类数组对象，包含传入函数的所有参数，而剩余参数则是一个真正的数组。两者的区别如下：

arguments 是函数对象的一个属性，而剩余参数是函数参数的一部分。
arguments 不支持数组方法（如 map、filter），而剩余参数是数组，支持所有数组方法。

3.4 代码案例：`arguments` 和剩余参数对比

function showArguments() {
  console.log(arguments);  // 输出类数组对象
  console.log([...arguments]);  // 使用展开语法转换为数组
}

showArguments(1, 2, 3);  // 输出 { '0': 1, '1': 2, '2': 3 } 和 [1, 2, 3]

const showRest = (...args) => {
  console.log(args);  // 输出数组
};

showRest(1, 2, 3);  // 输出 [1, 2, 3]

中文注释说明：