前端开发入门指南Day12：ES6进阶：面向对象的编程（Class类、继承、模块化）
今天，让我们探索ES6中面向对象编程的革新。想象一下，如果传统的JavaScript是一个手工作坊，那么ES6的类和模块化就是一个现代化工厂，让代码的组织和复用变得更加规范和高效。
一、为什么需要Class类的革新 🎯
在ES6之前，JavaScript通过构造函数和原型链来实现面向对象编程，这种方式不够直观，也容易出错。
传统方式的问题：
// 旧方式：构造函数
function Person(name, age) {this.name = name;this.age = age;
}// 在原型上添加方法
Person.prototype.sayHello = function() {console.log('你好，我是' + this.name);
};// 问题：
// 1. 代码组织分散
// 2. 原型链概念难理解
// 3. 继承实现复杂Class的解决方案：
// 新方式：使用class
class Person {// 构造器：专门用于初始化constructor(name, age) {this.name = name;this.age = age;}// 方法直接写在类里面，更清晰sayHello() {console.log(`你好，我是${this.name}`);}
}// 使用更简单
const person = new Person('小明', 18);二、继承：代码复用的优雅方式 👨👦
继承让我们能够建立类之间的父子关系，像父子传承一样。
为什么需要继承？
在开发中，我们经常遇到多个类有相似的属性和方法。比如：
- 学生和老师都是人，都有姓名、年龄
- 但学生有学号，老师有工号
- 他们的打招呼方式可能不同
// ES6的继承实现
class Person {constructor(name, age) {this.name = name;this.age = age;}sayHello() {console.log(`大家好！`);}
}// Student继承Person
class Student extends Person {constructor(name, age, studentId) {// super调用父类构造器super(name, age);this.studentId = studentId;}// 重写父类方法sayHello() {console.log(`同学们好，我是${this.name}，学号${this.studentId}`);}
}三、模块化：代码组织的新方式 📦
为什么需要模块化？
想象一下，如果把所有代码都写在一个文件里：
- 代码难以维护
- 容易造成命名冲突
- 依赖关系不清晰
模块化的解决方案：
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;// main.js
import { add, subtract } from './math.js';
console.log(add(5, 3)); // 8模块化的优势：
- 每个文件是独立的作用域
- 明确的导入导出关系
- 按需加载，提高性能
四、新的数据结构：Set和Map 🗃️
为什么需要Set？天然去重。
// 数组的问题：处理重复元素麻烦
const numbers = [1, 2, 2, 3, 3, 4];
// 去重需要额外代码
const unique = [...new Set(numbers)];// Set的优势：天然去重
const numberSet = new Set([1, 2, 2, 3, 3, 4]);
console.log(numberSet); // Set(4) {1, 2, 3, 4}为什么需要Map？不会覆盖原来对象的方法，还可以用对象作为键。
// 对象作为字典的问题
const dict = {"key": "value",toString: "这会覆盖对象的toString方法！"
};// Map的优势
const map = new Map();
map.set("key", "value");
map.set(obj, "可以用对象作为键！");- 新数据结构
- Set：专门处理唯一值的集合
- Map：比对象更适合作为字典使用
五、数组新方法：更强大的数组操作 🔧
为什么需要新的数组方法？因为传统的数组操作常常需要写很多循环代码。
新方法解决的问题：
const numbers = [1, 2, 3, 4, 5];// 旧方式：找到第一个大于3的数
for(let i = 0; i < numbers.length; i++) {if(numbers[i] > 3) {console.log(numbers[i]);break;}
}// 新方式：简洁明了
console.log(numbers.find(n => n > 3)); // 4// 其他有用的新方法
numbers.includes(3); // true，检查元素是否存在
numbers.findIndex(n => n > 3); // 3，找到元素的位置ES6的这些特性让JavaScript更加强大和易用，理解它们的设计初衷和解决的问题，能帮助我们更好地使用这些特性。
相关文章：
前端开发入门指南Day12：ES6进阶：面向对象的编程（Class类、继承、模块化）
今天，让我们探索ES6中面向对象编程的革新。想象一下，如果传统的JavaScript是一个手工作坊，那么ES6的类和模块化就是一个现代化工厂，让代码的组织和复用变得更加规范和高效。 一、为什么需要Class类的革新 🎯 在ES6之…...
深入探索进程间通信：System V IPC的机制与应用
目录 1、System V概述 2.共享内存（shm） 2.1 shmget — 创建共享内存 2.1.2 ftok（为shmmat创建key值） 2.1.3 为什么一块共享内存的标志信息需要用户来传递 2.2 shmat — 进程挂接共享内存 2.3 shmdt — 断开共享内存连接 2.4…...
跨 CA 签发多个证书的 Nginx mTLS 配置
研究过用同一个 CA 签发的服务端和客户端证书的 Nginx mTLS 配置，本文要试验一番服务端和客户端证书由不同 CA 机构签发的情形。这是常有事，比如与客户间采用 mTLS 加密方式，需要文件交付可能是 客户端证书由甲方生成，发送客户端…...
CentOS7 虚拟机 双网卡绑定
一、网卡绑定模式 模式类型特点mode0round-robin（平衡轮询策略）基于per packet方式，轮询往每条链路发送报文。提供负载均衡和容错的能力，当有链路出问题，会把流量切换到正常的链路上。交换机端需要配置聚合口。mode1a…...
设计模式——方法链or流式接口
方法链或流式接口是一种编程模式或设计模式。核心思想是通过返回对象自身的应用，使得可以在一个表达式中连续调用多个方法。 c中实现这种模式 1.基本语法规则 （1）每个可链接的方法都返回对象自身的引用（通常是*this）…...
BioDeepAV：一个多模态基准数据集，包含超过1600个深度伪造视频，用于评估深度伪造检测器在面对未知生成器时的性能。
2024-11-29, 由罗马尼亚布加勒斯特大学创建BioDeepAV数据集，它专门设计来评估最先进的深度伪造检测器在面对未见过的深度伪造生成器时的泛化能力，这对于提高检测器的鲁棒性和适应性具有重要意义。 数据集地址：biodeep 一、研究背景࿱…...
winform 程序添加API接口
假定你有这么一个winform程序，现在有需求开放一个接口，供外部调用，则你可以这样实现 安装需要的依赖包 Microsoft.AspNetCore.App 2.1.34 Microsoft.Extensions.Hosting 8.0.1使用线程在主窗体loading时候启动webhost publi…...
vscode 怎么下载 vsix 文件？
参考：https://marketplace.visualstudio.com/items?itemNameMarsCode.marscode-extension 更好的办法：直接去相关插件的 github repo 下载老版本 https://github.com/VSCodeVim/Vim/releases?page5 或者，去 open-vsx.org 下载老版本 点击这…...
jupyter-lab 环境构建
我平时用来调试各种代码的。 创建环境，安装库 conda create --name jupyterlab python3.12 -y conda activate jupyterlab conda install -c conda-forge jupyterlab nodejs之前用的是3.10的，但是最近安装的时候，发现3.10的python里面的jup…...
Mysql事务常见面试题 -- 事务的特性 ,并发事务问题 , undo_log和redo_log , 分布式事务
一. 事务的特性 ACID 原子性 --> 事务操作被视为一个整体 , 要么全部成功 , 要么全部失败一致性 --> 事务操作前后数据的变化是一致的隔离性 --> 事务的执行不受其他事务的影响持久性 --> 事务执行完毕会对数据永久保存 比如我们在转账的过程中 , A给B转账1000元…...
C# 线程--Thread类
目录 什么是线程？ Thread类的定义 创建和启动线程 使用 ThreadStart 委托 使用 ParameterizedThreadStart 委托 Lambda简写 使用线程池（ThreadPool） 使用线程池的优点 使用 ThreadPool 的一般步骤 常用方法 Start() Join() Slee…...
【RK3588 Linux 5.x 内核编程】-内核高分辨率定时器
内核高分辨率定时器 文章目录 内核高分辨率定时器1、高分辨率定时器介绍2、高分辨率定时器API2.1 初始化定时器2.2 启动定时器2.3 停止定时器2.4 改变定时器超时时间2.5 定时器状态检查3、驱动实现4、驱动验证在前面的文章中，我们知道了如果在Linux内核中使用定时器。本文将详…...
论文阅读与源码解析：MogaNet
论文阅读与源码解析：MogaNet: Multi-order Gated Aggregation Network 论文地址：https://arxiv.org/pdf/2211.03295 GitHub项目地址：https://github.com/Westlake-AI/MogaNet 源码：https://github.com/Westlake-AI/MogaNet/blob/…...
长、宽数据表格转换
excel数据读取 使用 readxl 包读取 Excel 文件 library(readxl) 读取 Excel 文件： 使用 read_excel() 函数读取 .xlsx 或 .xls 格式的文件。可以选择指定工作表名或工作表索引。 # 读取 Excel 文件的默认工作表 data <- read_excel("path_to_y…...
华为 Mate 70 系列智能手机将运行不兼容 Android 的鸿蒙
华为宣布其 Mate 70 系列新智能手机将搭载不兼容 Android 的 HarmonyOS Next 操作系统。虽然是基于安卓系统的，但是该分叉树将正式分离。以后将不再兼容安卓系统软件。 HarmonyOS Next 可运行的应用数量仍然远远逊于 Android。华为表示 HarmonyOS Next 获得了逾 1.…...
【Halcon】 derivate_gauss
1、derivate_gauss Halcon中的derivate_gauss算子是一个功能强大的图像处理工具，它通过将图像与高斯函数的导数进行卷积，来计算各种图像特征。这些特征在图像分析、物体识别、图像增强等领域具有广泛的应用。 参数解释 Sigma：高斯函数的标准差，用于控制平滑的程度。Sigma…...
原型模式的理解和实践
引言 在软件开发中，我们经常需要创建具有相同属性或状态的对象。如果采用传统的构造函数或工厂模式来创建对象，那么每次创建对象时都需要重新设置对象的属性，这无疑增加了代码的冗余和复杂性。为了解决这一问题，原型模式ÿ…...
封装loding加载动画的请求
图片 /*** Loading 状态管理类*/ export class Loading {constructor(timer300) {this.value falsethis.timer timer}/*** 执行异步操作并自动管理 loading 状态* param {Promise|Function|any} target - Promise、函数或其他值* returns {Promise} - 返回请求结果*/async r…...
特种设备相关管理A全国通用试题
1.下列（）类型的起重机械的定期检验每年1次。 A.机械式停车设备 B.施工升降机 C.门式起重机 D.桅杆式起重机 答案:B 2.压力容器安全技术监察规程中所指的容积，应为（ ）。 A.应当扣除永久连接在压力容器内部的内件…...
ES语法（一）概括
一、语法 1、请求方式 Elasticsearch（ES）使用基于 JSON 的查询 DSL（领域特定语言）来与数据交互。 一个 ElasticSearch 请求和任何 HTTP 请求一样由若干相同的部件组成： curl -X<VERB> <PROTOCOL>://&l…...
反射的作用
只要不是写死在程序里的对象的创建和调用，都可以用反射来实现。 例如，依据注解或配置信息动态生成并注入对象的需求场景，生成动态代理的需求场景。...
KARE：知识图谱社区级检索，增强 LLM 推理能力的医疗预测框架
KARE：知识图谱社区级检索，增强 LLM 推理能力的医疗预测框架 论文大纲理解要点全流程分析核心模式解法拆解知识图谱社区检索和普通检索有什么本质区别？为什么要同时使用专家LLM和本地LLM？动态知识检索中的评分机制是如何平衡多个因…...
LabVIEW氢气纯化控制系统
基于LabVIEW的氢气纯化控制系统满足氢气纯化过程中对精确控制的需求，具备参数设置、过程监控、数据记录和报警功能，体现了LabVIEW在复杂工业控制系统中的应用效能。 项目背景 在众多行业中，尤其是石油化工和航天航空领域，氢气作为…...
数据分析案例-笔记本电脑价格数据可视化分析
🤵♂️ 个人主页：艾派森的个人主页 ✍🏻作者简介：Python学习者 🐋 希望大家多多支持，我们一起进步！😄 如果文章对你有帮助的话， 欢迎评论 💬点赞Ǵ…...
CSS函数
目录 一、背景 二、函数的概念 1. var()函数 2、calc()函数 三、总结 一、背景 今天我们就来说一说，常用的两个css自定义属性，也称为css函数。本文中就成为css函数。先来看一下官方对其的定义。 自定义属性（有时候也被称作CSS 变量或者级…...
Linux网络——传输层
目录 1. 再谈端口号 2. UDP ① UDP 协议的报文 ② UDP 协议报头的本质 3. TCP ① TCP 缓冲区的理解 ② TCP 协议的报文 1. 16位源端口号 && 16位目的端口号 && 4位首部长度 2. 16位窗口大小 3. 32位序号 && 32位确认序号 4. 六个标记位 ③…...
保暖纤维的保暖能力全过程文档及程序)
2024年认证杯SPSSPRO杯数学建模A题(第一阶段)保暖纤维的保暖能力全过程文档及程序
2024年认证杯SPSSPRO杯数学建模 A题 保暖纤维的保暖能力 原题再现： 冬装最重要的作用是保暖，也就是阻挡温暖的人体与寒冷环境之间的热量传递。人们在不同款式的棉衣中会填充保暖材料，从古已有之的棉花、羽绒到近年来各种各样的人造纤维。不…...
采药 刷题笔记 （动态规划）0/1背包
P1048 [NOIP2005 普及组] 采药 - 洛谷 | 计算机科学教育新生态 动态规划 0/1背包 的本质在于继承 一行一行更新 上一行是考虑前i个物品的最优情况 当前行是考虑第i1个物品的情况 当前行的最优解 来自上一行和前i个物品的最优解进行比较 如果当前装了当前物品ÿ…...
LabVIEW MathScript工具包对运行速度的影响及优化方法
LabVIEW 的 MathScript 工具包 在运行时可能会影响程序的运行速度，主要是由于以下几个原因： 1. 解释型语言执行方式 MathScript 使用的是类似于 MATLAB 的解释型语言，这意味着它不像编译型语言（如 C、C 或 LabVIEW 本身的 VI&…...
大数据新视界 -- Hive 数据湖架构中的角色与应用（上）（25 / 30）
💖💖💖亲爱的朋友们，热烈欢迎你们来到 青云交的博客！能与你们在此邂逅，我满心欢喜，深感无比荣幸。在这个瞬息万变的时代，我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…...
电脑关机的趣味小游戏——system函数、strcmp函数、goto语句的使用
文章目录 前言一. system函数1.1 system函数清理屏幕1.2 system函数暂停运行1.3 system函数电脑关机、重启 二、strcmp函数三、goto语句四、电脑关机小游戏4.1. 程序要求4.2. 游戏代码 总结 前言 今天我们写一点稍微有趣的代码，比如写一个小程序使电脑关机…...
elasticsearch是如何进行搜索的？
请求与转发 协调节点确定参与搜索的目标索引，及其通过分片路由表确定分片对索引所在分片中选择任意节点并发请求多个分片的副本分片 副本选择策略 副本选择主要考虑 分片健康状态：选择状态为 green 或 yellow 的副本节点负载情况：避免查询…...
【Linux课程学习】：站在文件系统之上理解：软硬链接，软硬链接的区别
🎁个人主页：我们的五年 🔍系列专栏：Linux课程学习 🌷追光的人，终会万丈光芒 🎉欢迎大家点赞👍评论📝收藏⭐文章 Linux学习笔记： https://blog.csdn.net/d…...
如何做好一份技术文档
要做好一份技术文档，你需要遵循以下步骤： 1. 明确文档目标： 确定文档的目的和受众。 了解受众的技术水平和背景，以便调整内容的深度和语言风格。 2. 收集信息： 搜集所有与主题相关的技术细节、数据、图表和…...
优雅关闭进程
原文地址：优雅关闭进程 – 无敌牛 欢迎参观我的个人博客：无敌牛 – 技术/著作/典籍/分享等 介绍 本文涉及到进程对信号的响应，关于信号的一些基本知识，可以参考往期文章：linux系统信号简介 – 无敌牛 一个进程正常…...
【WEB开发.js】addEventListener事件监听器的绑定和执行次数的问题（小心踩坑）
假设我们有一个按钮，用户点击该按钮后，会选择一个文件，且我们希望每次点击按钮时只触发一次文件处理。下面我会给你一个简单的例子，展示放在函数内部和放在函数外部的区别。 1. 将事件监听器放在函数内部（问题的根源&…...
将 x 减到 0 的最小操作数 C++滑动窗口
给你一个整数数组 nums 和一个整数 x 。每一次操作时，你应当移除数组 nums 最左边或最右边的元素，然后从 x 中减去该元素的值。请注意，需要 修改 数组以供接下来的操作使用。 如果可以将 x 恰好 减到 0 ，返回 最小操作数 &#x…...
深入解析 C++ 中的 common_reference_with 和 common_with：设计原理与复杂性
在 C 标准库的设计中，类型之间的兼容性和安全性是至关重要的，尤其是在泛型编程中。为了实现高效且安全的类型推导和转换，C 提供了一些复杂的概念和工具来确保不同类型之间能够正确协同工作。common_reference_with 和 common_with 这两个概念…...
从CPU缓存与指令重排序探讨JMM
目录 问题背景 解决思路 hb关系的应用 原子性问题 问题背景 1. 编译器和CPU优化： 编译器和CPU为了提升单线程程序的性能，会对代码进行优化，如指令重排序、延迟计算等。这些优化在单线程环境下不会影响程序的最终结果，但在多线…...
ETSI EN 300328 标准的一些笔记
ETSI - European Telecommunications Standards Institute 欧洲电信标准化协会 ETSI EN 300328 是欧洲协调标准，此标准适用于工作在2.4G频段范围内运行的宽频传输系统和设备的无线电频谱。 例如 WIFI、Zigbee、蓝牙、 (国内的星闪)。不涵盖UWB。 符合了EN 300328标…...
各大浏览器（如Chrome、Firefox、Edge、Safari）的对比
浏览器如Chrome、Firefox、Edge等在功能、性能、隐私保护等方面各有特点。以下是对这些浏览器的详细对比，帮助你选择合适的浏览器。 1. Google Chrome 市场份额：Chrome是目前市场上最流行的浏览器，约占全球浏览器市场的65%以上。 性能&#…...
AD7606使用方法
AD7606是一款8通道最高16位200ksps的AD采样芯片。5V单模拟电源供电，真双极性模拟输入可以选择10 V，5 V两种量程。支持串口与并口两种读取方式。 硬件连接方式： 配置引脚 引脚功能 详细说明 OS2 OS1 OS2 过采样率配置 000 1倍过采样率 …...
神经网络介绍)
双向长短期记忆(Bi-LSTM)神经网络介绍
长短期记忆(Long Short-Term Memory, LSTM)神经网络： 1.是Hochreiter和Schmidhuber设计的循环神经网络(Recurrent Neural Network, RNN)的改进版本。LSTM模型借鉴了人类大脑的选择性输入和选择性遗忘机制，获取序列中的关键信息，遗忘和当前预测…...
openGauss开源数据库实战十八
文章目录 任务十八 openGauss逻辑结构:构:用户和权眼管理任务目标实施步骤一、准备工作二、用户和角色管理1.使用CREATE USER语句创建用户2.使用CREATE ROLE语句创建用户3.删除用户和角色 三、权限管理1.系统权限清理工作 任务十八 openGauss逻辑结构:构:用户和权眼管理 任务目…...
JVM 性能调优 -- JVM 调优常用网站
前言： 上一篇分享了 JDK 自带的常用的 JVM 调优命令和图形化界面工具，本篇我们分享一下常用的第三方辅助 JVM 调优网站。 JVM 系列文章传送门 初识 JVM（Java 虚拟机） 深入理解 JVM（Java 虚拟机） 一文搞…...
现在的电商风口已经很明显了
随着电商行业的不断发展，直播带货的热潮似乎正逐渐降温，而货架电商正成为新的焦点。抖音等平台越来越重视货架电商，强调搜索功能的重要性，预示着未来的电商中心将转向货架和搜索。 在这一转型期，AI技术与电商的结合为…...
基于AT89C52单片机的电子时钟与温湿度检测系统
✅作者简介：2022年博客新星 第八。热爱国学的Java后端开发者，修心和技术同步精进。 🍎个人主页：Java Fans的博客 🍊个人信条：不迁怒，不贰过。小知识，大智慧。 💞当前专栏…...
Wwise SoundBanks内存优化
1.更换音频格式为Vorbis 2.停用多余的音频，如Random Container的随机脚步声数量降为2个 3.背景音乐勾选“Stream”。这样就让音频从硬盘流送到Wwise，而不是保存在内存当中，也就节省了内存 4.设置最大发声数Max Voice Instances 5.设置音频…...
Next.js 独立开发教程（十三）：错误处理（Error Handling）
系列文章目录 Next.js 开发教程(一)：入门指南-CSDN博客 Next.js 开发教程（二）：从零构建仪表盘应用-CSDN博客 Next.js 开发教程（三）：CSS 样式的完整指南-CSDN博客 Next.js 独立开发教程&…...
【Halcon】边缘检测算子汇总（一）
frei_amp 功能：使用Frei-Chen算法检测图像的边缘振幅。 参数： 输入图像（Image）：待处理的原始图像。输出梯度图像（ImageEdgeAmp）：经过Frei-Chen算法处理后的边缘振幅图像。工作原理：frei_amp算子通过计算图像一阶导数的近似值来检测边缘。它使用两个特定的滤波器掩模（…...