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

news/2024/6/21 5:52:42/文章来源:https://blog.csdn.net/m0_52827996/article/details/139186600

在这里插入图片描述

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

在这里插入图片描述

文章目录

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

在这里插入图片描述

🌿 引言

ES6,作为ECMAScript 2015的简称,标志着JavaScript编程语言的一个重要进化节点。它不是渐进的变化,而是一次飞跃式的更新,为开发者带来了一系列强大的新特性与语法糖,极大提升了代码的简洁性、可读性和运行效率。从新的变量声明方式letconst,到优雅的箭头函数模板字符串,再到让对象操作更为灵活的解构赋值增强的对象字面量ES6的每项改进都旨在让JavaScript适应日益复杂的应用场景,同时保持其作为脚本语言的活力与魅力。本文是深入探索这些核心特性的起点,为你铺开一条通向高效、现代JavaScript编程实践的道路。

继上文👉🏻 【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析 后,我们将继续深入探讨ECMAS6的其他关键特性,涵盖解构赋值、扩展与收集、面向对象编程的Class体系,进一步加深对现代JavaScript编程的理解与应用能力。


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

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

📌 数组解构

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

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

📌 对象解构

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

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

📌 特殊用法与技巧

  • 交换变量值:无需临时变量,直接交换两个变量的值。

    let x = 1, y = 2;
    [x, y] = [y, x];
    console.log(x, y); // 输出:2 1
    
  • 默认值与解构:为了解构时避免undefined,可以为解构的变量设置默认值。

    function fetchUserData({id = 0, name = "Guest", email}) {console.log(id, name, email);
    }fetchUserData({id: 123}); // 输出:123 Guest undefined
    
  • 嵌套解构:对于嵌套结构,可以连续使用解构表达式。

    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)的内容“展开”到另一个数组或作为函数的参数列表中,实现数组合并或克隆取值等操作。

// 数组合数组
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

📌 剩余参数

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

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

📌 高级用法与技巧

  • 对象复制与合并:扩展运算符可以用于浅复制对象或合并多个对象。

    const obj1 = {a: 1};
    const obj2 = {b: 2};
    const merged = {...obj1, ...obj2}; // 输出:{a: 1, b: 2}
    
  • 解构与剩余:在解构赋值中结合剩余参数,可以收集解构未明确列出的属性。

    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关键字创建类的实例时,构造函数会被自动调用。

class Person {constructor(name, age) {this.name = name; // 使用this关键字给实例添加属性this.age = age;}
}const bob = new Person('Bob', 25); // 实例化Person类

📌 方法

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

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允许在类中定义gettersetter方法,用来更安全、灵活地访问和修改对象的属性。

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关键字调用父类的构造函数和方法。

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.

📌 静态方法和属性

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

class Helper {static calculateAge(birthYear) {return new Date().getFullYear() - birthYear;}
}console.log(Helper.calculateAge(1990)); // 输出当前年份减去1990的结果

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


总结

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

  • 解构赋值解构赋值ES6中一项革命性的特性,它允许直接从数组或对象中提取值到变量中。这一特性简化了数据处理逻辑,提升了代码的清晰度。例如,可以轻易地交换变量值、为解构的变量提供默认值以及处理嵌套结构,极大地丰富了数据操作的方式。

  • 扩展与剩余运算符扩展运算符和剩余参数通过...语法提供了数组操作和函数参数处理的新维度。扩展运算符可以用于数组合并、克隆以及对象的浅复制与合并,而剩余参数则允许收集函数调用时多余的参数。这两者联合使用,让JavaScript代码在处理集合类型数据和灵活接受参数方面变得前所未有的强大和灵活。

  • 面向对象编程(Class)ES6通过引入class关键字,正式将面向对象编程的概念以一种更接近传统面向对象语言的语法形式带入JavaScript。尽管JavaScript的继承机制本质上仍是基于原型,class语法却提供了更直观的类定义和继承方式,包括构造函数、方法定义、getter/setter、继承(通过extendssuper关键字)、以及静态方法和属性的支持。这让熟悉Java、C#等语言的开发者能快速上手,并促进代码的组织和复用,特别是在构建大型应用程序时。

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ldbm.cn/p/430391.html

如若内容造成侵权/违法违规/事实不符,请联系编程新知网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

打造高可用系统:深入了解心跳检测机制

本文作者:小米,一个热爱技术分享的29岁程序员。如果你喜欢我的文章,欢迎关注我的微信公众号“软件求生”,获取更多技术干货! Hello,大家好!我是你们的技术小伙伴小米,今天咱们来聊聊分布式系统中的“心跳检测”机制。心跳检测是一种简单而又重要的机制,用来监控系统的…

JAVA系列:NIO

NIO学习 一、前言 先来看一下NIO的工作流程图: NIO三大核心组件,channel(通道)、Buffer(缓冲区)、selector(选择器)。NIO利用的是多路复用模型,一个线程处理多个IO的读…

线上自由DIY预约小程序源码系统 自由DIY你的界面 带完整的的安装代码包以及搭建教程

系统概述 在当今数字化时代,移动应用成为人们生活和工作中不可或缺的一部分。预约小程序作为一种便捷的工具,为用户提供了高效的预约服务体验。而线上自由 DIY 预约小程序源码系统则为开发者和企业提供了更大的自由度和创造力,让他们能够根据…

新品发布(仓库小助手)一机在手,轻松无忧

你是否曾为繁琐的货物管理而烦恼? 你是否为了记录货物信息忙前忙后? 近几年,陆续有收到客户在运营跨境代购中的一些反馈,特别是仓库管理这块,比如包裹的出入库、移库、修改包裹信息等,都需要在电脑上完成&…

【做一道算一道】力扣332.重新安排行程

332.重新安排行程 给定一个机票的字符串二维数组 [from, to],子数组中的两个成员分别表示飞机出发和降落的机场地点,对该行程进行重新规划排序。所有这些机票都属于一个从 JFK(肯尼迪国际机场)出发的先生,所以该行程必…

时间|基于SprinBoot+vue的时间管理系统(源码+数据库+文档)

时间管理系统 目录 基于SprinBootvue的时间管理系统 一、前言 二、系统设计 三、系统功能设计 1管理员功能模块 2用户功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取: 博主介绍:✌️大厂码农…

Linux服务器安装与配置python环境 最新linux安装python 小白教程

目录 一、下载官网的安装包 二、安装流程 三、配置软连接(类似window系统的环境变量) 四、可能会出现的问题: 1.ssl连接问题,下图所示: 一、下载官网的安装包 1.官网安装包地址:https://www.python.org/…

【深度 Q 学习-01】 Q学习概念和python实现

文章目录 一、说明二、深度 Q 学习概念三、python实现四、结论 关键词:Deep Q-Networks 一、说明 在强化学习 (RL) 中,Q 学习是一种基础算法,它通过学习策略来最大化累积奖励,从而帮助智能体导航其环境。它…

nss刷题(3)

1、[SWPUCTF 2021 新生赛]include 根据提示传入一个file后显示了关于flag的代码 这是一个文件包含,考虑php伪协议,构造payload: ?filephp://filter/readconvert.base64-encode/resourceflag.php 2、[SWPUCTF 2021 新生赛]Do_you_know_http …

JAVA学习路线图

计算机网课资料分享群:710895979

Redis分布式存储方案

一、Redis分布式存储方案 1、哈希取余分区 ①、原理 哈希计算:首先,对每个键(key)进行哈希计算,得到一个整数哈希值(hash value)。取余操作:将这个哈希值对服务器数量进行取余操作…

新时代病毒侵染了全世界!自律的自我认知,无聊才是根本——早读(逆天打工人爬取热门微信文章解读)

刷视频的动作是什么? 引言Python 代码第一篇 【夜读】为什么要自律?这是我听过最走心的答案第二篇结尾 引言 文字阅读数量确实在缩减 虽然我觉得未来还是有一席之地 当下的人 普罗大众吧 你让他们看书 看文字 显然是不现实的 他们比起看书看文字 更喜欢…

项目成功的关键要素:进度管理

在项目管理中,进度管理是决定项目成败的关键因素之一。它关乎项目能否在预定的时间范围内高效、准确地完成既定目标。 一、进度管理的重要性 1、时间控制:项目的成功往往与时间的把握息息相关。进度管理能够确保项目在既定的时间框架内有序进行&#x…

红酒配餐中的酒杯选择与使用技巧

在红酒配餐中,酒杯的选择与使用技巧是影响品鉴体验的重要因素。合适的酒杯不仅能展现出红酒的优雅和风味,还能提升用餐的仪式感和愉悦感。云仓酒庄雷盛红酒以其卓着的品质和丰富的口感,成为了红酒爱好者们的首要选择品牌。下面将介绍在红酒配…

基于分块贝叶斯非局部均值优化(OBNLM)的图像去噪算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1 块定义与相似度计算 ​4.2 贝叶斯框架下的加权融合 4.3 加权最小均方误差估计 5.完整程序 1.程序功能描述 基于分块贝叶斯非局部均值优化(OBNLM)的图像去噪算法matlab仿真&#xff0c…

这些趣味科学小故事,让孩子从小爱上数理化,快收藏!

在我们的日常生活中,无论是洗碗时看到的泡沫,还是在公园里看到的彩虹,背后都隐藏着无数的科学奥秘。这些现象虽然看似平常,却都深深扎根于数理化的基本原理中。生活中一些常见的问题,也能通过转化成数理化的问题来解决。那么在现实生活中,数理化是如何帮助我们解决问题的…

专家解读 | NIST网络安全框架(2):核心功能

NIST CSF是一个关键的网络安全指南,不仅适用于组织内部,还可帮助管理第三方网络安全风险。CSF核心包含了六个关键功能——治理、识别、保护、检测、响应和恢复,以及与这些功能相关的类别和子类别。本文将深入探讨CSF核心的主要内容&#xff0…

对象解构与迭代器的猫腻?

前言 变量的解构赋值是前端开发中经常用到的一个技巧,比如: // 对象解构 const obj { a: 1, b: 2 }; const { a, b } obj; console.log(a, b)数组解构 const arr [1, 2, 3]; const [a, b] arr; console.log(a, b)工作中我们最经常用的就是类似上面…

JVM字节码文件

文章目录 字节码文件1. 基础信息2. 常量池3. 方法 字节码文件 Java的字节码文件由基础信息、常量池、字段、方法、属性五个部分组成。 1. 基础信息 字节码中的基础信息包含魔术、字节码文件对应的Java版本号,以及访问标识(public final等等),父类和接…

【Rust日报】Rust 中的形式验证

文章 - 未来的愿景:Rust 中的形式验证 这篇文章回顾了形式化验证的基本概念,作者展示了如何使用 Hoare triples 来描述和推理程序的正确性,以及如何使用分离逻辑来解决验证的复杂性。文章还解释了为什么 Rust 适用于形式化验证,以…