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

空白诗2024-05-29 13:21


🔥 个人主页：空白诗 🔥 热门专栏：【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】。感谢大家支持~ ❤️

相关推荐
一颗花生米。2 小时前
深入理解JavaScript 的原型继承
java·开发语言·javascript·原型模式
问道飞鱼2 小时前
Java基础-单例模式的实现
java·开发语言·单例模式
学习使我快乐012 小时前
JS进阶 3——深入面向对象、原型
开发语言·前端·javascript
bobostudio19952 小时前
TypeScript 设计模式之【策略模式】
前端·javascript·设计模式·typescript·策略模式
通信仿真实验室3 小时前
（10）MATLAB莱斯（Rician）衰落信道仿真1
开发语言·matlab
勿语&3 小时前
Element-UI Plus 暗黑主题切换及自定义主题色
开发语言·javascript·ui
黄尚圈圈3 小时前
Vue 中引入 ECharts 的详细步骤与示例
前端·vue.js·echarts
浮华似水4 小时前
简洁之道 - React Hook Form
前端
正小安6 小时前
如何在微信小程序中实现分包加载和预下载
前端·微信小程序·小程序
吾爱星辰6 小时前
Kotlin 处理字符串和正则表达式（二十一）
java·开发语言·jvm·正则表达式·kotlin
热门推荐
01【经验分享】Ubuntu22.04安装微信(linux官方版)02安卓系列机型永久去除data分区加密 详细步骤解析032024年高教社杯数学建模国赛C题超详细解题思路分析04CTF网络安全大赛简单的web抓包题目：HEADache05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07pve(Proxmox VE)安装i225v网卡驱动08苍穹外卖面试总结09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10RAG 实践- Ollama+RagFlow 部署本地知识库