当前位置：首页 > news >正文

JavaScript数据结构

news 来源：原创 2025/6/27 20:00:39

JavaScript数据结构

一、基础数据结构

1. 数组（Array）

2. 对象（Object）

二、ES6+ 高级数据结构

1. Map

2. Set

3. WeakMap 与 WeakSet

三、类型化数组（Typed Arrays）

四、其他数据结构实现

1. 栈（Stack）

2. 队列（Queue）

3. 链表（Linked List）

五、数据结构选择指南

六、最佳实践

JavaScript中的for循环

1. 传统 for 循环

语法

示例

特点

2. for...of 循环

语法

示例

特点

3. for...in 循环

语法

示例

特点

4. Array.prototype.forEach

语法

示例

特点

5. 性能与选择指南

性能对比

如何选择？

6. 常见陷阱

1. 修改数组长度

2. 闭包问题

3. 遍历稀疏数组

JavaScript数据结构

一、基础数据结构

1. 数组（Array）

定义：有序元素集合，可存储任意类型值。

创建方式：

let arr1 = [1, "a", true];      // 字面量
let arr2 = new Array(3);        // 创建长度3的空数组（慎用）

核心方法：

增删元素：

arr.push(4);        // 末尾添加 → [1, 2, 3, 4]
arr.pop();          // 移除末尾 → [1, 2]
arr.unshift(0);     // 开头添加 → [0, 1, 2]
arr.shift();        // 移除开头 → [1, 2]

操作数组：

arr.splice(1, 1, "x");  // 从索引1删除1个元素，插入"x" → [1, "x", 3]
arr.slice(1, 3);         // 截取索引1到3（不包含3）→ ["x", 3]
arr.concat([4, 5]);      // 合并数组 → [1, 2, 3, 4, 5]

迭代与转换：

arr.map(x => x * 2);     // 映射新数组 → [2, 4, 6]
arr.filter(x => x > 1);  // 过滤 → [2, 3]
arr.reduce((sum, x) => sum + x, 0); // 累加 → 6

注意事项：
- 稀疏数组：空位（如 new Array(3)）可能引发意外行为。
- 引用类型：数组赋值传递引用，需用 [...arr] 或 arr.slice() 克隆。

2. 对象（Object）

定义：键值对集合，键为字符串或 Symbol。

创建方式：

let obj1 = { name: "Alice", age: 25 }; // 字面量
let obj2 = new Object();               // 构造函数

核心操作：

增删查改：

obj.email = "alice@example.com"; // 添加属性
delete obj.age;                  // 删除属性
console.log("name" in obj);      // 检查属性是否存在 → true

遍历：

Object.keys(obj);    // 返回键数组 → ["name", "email"]
Object.values(obj);  // 返回值数组 → ["Alice", "alice@example.com"]
for (let key in obj) { console.log(key, obj[key]); } // 遍历自身及原型链属性

注意事项：
- 原型污染：避免修改 Object.prototype。
- 键顺序：ES6 后字符串键按插入顺序保留，但数字键优先排序。

二、ES6+ 高级数据结构

1. Map

特点：
- 键可以是任意类型（对象、函数等）。
- 保持插入顺序。

核心方法：

let map = new Map();
map.set("key", "value");    // 添加键值对
map.get("key");             // 获取值 → "value"
map.has("key");             // 检查存在 → true
map.delete("key");          // 删除键值对
map.size;                   // 获取条目数

适用场景：需要复杂键或频繁增删键值对时，优于 Object。

2. Set

特点：存储唯一值，自动去重。

核心方法：

let set = new Set();
set.add(1);                 // 添加值
set.add(2);
set.has(1);                 // 检查存在 → true
set.delete(1);              // 删除值
set.size;                   // 获取元素数量

适用场景：去重、集合运算（并集、交集等）。

3. WeakMap 与 WeakSet

特点：
- 弱引用：键必须是对象，不阻止垃圾回收。
- 不可迭代：无 size、clear() 或遍历方法。
使用场景：
- WeakMap：存储对象关联的私有数据或元数据。
```
let wm = new WeakMap();
let obj = {};
wm.set(obj, "secret");
```
- WeakSet：标记对象（如跟踪已处理对象）。
```
let ws = new WeakSet();
ws.add(obj);
```

三、类型化数组（Typed Arrays）

用于处理二进制数据（如图像、音频），与 ArrayBuffer 配合使用。

常见类型：
- Int8Array、Uint8Array（8位整数）
- Int16Array、Float32Array 等。

示例：

let buffer = new ArrayBuffer(16);      // 分配16字节内存
let int32View = new Int32Array(buffer); // 32位整数视图（4个元素）
int32View[0] = 42;

四、其他数据结构实现

JavaScript 未内置，但可通过基础结构模拟：

1. 栈（Stack）

后进先出（LIFO），用数组实现：

class Stack {constructor() { this.items = []; }push(element) { this.items.push(element); }pop() { return this.items.pop(); }peek() { return this.items[this.items.length - 1]; }
}

2. 队列（Queue）

先进先出（FIFO）：

class Queue {constructor() { this.items = []; }enqueue(element) { this.items.push(element); }dequeue() { return this.items.shift(); } // 时间复杂度 O(n)
}

3. 链表（Linked List）

节点链接实现：

class Node {constructor(value) {this.value = value;this.next = null;}
}
class LinkedList {constructor() { this.head = null; }append(value) { /* 实现添加逻辑 */ }
}

五、数据结构选择指南

场景	推荐数据结构	理由
有序集合，需快速访问索引	数组（Array）	索引操作时间复杂度 O(1)
键值对，键为字符串或 Symbol	对象（Object）	语法简洁，查找速度快
键为任意类型，需维护插入顺序	Map	支持复杂键，有序
存储唯一值	Set	自动去重，集合运算高效
高频增删元素（如队列）	链表（自定义实现）	避免数组 `shift()` 的 O(n) 复杂度
二进制数据处理	类型化数组（Typed Array）	内存高效，适合底层操作

六、最佳实践

优先使用 ES6+ 数据结构：如 Map、Set 替代传统对象和数组，提升代码可读性。
注意引用类型副作用：克隆数据避免意外修改。
性能敏感场景优化：如用 Int32Array 替代普通数组处理大量数值。
垃圾回收考虑：使用 WeakMap/WeakSet 管理对象关联数据，防止内存泄漏。

JavaScript中的`for`循环

1. 传统 `for` 循环

最基础的循环结构，通过明确的初始化、条件和迭代器控制循环。

语法

for (初始化; 条件; 迭代器) {// 循环体
}

示例

// 遍历数组
const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {console.log(arr[i]); // 输出 1, 2, 3
}// 倒序循环
for (let i = arr.length - 1; i >= 0; i--) {console.log(arr[i]); // 输出 3, 2, 1
}

特点

灵活控制：可自定义步长（如 i += 2）、跳过某次循环（continue）或提前退出（break）。
性能优化：预存数组长度（如 let len = arr.length）避免重复计算。
作用域：使用 let 声明变量时，每次循环会创建新的块级作用域。

2. `for...of` 循环

遍历可迭代对象（如数组、字符串、Map、Set、生成器等）的值。

语法

for (const value of iterable) {// 使用 value
}

示例

const arr = ['a', 'b', 'c'];
for (const val of arr) {console.log(val); // 输出 'a', 'b', 'c'
}// 遍历字符串
for (const char of 'Hello') {console.log(char); // 输出 H, e, l, l, o
}

特点

简洁性：无需索引，直接获取值。
支持异步：可与 await 结合使用（需在 async 函数中）。
不适用于普通对象：默认对象不可迭代（除非自行实现 Symbol.iterator）。

3. `for...in` 循环

遍历对象的可枚举属性（包括原型链上的属性）。

语法

for (const key in object) {// 使用 key 访问属性值：object[key]
}

示例

const obj = { a: 1, b: 2 };
for (const key in obj) {console.log(key, obj[key]); // 输出 a 1, b 2
}// 遍历数组（不推荐！）
const arr = [1, 2, 3];
arr.foo = 'bar';
for (const key in arr) {console.log(key); // 输出 0, 1, 2, 'foo'
}

特点

遍历对象属性：适合处理键值对。

可能遍历原型链：需用 hasOwnProperty 过滤：

for (const key in obj) {if (obj.hasOwnProperty(key)) {// 仅处理自身属性}
}

不保证顺序：现代引擎通常按属性添加顺序遍历，但复杂场景可能不一致。

4. `Array.prototype.forEach`

数组专用的高阶函数，遍历每个元素。

语法

array.forEach((value, index, array) => {// 循环体
});

示例

const arr = [1, 2, 3];
arr.forEach((value, index) => {console.log(index, value); // 输出 0 1, 1 2, 2 3
});

特点

不可中断：无法使用 break 或 continue，需通过 return 跳过当前迭代。
链式调用：可与其他数组方法（如 map、filter）配合。
异步陷阱：回调函数中的 await 不会暂停外层循环。

5. 性能与选择指南

性能对比

最快：传统 for 循环（尤其预存长度时）。
适中：for...of（底层使用迭代器协议）。
较慢：forEach（函数调用开销）。

如何选择？

场景	推荐方式
需要索引或复杂控制	传统 `for` 循环
遍历数组值（无需索引）	`for...of`
遍历对象属性	`for...in` + 过滤
简单数组操作	`forEach`
处理稀疏数组	传统 `for` + 判空

6. 常见陷阱

1. 修改数组长度

const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {arr.pop(); // 可能导致无限循环或跳过元素
}

2. 闭包问题

for (var i = 0; i < 3; i++) {setTimeout(() => console.log(i)); // 输出 3, 3, 3
}
// 解决：改用 let 或 IIFE

3. 遍历稀疏数组

const arr = [1, , 3]; // 中间是空位
arr.forEach(v => console.log(v)); // 输出 1, 3（跳过空位）
for (const v of arr) console.log(v); // 输出 1, undefined, 3

JavaScript数据结构

目录 JavaScript数据结构一、基础数据结构 1. 数组（Array） 2. 对象（Object） 二、ES6 高级数据结构 1. Map 2. Set 3. WeakMap 与 WeakSet 三、类型化数组（Typed Arrays） 四、其他数据结构实现 …...

编程日记 2025/6/27 20:00:39

如何使用 FastAPI 构建 MCP 服务器

哎呀，各位算法界的小伙伴们！今天咱们要聊聊一个超酷的话题——MCP 协议！你可能已经听说了，Anthropic 推出了这个新玩意儿，目的是让 AI 代理和你的应用程序之间的对话变得更顺畅、更清晰。不过别担心，为你的…...

编程日记 2025/6/25 2:05:22

Js 主线程和异步队列哪个先执行

JavaScript 主线程与异步队列执行顺序详解 JavaScript 是单线程语言，通过事件循环（Event Loop）机制来处理同步和异步任务。以下是主线程与异步队列的执行顺序解析： 1. 执行顺序基本原则 console.log(1. 主线程同步任务);setTim…...

编程日记 2025/6/27 5:22:06

C#实现HTTP服务器：处理文件上传---解析MultipartFormDataContent

完整项目托管地址：https://github.com/sometiny/http HTTP还有重要的一块：文件上传。这篇文章将详细讲解下，前面实现了同一个链接处理多个请求，为了方便，我们独立写了一个HTTP基类，专门处理HTTP请求。 ht…...

编程日记 2025/6/27 6:59:06

【hadoop】远程调试环境

根据上一节，我们已经安装完成hadoop伪分布式环境 hadoop集群环境配置_jdk1.8 441-CSDN博客还没安装的小伙伴可以看看这个帖子这一节我们要实现使用vscode进行远程连接，并且完成java配置与测试目录 vscode 配置远程安装java插件新建java项目 …...

编程日记 2025/6/25 9:31:19

检索增强生成（RAG）：强化 AI 智能体的知识 “武装”

技术点目录第一章、智能体(Agent)入门第二章、基于字节Coze 构建智能体(Agent)第三章、基于其他平台构建智能体（Agent）第四章、国内外智能体(Agent)经典案例详解第五章、大语言模型应用开发框架LangChain入门第六章、基于LangChain的大模型API接入第七章…...

编程日记 2025/6/22 14:11:50

使用 Provider 和 GetX 实现 Flutter 局部刷新的几个示例

1. 使用 Provider 实现局部刷新示例 1：ChangeNotifier Consumer 通过 ChangeNotifier 和 Consumer 实现局部刷新。 import package:flutter/material.dart; import package:provider/provider.dart;void main() {runApp(ChangeNotifierProvider(create: (_) &g…...

编程日记 2025/6/22 14:11:37

notepad++ 正则表达式

注意：Notepad正则表达式字符串最长不能超过69个字符 \ 转义字符如：要使用 “\” 本身, 则应该使用“\\” \t Tab制表符注：扩展和正则表达式都支持 \r 回车符CR 注：扩展支持，正则表达式不支持 \n 换行符…...

编程日记 2025/6/25 17:32:10

一起学大语言模型-通过ollama搭建本地大语言模型服务

文章目录 Ollama的github地址链接安装下载需求配置更改安装目录安装更改下载的模型存储位置Ollama一些目录说明日志目录运行一个模型测试下测试下更改服务监听地址和端口号 Ollama的github地址链接 https://github.com/ollama/ollama 安装下载 mac安装包下载地址&#xff1…...

编程日记 2025/6/27 19:51:38

webpack配置详解+项目实战

webpack在vue中的配置，适合想重新认知webpack的你 webpack配置-初级配置 1、配置入口和出口文件 2、配置loader 3、配置eslint（可组装js、jsx检查工具） 4、配置babel（将高级的js语法转换成低版本的js语法） 5、使用 ht…...

编程日记 2025/6/26 7:48:57

【学习笔记】文件上传漏洞--js验证、mime验证、.user.ini、短标签、过滤、文件头

概念文件上传漏洞什么是文件上传漏洞？ 文件上传漏洞是指由于程序员在对用户文件上传部分的控制不足或者处理缺陷，而导致的用户可以越过其本身权限向服务器上上传可执行的动态脚本文件。这里上传的文件可以是木马，病毒，恶意脚…...

编程日记 2025/6/25 3:33:44

经典卷积神经网络LeNet实现（pytorch版）

LeNet卷积神经网络一、理论部分1.1 核心理论1.2 LeNet-5 网络结构1.3 关键细节1.4 后期改进1.6 意义与局限性二、代码实现2.1 导包2.1 数据加载和处理2.3 网络构建2.4 训练和测试函数2.4.1 训练函数2.4.2 测试函数2.5 训练和保存模型2.6 模型加载和预测一、理论部分 LeNet是一…...

编程日记 2025/6/24 8:58:59

【VM虚拟机ip问题】

我就是我，不一样的烟火。文章目录前言一、启动VM虚拟机1. 开启虚拟机2. 输入账号密码登录3. 依次输入指令二、主机ping地址测试1. ping ip地址-成功三、安装-MobaXterm_Personal_21.51. 点击Session2. 选择SSH连接3. 输入信息4. 首次进入5. 连接成功总结前言 …...

编程日记 2025/6/27 19:48:04

【计算机视觉】YOLO语义分割

一、语义分割简介 1. 定义语义分割（Semantic Segmentation）是计算机视觉中的一项任务，其目标是对图像中的每一个像素赋予一个类别标签。与目标检测只给出目标的边界框不同，语义分割能够在像素级别上区分不同类别，从…...

编程日记 2025/6/27 19:57:18

【C++游戏引擎开发】《线性代数》（3）：矩阵乘法的SIMD优化与转置加速

一、矩阵乘法数学原理与性能瓶颈 1.1 数学原理矩阵乘法定义为：给定两个矩阵 A （ m n ） \mathrm{A}（mn） A（mn）和 B （ n p ） \mathrm{B}（np） B（np），它们的乘积 C = A B \mathrm{C}=AB C=AB 是一个 m p \mathrm{m}p mp 的矩阵，其中： C i , j = ∑ k = 1…...

编程日记 2025/6/25 21:38:15

聚焦交易能力提升！EagleTrader 模拟交易系统打造交易成长新路径

在全球市场波动加剧的背景下，交易者面临的挑战已不仅限于技术分析层面。许多交易者在实盘操作中常因情绪干扰导致决策变形，如何构建科学的交易心理与风险控制体系成为行业关注焦点。国内自营交易考试EagleTrader运用自己研发的模拟交易系统&#xff0c…...

编程日记 2025/6/27 16:48:34

文件分片上传

1前端 <inputtype"file"accept".mp4"ref"videoInput"change"handleVideoChange"style"display: none;">2生成hash // 根据整个文件的文件名和大小组合的字符串生成hash值，大概率确定文件的唯一性fhash(f…...

编程日记 2025/6/27 9:03:49

C#Lambda表达式与委托关系

1. 核心关系图示 A[委托] --> B[提供方法容器] B --> C[Lambda表达式] C --> D[委托实例的语法糖] A --> E[类型安全约束] C --> F[编译器自动生成委托实例] 2. 本质联系 2.1 类型关系 ‌Lambda表达式‌是编译器生成的‌委托实例‌表达式自动匹配符合签名的…...

编程日记 2025/6/23 19:52:10

机器翻译和文本生成评估指标：BLEU 计算公式

📌 BLEU 计算公式 BLEU 主要由**n-gram精确匹配率（Precision）和长度惩罚（Brevity Penalty, BP）**组成。 1️⃣ n-gram 精确匹配率计算不同长度的 n-gram（1-gram, 2-gram, ..., n-gram）在生成…...

编程日记 2025/6/27 14:57:32

24 python 类

在办公室里，类就像一个部门（如销售部、财务部），定义了该部门员工的共同属性（姓名、职位）和行为（处理客户、提交报表）。一、面向对象技术简介作为一个要入门码农的牛马&#xff0…...

编程日记 2025/6/25 1:21:04

pycharm与python版本

python 3.6-3.9 pycharm 2021版本搭配最好 python 3.8 pycharm 2019版本搭配最好 pycharm各版本下载...

编程日记 2025/5/26 15:31:49

23种设计模式-结构型模式-外观

文章目录简介问题解决方案示例代码总结简介也称：门面模式、Facade。外观是一种结构型设计模式，能为程序库、框架或其他复杂类提供一个简单的接口。问题假设你必须在代码中使用某个复杂的库或框架中的众多对象。正常情况下，你需要负责…...

编程日记 2025/6/25 12:05:15

open3d教程（三）点云的显示

官方文档位置： Visualization - Open3D 0.19.0 documentationhttps://www.open3d.org/docs/release/tutorial/visualization/visualization.html核心方法： o3d.visualization.draw_geometries([几何对象列表]) import open3d as o3dprint("Load …...

编程日记 2025/6/23 20:05:31

node.js、npm相关知识

Node.js 是一个基于 Chrome V8 JavaScript 引擎构建的开源、跨平台的 JavaScript 运行时环境，主要用于服务器端编程。它允许开发者使用 JavaScript 编写高性能的后端服务，突破了 JavaScript 仅在浏览器中运行的限制。 npm（Node Package Man…...

编程日记 2025/6/26 10:39:05

大象如何学会太空漫步？美的：科技领先、To B和全球化

中国企业正处在转型的十字路口。一边是全新的技术、全新的市场机遇；一边是转型要面临的沉重负累和巨大投入，无数中国制造、中国品牌仍在寻路，而有的人已经走至半途。近日，美的集团交出了一份十分亮眼的2024年财报。数据显示&…...

编程日记 2025/6/26 22:53:23

Go红队开发— 收官工具

文章目录免责声明个人武器开发美观输出Whois查询反查ip目录扫描子域名爆破被动扫描主动扫描(字典爆破)CDN检测免责声明 💡 本博客绝不涉及任何非法用途。 💡 使用者风险自担，违规后果自负。 💡 守法为先，技术向善。 …...

编程日记 2025/6/27 19:49:35

Android 应用程序包的 adb 命令

查看所有已安装应用的包名命令：adb shell pm list packages说明：该命令会列出设备上所有已安装应用的包名。可以通过管道符|结合grep命令来过滤特定的包名，例如adb shell pm list packages | grep com.pm，这将只显示包名中包含co…...

编程日记 2025/6/27 13:10:55

北京南文观点：后糖酒会营销，以战略传播重构品牌信心坐标

第112届全国糖酒会落下帷幕，参展品牌面临一个关键命题。如何在流量洪流中沉淀品牌价值？北京南文（全称：南文乐园科技文化（北京）有限公司）认为，糖酒会的结束恰是算法时代品牌认知战的真…...

编程日记 2025/6/26 10:23:30

Qt - findChild

findChild 1. 函数原型2. 功能描述3. 使用场景4. 示例代码5. 注意事项6. 总结在 Qt 中，每个 QObject 都可以拥有子对象，而 QObject 提供的模板函数 findChild 就是用来在对象树中查找满足特定条件的子对象的工具。下面我们详细介绍一下它的使用和注意事…...

编程日记 2025/6/20 22:31:25

2025年3月个人工作生活总结

本文为 2025年3月工作生活总结。研发编码一个curl下载失败问题的记录问题： 某程序，指定IP和账户密码配置，再使用curl库连接sftp服务器，下载文件。在CentOS系统正常，但在某国产操作系统中失败，需要用命…...

编程日记 2025/6/21 13:18:46

Spring Boot 七种事务传播行为只有 REQUIRES_NEW 和 NESTED 支持部分回滚的分析

Spring Boot 七种事务传播行为支持部分回滚的分析支持部分回滚的传播行为 REQUIRES_NEW：始终开启新事务，独立于外部事务，失败时仅自身回滚。NESTED：在当前事务中创建保存点（Savepoint），可局部…...

编程日记 2025/6/24 12:44:04

NVIDIA工业设施数字孪生中的机器人模拟

工业设施数字孪生中的机器人模拟文章目录工业设施数字孪生中的机器人模拟数字孪生技术的价值NVIDIA Omniverse平台工业机器人仿真的核心组件示例一：使用Isaac Sim创建基本机器人场景示例二：机器人运动规划和轨迹执行示例三：传感器集成与感知…...

编程日记 2025/6/23 22:12:36

docker安装jenkins

docker安装jenkins 1.安装javaJDK 服务器安装javaJDK ,因为我的服务器是直接集成了宝塔面板，我就直接从宝塔面板去安装JDK 最好安装17的JDK，因为后面会安装jenkins，需要17的版本 1.2查看安装是否完成 java --version 安装成功如下&#x…...

编程日记 2025/6/23 5:46:26

量子计算与人工智能融合的未来趋势

最近研学过程中发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击链接跳转到网站人工智能及编程语言学习教程。读者们可以通过里面的文章详细了解一下人工智能及其编程等教程和学习方法。在当今科技飞速发展…...

编程日记 2025/6/24 8:21:59

人工智能在生物医药-新版ChatGPT-4o辅助一键生成机制图

新版ChatGPT-4o辅助一键生成机制图作为一位生物医学教授专家，我将基于PubMed最新研究和科研大数据信息，遵循您的要求，一步一步进行思考和预测。核心问题：乳酸化修饰促进肾透明细胞癌（ccRCC）恶性进展的机…...

编程日记 2025/6/1 14:57:30

支持 MCP 协议的开源 AI Agent 项目

关键要点研究表明，目前有多个开源 AI Agent 项目支持 MCP 协议，包括 ChatMCP、HyperChat、5ire 和 Cherry Studio 等。这些项目主要用于聊天或桌面助手，允许通过 MCP 协议连接外部数据和工具。MCP 协议是 2024 年 11 月由 Anthropic 开源的…...

编程日记 2025/6/25 19:21:50

JavaRedis和数据库相关面试题

JavaRedis面试题 1. Redis是什么以及Redis为什么快？ Redis（Remote Dictionary Server）是一个开源的内存键值数据库，支持多种数据结构（如字符串、哈希、列表、集合等），并提供持久化、复制、…...

编程日记 2025/6/25 16:33:33

Android开发RxJava3延迟操作

Android开发RxJava3延迟操作直接上代码： /*** param timeMillis 毫秒单位* desc : 延迟多少毫秒操作,* 注：它和Activity生命周期绑定，界面关闭了不会再执行delayTodoListener.delayTodo()* author : congge on 2021-03-25 15:31**/p…...

编程日记 2025/6/25 8:30:58

android 设置状态栏背景

一让activity ui界面和手机状态栏一样的背景要让 Activity 的 UI 界面和手机状态栏具有相同的背景颜色，并且能够随着深色模式和非深色模式的切换而改变颜色，你可以按照以下步骤操作： 1. 让 Activity 和状态栏背景颜色一致使用 window.s…...

编程日记 2025/4/11 14:21:44

vue 常见优化手段

文章目录 vue常见的优化手段前言使用key（避免明明相同的dom，每次更新都要重新生成）使用冻结的对象（避免无意义的响应式数据）使用函数式组件（减少vue组件实例的生成）vue3vue2使用计算属性（减少数据计算的次数）非实时绑定的表单项（避免表单过多触发监听事件）保持对象的…...

编程日记 2025/5/28 2:55:31

vue生命周期、钩子以及跨域问题简介

Vue 的生命周期是指 Vue 实例从创建到销毁的整个过程。在这个过程中，Vue 提供了一系列的生命周期钩子（Lifecycle Hooks），允许开发者在特定的时间点执行代码。以下是 Vue 的生命周期和钩子的简单说明： Vue 的生命周期阶…...

编程日记 2025/6/27 16:47:55

主相机绑定小地图

资源初始化：在类中通过 property 装饰器定义主相机、小地图相机、小地图精灵等资源属性，便于在编辑器中赋值。在 start 方法里，当确认这些资源存在后，创建渲染纹理并设置其大小，将渲染纹理与小地图相机关联&#xff0c…...

编程日记 2025/5/28 10:35:28

关于音频采样率，比特，时间轴的理解

是的，你的理解完全正确！-ar、-af aresampleasync1000 和 -b:a 64k 分别用于控制音频的采样率、时间戳调整和比特率。它们各自有不同的作用，但共同确保音频的质量和同步性。下面我将详细解释每个参数的作用和它们之间的关系。 1. -ar 参数作用…...

编程日记 2025/6/26 4:03:32

三、FFmpeg学习笔记

FFmpeg是一个开源、跨平台的多媒体处理框架，能够实现音视频的录制、转换、剪辑、编码、解码、流媒体传输、过滤与后期处理等几乎所有常见的多媒体操作。其强大之处在于几乎支持所有的音视频格式、编解码器和封装格式，是业界公认的“瑞士军刀”。 FFmp…...

编程日记 2025/6/26 8:04:01

什么是 Java 泛型

一、什么是 Java 泛型？ 泛型（Generics） 是 Java 中一种强大的编程机制，允许在定义类、接口和方法时使用类型参数。通过泛型，可以将数据类型作为参数传递，从而实现代码的通用性和类型安全。简单来说&…...

编程日记 2025/6/22 12:09:07

从 WPF 到 MAUI：跨平台 UI 开发的进化之路

一、引言在软件开发领域，用户界面（UI）开发一直是至关重要的环节。随着技术的不断发展，开发者对于创建跨平台、高性能且美观的 UI 需求日益增长。Windows Presentation Foundation（WPF）和 .NET Multi - pl…...

编程日记 2025/6/24 10:39:05

Docker学习之dockerfile篇（day8）

文章目录前言一、问题描述二、具体内容1. Docker 镜像原理2. Docker 镜像制作3. Dockerfile 概念Dockerfile 的基本结构： 4. Dockerfile 关键字5. Docker 实战案例5.1 基于 Nginx 构建 Web 服务器 6. 验证与总结6.1 验证 Dockerfile6.2 总结前言 Docker 是一种轻…...

编程日记 2025/6/23 17:13:41

Kotlin 作用域函数：apply、let、run、with、also

在 Kotlin 开发中，作用域函数（Scope Functions）是一组能让代码更简洁、更函数式的高阶函数。它们通过不同的作用域规则和返回值设计，解决了对象配置、空安全处理、链式操作等常见场景问题。本文将结合核心特性、代码示例和对比表格…...

编程日记 2025/6/27 17:16:13

Java 线程池与 Kotlin 协程高阶学习

以下是Java 线程池与 Kotlin 协程高阶学习的对比指南，结合具体代码示例，展示两者在异步任务处理中的差异和 Kotlin 的简化优势： 分析： 首先，我们需要回忆Java中线程池的常见用法，比如通过ExecutorService创…...

编程日记 2025/6/22 23:49:56

C++学习笔记（三十三）——forward_list

一、std::forward_list (1) forward_list与其适用场景 std::forward_list 是 C的STL中的单向链表（Singly Linked List），它相比 std::list（双向链表）更轻量，适用于仅需要单向遍历的场景。主要特点&#…...

编程日记 2025/6/21 17:59:06

JavaScript数据结构

一、基础数据结构

1. 数组（Array）

2. 对象（Object）

二、ES6+ 高级数据结构

1. Map

2. Set

3. WeakMap 与 WeakSet

三、类型化数组（Typed Arrays）

四、其他数据结构实现

1. 栈（Stack）

2. 队列（Queue）

3. 链表（Linked List）

五、数据结构选择指南

六、最佳实践

JavaScript中的for循环

1. 传统 for 循环

语法

示例

特点

2. for...of 循环

语法

示例

特点

3. for...in 循环

语法

示例

特点

4. Array.prototype.forEach

语法

示例

特点

5. 性能与选择指南

性能对比

如何选择？

6. 常见陷阱

1. 修改数组长度

2. 闭包问题

3. 遍历稀疏数组

相关文章：

JavaScript中的`for`循环

1. 传统 `for` 循环

2. `for...of` 循环

3. `for...in` 循环

4. `Array.prototype.forEach`