【JavaScript】ECMAS6（ES6）新特性概览（二）：解构赋值、扩展与收集、class类全面解析

🔥 个人主页：空白诗 🔥 热门专栏：【JavaScript】

文章目录

- [🌿 引言](#🌿 引言)
- [五、 Destructuring Assignment - 解构赋值，数据提取的艺术 🎨](#五、 Destructuring Assignment - 解构赋值，数据提取的艺术 🎨)
- - [📌 数组解构](#📌 数组解构)
  - [📌 对象解构](#📌 对象解构)
  - [📌 特殊用法与技巧](#📌 特殊用法与技巧)
  - [📌 小结](#📌 小结)
- [六、 Spread and Rest Operators - 扩展与收集，数组操作新境界 🌀](#六、 Spread and Rest Operators - 扩展与收集，数组操作新境界 🌀)
- - [📌 扩展运算符](#📌 扩展运算符)
  - [📌 剩余参数](#📌 剩余参数)
  - [📌 高级用法与技巧](#📌 高级用法与技巧)
  - [📌 小结](#📌 小结)
- [七、 Class类 - 面向对象编程，正式登场 👑](#七、 Class类 - 面向对象编程，正式登场 👑)
- - [📌 构造函数与实例化](#📌 构造函数与实例化)
  - [📌 方法](#📌 方法)
  - [📌 Getter 和 Setter](#📌 Getter 和 Setter)
  - [📌 继承](#📌 继承)
  - [📌 静态方法和属性](#📌 静态方法和属性)
- 总结

🌿 引言

ES6 ，作为ECMAScript 2015 的简称，标志着JavaScript编程语言的一个重要进化节点。它不是渐进的变化，而是一次飞跃式的更新，为开发者带来了一系列强大的新特性与语法糖，极大提升了代码的简洁性、可读性和运行效率。从新的变量声明方式let与const，到优雅的箭头函数、模板字符串，再到让对象操作更为灵活的解构赋值与增强的对象字面量，ES6 的每项改进都旨在让JavaScript适应日益复杂的应用场景，同时保持其作为脚本语言的活力与魅力。本文是深入探索这些核心特性的起点，为你铺开一条通向高效、现代JavaScript编程实践的道路。
继上文👉🏻 【JavaScript】ECMAS6（ES6）新特性概览（一）：变量声明let与const、箭头函数、模板字面量全面解析 后，我们将继续深入探讨ECMAS6的其他关键特性，涵盖解构赋值、扩展与收集、面向对象编程的Class体系，进一步加深对现代JavaScript编程的理解与应用能力。

五、 Destructuring Assignment - 解构赋值，数据提取的艺术 🎨

解构赋值作为ES6 引入的一项强大特性，彻底革新了数据访问与赋值的方式，使得从数组或对象中提取数据变得既直观又高效。这项技术不仅简化了代码，还大大增强了JavaScript的表达能力。

📌 数组解构

数组解构允许你将数组中的元素直接赋值给不同变量。你可以解构任意长度的数组，甚至忽略某些值或使用默认值。

javascript 复制代码

const [first, , third, fourth = "default"] = [1, 2, 3, 4];
console.log(first, third, fourth); // 输出：1 3 4
// 注意：第二个元素被忽略，第四个元素使用了默认值

📌 对象解构

对象解构则让你能够将对象的属性值直接绑定到变量上，匹配属性名即可。这在处理API响应或配置对象时尤为有用。

javascript 复制代码

const {a, b: aliasForB, c = "defaultValue"} = {a: 5, b: 6};
console.log(a, aliasForB, c); // 输出：5 6 defaultValue
// 注意：`b`属性值被赋给了新命名的变量`aliasForB`，`c`使用了默认值

📌 特殊用法与技巧

交换变量值：无需临时变量，直接交换两个变量的值。
javascript 复制代码
```
let x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y); // 输出：2 1
```

默认值与解构 ：为了解构时避免undefined，可以为解构的变量设置默认值。

javascript 复制代码

function fetchUserData({id = 0, name = "Guest", email}) {
    console.log(id, name, email);
}

fetchUserData({id: 123}); // 输出：123 Guest undefined

嵌套解构：对于嵌套结构，可以连续使用解构表达式。

javascript 复制代码

const nestedObj = {data: {val1: 1, val2: 2}};
const {data: {val1, val2}} = nestedObj;
console.log(val1, val2); // 输出：1 2

📌 小结

解构赋值是JavaScript中一种高级且实用的数据操作方式，它简化了数据处理逻辑，提升了代码的可读性和简洁性。无论是处理数组、对象还是更复杂的嵌套结构，解构赋值都展现了其"数据提取艺术"的魅力，是现代JavaScript编程不可或缺的一部分。掌握并灵活运用解构赋值，将使你的编码之旅更加优雅与高效。

六、 Spread and Rest Operators - 扩展与收集，数组操作新境界 🌀

扩展运算符(...)与剩余参数(...)是JavaScript ES6引入的两项强大特性，它们彻底改变了数组处理与函数参数的灵活性，为开发者提供了更加高效与优雅的工具。

📌 扩展运算符

扩展运算符允许你将数组或可迭代对象（如数组、Set、Map）的内容"展开"到另一个数组或作为函数的参数列表中，实现数组合并或克隆取值等操作。

javascript 复制代码

// 数组合数组
const arr1 = [1, 2, 3];
const arr2 = [4, 5];
const combined = [...arr1, ...arr2];
console.log(combined); // 输出：[1, 2, 3, 4, 5]

// 函数参数展开
function multiply(a, b, c) {
    return a * b * c;
}
const numbers = [2, 3];
console.log(multiply(...numbers, 4)); // 输出：24

📌 剩余参数

剩余参数 则是形参的一种特殊形式，使用三个点...标识，用于收集函数调用时多余的参数到一个数组中，非常适合不确定参数数量的场景。

javascript 复制代码

function sum(...numbers) {
	// 使用reduce方法累加数组中的所有元素
    return numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

📌 高级用法与技巧

对象复制与合并：扩展运算符可以用于浅复制对象或合并多个对象。
javascript 复制代码
```
const obj1 = {a: 1};
const obj2 = {b: 2};
const merged = {...obj1, ...obj2}; // 输出：{a: 1, b: 2}
```
解构与剩余：在解构赋值中结合剩余参数，可以收集解构未明确列出的属性。
javascript 复制代码
```
const {a, ...rest} = {a: 1, b: 2, c: 3};
console.log(rest); // 输出：{b: 2, c: 3}
```

📌 小结

扩展运算符与剩余参数 不仅简化了数组操作和函数参数处理，还为JavaScript代码带来了更高的灵活性和表达力。通过它们，你可以轻松地合并数组、复制对象、收集不定参数，甚至实现复杂的逻辑，这些都是现代JavaScript开发不可或缺的技能。掌握这两项特性，你的代码将更加高效且易于维护。

七、 Class类 - 面向对象编程，正式登场 👑

ES6 引入了 class 关键字，标志着JavaScript正式拥抱了面向对象编程（OOP）的设计模式，使得定义和继承类变得更加直观和规范。尽管JavaScript本质上仍基于原型继承，但class语法提供了一个熟悉且易于理解的接口，让习惯于Java、C#等语言的开发者能更快上手。

这里只做一些简单介绍，更多关于 class 类的内容在之前的一篇博客 JavaScript 中的 Class 类 中有更为详细的介绍。

📌 构造函数与实例化

每个class内部可以定义一个特殊的constructor方法，它是类的构造函数，用于初始化新创建的实例。当使用new关键字创建类的实例时，构造函数会被自动调用。

javascript 复制代码

class Person {
    constructor(name, age) {
        this.name = name; // 使用this关键字给实例添加属性
        this.age = age;
    }
}

const bob = new Person('Bob', 25); // 实例化Person类

📌 方法

类中可以定义方法，这些方法就是类的原型上的函数，可以被所有实例共享。

javascript 复制代码

class Person {
    // ... 构造函数代码 ...
    
    sayHello() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

bob.sayHello(); // 输出：Hello, my name is Bob and I am 25 years old.

📌 Getter 和 Setter

ES6 允许在类中定义getter和setter方法，用来更安全、灵活地访问和修改对象的属性。

javascript 复制代码

class User {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    }

    set fullName(name) {
        const parts = name.split(' ');
        this.firstName = parts[0];
        this.lastName = parts[1];
    }
}

const user = new User('John', 'Doe');
console.log(user.fullName); // 输出：John Doe
user.fullName = 'Jane Smith';
console.log(user.firstName); // 输出：Jane

📌 继承

ES6的类继承机制通过extends关键字实现，子类可以继承父类的所有属性和方法，并可以通过super关键字调用父类的构造函数和方法。

javascript 复制代码

class Employee extends Person {
    constructor(name, age, position) {
        super(name, age); // 调用父类构造函数
        this.position = position;
    }

    work() {
        console.log(`${this.name} is working as a ${this.position}.`);
    }
}

const jane = new Employee('Jane', 30, 'Developer');
jane.sayHello(); // 输出：Hello, my name is Jane and I am 30 years old.
jane.work(); // 输出：Jane is working as a Developer.

📌 静态方法和属性

类还可以拥有静态方法和属性，它们不属于实例，而是属于类本身，通过类直接调用。

javascript 复制代码

class Helper {
    static calculateAge(birthYear) {
        return new Date().getFullYear() - birthYear;
    }
}

console.log(Helper.calculateAge(1990)); // 输出当前年份减去1990的结果

通过这些特性，ES6 的class语法不仅为JavaScript带来了更符合直觉的面向对象编程模型，同时也保留了其灵活性和动态性，为开发者提供了强大的工具箱，以构建复杂的、可维护的应用程序。

总结

本文是关于ECMAS6 在JavaScript编程语言中引入的重要特性和改进的深入探讨。ES6 代表了JavaScript语言的一次重大升级，它引入了多种新特性来提升代码的简洁性、可读性及执行效率，从而更好地应对复杂的应用场景。

解构赋值 ：解构赋值 是ES6中一项革命性的特性，它允许直接从数组或对象中提取值到变量中。这一特性简化了数据处理逻辑，提升了代码的清晰度。例如，可以轻易地交换变量值、为解构的变量提供默认值以及处理嵌套结构，极大地丰富了数据操作的方式。
扩展与剩余运算符 ：扩展运算符和剩余参数 通过...语法提供了数组操作和函数参数处理的新维度。扩展运算符可以用于数组合并、克隆以及对象的浅复制与合并，而剩余参数则允许收集函数调用时多余的参数。这两者联合使用，让JavaScript代码在处理集合类型数据和灵活接受参数方面变得前所未有的强大和灵活。
面向对象编程（Class） ：ES6 通过引入class关键字，正式将面向对象编程的概念以一种更接近传统面向对象语言的语法形式带入JavaScript。尽管JavaScript的继承机制本质上仍是基于原型，class语法却提供了更直观的类定义和继承方式，包括构造函数、方法定义、getter/setter、继承（通过extends和super关键字）、以及静态方法和属性的支持。这让熟悉Java、C#等语言的开发者能快速上手，并促进代码的组织和复用，特别是在构建大型应用程序时。

综上所述，ES6 通过解构赋值 、扩展与剩余运算符 、以及面向对象编程 的Class体系等关键特性，为JavaScript开发者装备了强大的工具，不仅现代化了代码风格，也极大地提高了开发效率和代码质量。这些特性共同推动JavaScript向更成熟、更健壮的编程语言发展，适应了不断变化的技术需求和日益增长的项目复杂度。

后续我们将继续深入了解ES6 新特性，例如Modules模块系统、异步处理promise、生成器函数generators、map与set数据结构...等等。当然其中有些内容在之前的博客也有详细探讨过，内容都在👉🏻 🔥 专栏：【JavaScript】。感谢大家支持~ ❤️