ES6新特性-02

第四章：解构赋值

解构赋值是一种在JavaScript中非常有用的语法，它也是ES6中的新特性，它可以从数组和对象中提取值，并将它们赋给变量。在本章中，我们将深入探讨解构赋值，包括数组解构、对象解构和默认值的使用。

1. 数组解构

数组解构是从数组中提取值并将其赋给变量的过程。它通过使用方括号[]来实现，其中变量名放在等号的左边，数组放在等号的右边。

• 基本数组解构：可以通过在等号左侧的方括号中列出变量来提取数组中的元素，并按照数组的顺序进行分配。

  const colors = ["red", "green", "blue"];
  const [color1, color2, color3] = colors;
  
  console.log(color1); // "red"
  console.log(color2); // "green"
  console.log(color3); // "blue"
  

• 跳过不需要的值：通过在解构模式中使用逗号，可以跳过不需要的值。

  const numbers = [1, 2, 3, 4, 5];
  const [first, , , , last] = numbers;
  
  console.log(first); // 1
  console.log(last); // 5
  

• 剩余数组元素：剩余运算符...，我们可以通过...来获取数组中的剩余元素。

  const scores = [85, 92, 78, 90, 88];
  const [highest, ...rest] = scores;
  
  console.log(highest); // 85
  console.log(rest);    // [92, 78, 90, 88]
  

2. 对象解构

对象解构是从对象中提取值并将其赋给变量的过程。它通过使用花括号{}来实现，其中变量名和属性名需要匹配。

// 基本对象解构
const person = { name: "Alice", age: 30 };
const { name, age } = person;

console.log(name); // "Alice"
console.log(age);  // 30

通过这几个例子你应该可以看出来，其实对数组和对象进行解构是类似的，但是由于数组存在顺序，所以更多了跳过不需要的值的写法。

3. 默认值

在解构赋值中，我们可能会遇到提取的值并不存在的情况，我们可以为变量设置默认值，以防提取的值为undefined或不存在。默认值是通过使用等号=来指定的。

在数组解构中，默认值是这样设置的：

const [x = 0, y = 0] = [1];
console.log(x); // 1
console.log(y); // 0

在对象解构中，默认值是这样设置的：

const { name = "John", age = 25 } = {};
console.log(name); // "John"
console.log(age);  // 25

默认值对于确保变量具有一个合理的值非常有用，特别是当你不确定提取的数据是否包含特定的属性或者元素的时候。

4. 总结

解构赋值可以从数组和对象中提取值并将它们赋给变量，同时还支持默认值的设置。这在处理复杂数据结构、函数返回值和API响应时很有用。了解如何正确使用数组解构和对象解构，以及如何设置默认值，可以帮助我们编写更干净、简洁和可读的代码。

第五章：默认参数值

当使用函数时，我们通常需要传递一些参数。然而，有时我们可能希望在某些情况下省略某些参数，而函数在缺少这些参数时应该使用某些默认值。这是默认参数值的用武之地。

ES6引入了默认参数值，允许在函数定义中为参数设置默认值。这意味着，如果在函数调用时未提供某个参数，对应的形参将等于在函数定义中指定的默认值。

还记得吗？我们刚刚在第四章解构赋值中也见过一个叫做默认值的设置，没错，它就是我们默认参数值的一种写法,不记得的话我们也会在接下来再简单提一下在解构中的默认参数值~

1. 基本用法

在函数定义中，我们可以使用等号（=）为一个或多个参数指定默认值。如果函数调用时省略了这些参数，它们将使用默认值。

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}

greet("Alice"); // 输出 "Hello, Alice!"
greet();         // 输出 "Hello, Guest!"

在这个示例中，函数greet接受一个名为name的参数，如果未提供或者为undefined，它将采用默认值"Guest"。

2. 默认参数值和解构赋值

默认参数值非常适合与解构赋值结合使用。这可以帮助我们处理对象参数，而其中某些属性可能不存在。

function getDetails({ name = "Guest", age = 25 }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

getDetails({ name: "Alice", age: 30 }); // 输出 "Name: Alice, Age: 30"
getDetails({ name: "Bob" });             // 输出 "Name: Bob, Age: 25"（age采用默认值）
getDetails({});                          // 输出 "Name: Guest, Age: 25"（name和age都采用默认值）

在这个示例中，getDetails函数接受一个参数对象，其中包含name和age属性。如果这些属性不存在或为undefined，它们将会采用默认值，所以三个式子都存在输出。

3. 表达式作为默认值

默认参数值可以是任何合法的JavaScript表达式。这说明我们可以在设置默认值的时使用函数调用、运算或其他变量。

function calculateTax(amount, rate = 0.2 * amount) {
  return amount * rate;
}

console.log(calculateTax(1000)); // 输出 200000

在这个示例中，calculateTax函数接受两个参数，amount和rate。如果rate未提供，它将采用0.2乘以amount的值作为默认值。

4. 应用场景

默认参数值在很多情况下都非常有用，我们简单举几个例子：

• 提供可选参数：如果函数有一些可选的参数，但通常情况下使用默认值更方便，那么默认参数值可以减少函数的重载。
• 设置回退值：如果需要处理可能为undefined的值，可以使用默认参数值来设置回退值。
• 提供合理的默认设置：对于配置或选项参数，可以使用默认参数值来提供合理的默认设置，同时允许用户自定义。

默认参数值有助于简化函数的使用，提高可读性，同时为用户提供了更多的灵活性。通过使用默认参数值，我们就可以更好地定义函数的行为，不用担心用户会遗漏必需的参数。

第六章：展开运算符和剩余运算符

在ES6+中，展开运算符（Spread Operator）和剩余运算符（Rest Operator）是两个强大而灵活的特性。它们可以在处理数组和对象时进行各种操作，包括创建副本、合并数组、提取部分数据等。在本章中，我们将详细探讨这两个运算符的用法以及它们在实际编程中的应用。

1. 展开运算符（Spread Operator）

展开运算符的具体内容其实就是使用三个点（...）来展开数组或对象的内容，使其可以方便地用于其他数组或对象的创建和操作。我可以看一些关于展开运算符的示例和详细解释来理解：

1.1. 展开数组

展开运算符在数组中的使用是将一个数组的元素展开到另一个数组中。这在创建数组的副本或合并多个数组时非常有用。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];

console.log(combined); // [1, 2, 3, 4, 5, 6]

在这个示例中，[...arr1, ...arr2]将arr1和arr2中的元素展开到一个新数组combined中。

1.2. 展开对象

展开运算符还可以用于对象，它可以将一个对象的属性展开到另一个对象中。这在创建对象的副本或合并多个对象时非常有用。

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const combined = { ...obj1, ...obj2 };

console.log(combined); // { a: 1, b: 3, c: 4 }

在这个示例中，{ ...obj1, ...obj2 }将obj1和obj2中的属性展开到一个新对象combined中。但是要注意，如果对象之中的属性名重复的话，后面的值将会覆盖前面的值。

1.3. 创建数组副本

使用展开运算符，您可以轻松地创建数组的副本，而不必修改原始数组。这对于避免在不小心修改原始数组时非常有用。

const originalArray = [1, 2, 3];
const copyArray = [...originalArray];

console.log(copyArray); // [1, 2, 3]

1.4. 创建对象副本

同样，展开运算符允许您创建对象的副本，而不必影响原始对象。这有助于避免对原始对象的不必要更改。

const originalObject = { x: 1, y: 2 };
const copyObject = { ...originalObject };

console.log(copyObject); // { x: 1, y: 2 }

2. 剩余运算符（Rest Operator）

剩余运算符也是使用三个点（...），但它的应用范围是相反的。剩余运算符用于将数组中的剩余元素或对象中的剩余属性收集到一个变量中。下面是一些关于剩余运算符的示例和详细解释：

2.1. 收集剩余数组元素

剩余运算符用于将数组中的剩余元素收集到一个数组中。

const [first, ...rest] = [1, 2, 3, 4, 5];

console.log(first); // 1
console.log(rest);  // [2, 3, 4, 5]

是不是感觉有点眼熟，没错！在我们解构数组处出现的就是我们的剩余运算符...，在这个示例中，...rest将数组中剩余的元素收集到一个名为rest的数组中。

2.2. 收集剩余对象属性

剩余运算符还可以用于收集对象中的剩余属性。

const { a, ...rest } = { a: 1, b: 2, c: 3 };

console.log(a);    // 1
console.log(rest); // { b: 2, c: 3 }

在这个示例中，...rest将对象中除了a属性之外的其他属性收集到名为rest的对象中。

2.3. 用于函数参数

剩余运算符在函数参数中非常有用，它可以让函数接受任意数量的参数并将它们收集到一个数组中。

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // 15

在这个示例中，...numbers将函数中传递的所有参数收集到一个名为numbers的数组中，然后使用reduce计算它们的总和。如果不太好理解我就详细解释一下：

• 函数sum被定义，它使用剩余运算符...numbers来收集传递给它的所有参数，并将它们存储在名为numbers的数组中。
• numbers.reduce(...)使用reduce方法对numbers数组中的所有数字进行累加操作。reduce方法接受一个回调函数，这个回调函数接受两个参数：total（累加的结果）和num（数组中的每个数字）。
• 在每次迭代中，回调函数将当前的total与num相加，得到新的total。这个过程会在数组中的每个数字上进行迭代，直到得到最终的总和。
• 最后，console.log(sum(1, 2, 3, 4, 5));调用sum函数并传递了一系列数字作为参数。函数使用剩余运算符将这些数字收集到numbers数组中，然后计算它们的总和。
• 结果会被打印到控制台，您将看到console.log(sum(1, 2, 3, 4, 5));输出15，这是传递的数字的总和。

3. 综合样例

展开运算符和剩余运算符通常一起使用，以便在处理数组和对象时更加灵活。

const numbers = [1, 2, 3, 4, 5];
const [first, ...rest] = numbers;

console.log(first); // 1
console.log(rest);  // [2, 3, 4, 5]

const person = { name: "Alice", age: 30, city: "New York" };
const { name, ...info } = person;

console.log(name); // "Alice"
console.log(info); // { age: 30, city: "New York" }

这个示例是利用剩余运算符用于收集剩余的数组元素和对象属性，使我们能够轻松地处理它们。这个例子比较简单我就不过多赘述了~

4. 总结

展开运算符和剩余运算符是一个比较重要的特性，它们增加了处理数组和对象的灵活性。展开运算符用于展开数组和对象，剩余运算符用于收集剩余的数组元素和对象属性。它们一起工作，就可以实现各种强大的操作，从简单的数组合并到处理不定数量的函数参数。了解如何使用这些运算符将使我们的代码更具表达力和可维护性。