- 博客(148)
- 收藏
- 关注
RSS订阅原创 Vue Router 导航解密：replace还是 push
push(默认)添加一条新的历史记录，可以返回。适合绝大多数常规导航。replace替换当前的这条历史记录，无法返回。适合那些“一次性”或不希望用户回退的场景。下次当你构建导航逻辑时，不妨多问自己一句：“我希望用户能通过‘返回’按钮回到这个页面吗？” 如果答案是否定的，那么replace就是你的不二之选！
2025-06-13 09:50:14
325
原创 JavaScript 神器 reduce()：从入门到精通
嘿，各位前端同学！在我们的日常开发中，和数组打交道就像呼吸一样自然。我们用 遍历，用 转换，用 筛选。但当需求变得复杂，比如“计算购物车商品总价”、“统计投票结果”或者“将二维数组展平”时，你是否曾用一连串的 循环和临时变量把自己绕晕？别担心，今天我们要聊的，就是专门解决这类问题的“终极武器”——。很多人对 的第一印象是：强大，但有点绕。它就像一把瑞士军刀，功能繁多，初见时不知从何下手。但一旦你理解了它的核心思想，你就会爱上这种将复杂问题优雅地“浓缩”成一行代码的快感。这篇文章的目标，就是带你彻底
2025-06-13 09:49:35
461
原创 CSS实现元素撑满剩余空间的5种方法
浏览器兼容性要求布局复杂度响应式需求维护成本优先使用 Flexbox/Grid 等现代方案需要兼容老浏览器时，可以采用 calc()/绝对定位方案结合项目实际情况选择最合适的方案。
2025-06-12 16:56:53
826
原创 vue的＜router-link＞的to里面的query和params的区别
何时使用params？当传递的参数是必需的构成 URL 核心语义的一部分时。例如，没有用户 ID 就无法显示用户页面。何时使用query？当传递的参数是可选的、用于过滤、排序或分页时。例如，商品列表页可以不带任何排序或分页参数，只显示默认状态。关键陷阱提醒params必须与name配合使用，这是新手最容易犯的错误。params和query可以一起使用，它们并不互斥。
2025-06-09 15:46:29
651
原创 encodeURIComponent和decodeURIComponent
识别风险：任何时候，只要你想把一个可能包含特殊字符（&,?, /, #, 空格等）或中文的字符串放进URL，就要想起编码！选择武器：使用来对你的数据进行“伪装”，确保它在URL中安全传输。还原真相：在接收端，使用（或者更推荐的）来“卸妆”，获取原始数据。牢记区别：只在需要编码整个URL时才考虑，编码URL的部分时，请坚决使用。
2025-06-09 15:45:45
1012
原创 那些让人挠头的 JavaScript 类型转换：一道看似简单的面试题
当使用加法运算符连接一个数字和一个对象（这里是数组[0]）时，JavaScript 会进行隐式类型转换。如果其中一个操作数是对象，则会将其转换为原始值。对于数组，会先尝试valueOf()，再尝试toString()。[0]的toString()方法返回字符串"0"。所以，加法表达式变成了1 + "0"。当一个数字和一个字符串相加时，数字会被转换为字符串，然后进行字符串拼接。1转换为字符串是"1"。"1" + "0"的结果是字符串"10"。
2025-05-19 09:00:00
699
原创 JS奇数求和：从朴素循环到数学之美
方法一（循环累加）：直观易懂，适合理解基本编程逻辑，时间复杂度 O(n)。方法二（数学规律）：高效简洁，利用数学特性，时间复杂度 O(1)，适用于需要高性能的场景。在实际开发中，如果性能不是极致要求，方法一的可读性可能更高一些。但如果需要处理大量数据或者追求最高效率，方法二无疑是更好的选择。了解并掌握这两种不同的解决思路，可以帮助我们更好地选择合适的算法来解决问题。
2025-05-19 09:00:00
880
原创 JS迭代的魔力：让普通对象也拥有数组般的解构能力
通过为添加属性，我们让普通对象具备了迭代能力，从而可以使用数组的解构赋值语法来提取属性值。这展示了迭代器在 JavaScript 中的强大作用和灵活性。虽然这种直接修改原型的方式需要谨慎使用，但理解其背后的原理对于深入掌握 JavaScript 的迭代机制至关重要。
2025-05-18 09:00:00
646
原创 字符串字符计数：经典循环与 Reduce 的魔法
在 JavaScript 中，统计字符串中每个字符的出现次数可以通过多种方法实现。本文介绍了两种常见的方法：传统的 for 循环和函数式编程中的 reduce 方法。for 循环通过遍历字符串，使用对象存储字符计数，逻辑清晰，适合初学者。reduce 方法则通过将字符串转换为数组，利用累加器对象逐步统计字符次数，代码更简洁且具有函数式风格。优化后的 reduce 写法进一步简化了代码，但可读性有所降低。选择哪种方法取决于开发者对代码可读性和简洁性的偏好，reduce 方法在处理累加操作时更具表达力。
2025-05-18 09:00:00
1192
原创 Java 面向对象进阶：抽象类与接口的舞蹈
是一种引用数据类型。由interface关键字定义。主要包含抽象方法：在 Java 8 之前，接口只能包含常量和抽象方法。Java 8 以后引入了默认方法（default）、静态方法（static）和私有方法（private），但这些通常被视为接口的扩展，核心还是抽象方法。（常量、默认方法、静态方法、私有方法 - 暂时搁置，后续会深入学习）接口中的方法默认都是的，即使你不显式写出来。接口中的方法不能有方法体。// 抽象方法// 默认是 public abstract void test();
2025-05-17 09:00:00
989
原创 Java 面向对象进阶：解锁多态、内部类与包管理
多态：多种形态向上造型：超类型的引用指向派生类的对象向下转型，成功的条件：2.1) 引用所指向的对象，就是该类型2.2) 引用所指向的对象，实现了该接口或继承了该类匿名内部类：若想创建一个派生类的对象，并且对象只创建一次，可以设计为匿名内部类可以大大简化代码package 用于声明包，import 用于导入类。
2025-05-17 09:00:00
1012
原创 Java 面向对象入门：初识类、对象与构造方法
现实世界的映射：我们的现实世界由各种各样的“对象”组成，比如人、汽车、书籍等。基于这些具体的对象，我们可以抽象出它们的“类型”或“类别”，这就是“类”的概念。对象：软件中真实存在的、具有独立特性的个体。类：类型或类别，代表一类个体的通用描述。模子与实例：类可以理解为对象的模子、模板或图纸，它定义了这一类对象有哪些属性和行为。对象则是类的具体实例，根据类的模板创建出来的实体。一个类可以创建出多个不同的对象。类的组成：类通常包含两个核心部分：📊对象的属性/特征/数据：这在类中被称为成员变量。
2025-05-16 09:00:00
901
原创 Java 面向对象进阶：深入理解继承、重写与 final
继承:作用:代码复用特点:单- -继承、賄传递性super关键字:指代当前对象的父类对象方法的重写:发生在父子类中,方法名相同,参数列表相同重写方法被调用时,看对象的类型调用方法final: 最终的、不可改变的变量不能被改变、方法不能被重写、类不能被继承。
2025-05-16 09:00:00
807
原创 Java 进阶之路（五）：循环控制与数组的初探
当我们需要处理多行多列的数据，或者构建更复杂的逻辑结构时，嵌套循环就显得非常有用。语句不会终止整个循环，而是跳过当前循环体中剩余的语句，直接进入下一次循环的判断。但我们可以通过创建一个更大的新数组，并将原数组的数据复制过去来实现“扩容”的效果。在 Java 中，数组是一种引用数据类型，这意味着数组变量存储的是数组对象在内存中的地址，而不是直接存储数据本身。在编写循环时，我们有时候需要在特定条件下提前结束循环，或者跳过循环体中的某些语句。：灵活性相对较差，只能从源数组的开头开始复制，并指定目标数组的长度。
2025-05-15 09:00:00
1445
原创 Java 进阶之路（六）：构建清晰、可复用的代码
修饰词 返回值类型 方法名(参数列表) {方法体 // 具体的业务逻辑功能实现无参无返回值System.out.println("大家好，我叫张三，今年38岁了");有参无返回值public static void sayHi(String name){ // name 是形参（形式参数）System.out.println("大家好，我叫"+name+"，今年38岁了");
2025-05-15 09:00:00
1535
原创 Java 进阶之路（四）：与用户“交流”和程序的“循环”与“判断” [特殊字符]️[特殊字符]
现在，我们将学习如何让你的程序变得更加“有生命”，能够接收外部世界的输入，并根据更复杂的规则执行重复的任务。这时候，我们就需要用到。比如，编写一个计算器程序，一个简单的菜单系统，或者一个能够反复接收输入的程序。在这个例子中，第一次猜数字的代码和之后每次再次猜数字的代码是一样的（都是读取用户输入），所以使用。让你的程序能够与用户互动，是构建实用应用程序的第一步。想象一下，你的程序需要根据用户输入的数字来执行不同的操作，比如一个简单的菜单选项。掌握这三步，你的程序就可以接收用户输入的数据，并进行后续的处理了！
2025-05-14 07:26:03
727
原创 闯荡 Java 世界（三）：学会“计算”和“决策”
在《闯荡 Java 世界（三）：学会“计算”和“决策”》中，我们深入探讨了 Java 编程中的运算符和分支结构。运算符是编程中的“工具箱”，包括算术、关系、逻辑、赋值、字符串连接和条件运算符，用于处理数据和进行逻辑判断。其中，++ 和 -- 的自增自减操作需要特别注意前置和后置的区别。分支结构则让程序能够根据条件做出选择，包括简单的 if 结构、双分支的 if...else 结构以及多分支的 if...else if...else 结构，帮助程序实现灵活的决策逻辑。通过这些工具和结构，程序可以变得更智能和高
2025-05-14 07:19:02
989
原创 深入 Java 腹地（二）：变量、数据类型与类型转换的奥秘
本文深入探讨了 Java 编程中的变量、数据类型与类型转换。变量是存储数据的“容器”，其使用包括声明、初始化、使用和命名四个步骤。Java 提供了八种基本数据类型，包括整型、浮点型、布尔型和字符型，每种类型有其特定的存储范围和用途。类型转换分为自动（隐式）和强制（显式）两种，自动转换适用于从小类型到大类型的数据赋值。通过掌握这些基本概念，可以更好地理解和使用 Java 进行编程。
2025-05-13 11:20:41
697
原创 从零开始：你的第一步 Java 编程之旅
无论你在 Windows、Mac 还是 Linux 系统上，只要安装了相应的 JVM，它就能读懂这份字节码指令书，并把它翻译成当前电脑能理解的“语言”（也就是0和1），然后执行。但别担心，Java 作为一门广受欢迎的编程语言，有着清晰的逻辑和丰富的生态，非常适合作为你的入门选择。所以，你只需要编写一份 Java 代码，在任何安装了 JVM 的地方都能运行，省去了为不同平台重复编写代码的麻烦。在编写代码的过程中，有时候我们需要写一些解释性的文字，方便自己或者其他人理解代码的用途。在这里，我推荐你使用。
2025-05-13 11:11:18
1004
原创 位运算的巧思：以一道简单题看高效算法的设计精髓
本文通过一道力扣题目展示了位运算在高效算法设计中的巧妙应用。题目要求统计一组字符串中所有字符都包含在指定字符集合中的字符串数量。传统方法使用哈希集合进行字符查找，时间复杂度为O(m + n * k)。而位运算方法则利用英文字母数量有限的特点，将字符集合表示为整数的二进制位，通过位运算快速判断子集关系，显著提升了效率。位运算不仅适用于此类算法题，还可广泛应用于权限管理、状态标志和集合操作等场景。本文强调了跳出固有思维模式，利用计算机基础知识进行优化的重要性，展示了位运算在解决特定问题时的强大能力。
2025-05-12 15:57:06
1192
原创 位掩码与哈希表：高效统计相似字符串对的巧妙解法
本文探讨了如何利用位掩码和哈希表高效统计相似字符串对的数量。传统暴力比对法时间复杂度高，无法处理大规模数据。通过将字符串中的字符转换为二进制位掩码，可以将字符集合的比较转化为整数相等的判断，显著提升效率。进一步引入哈希表记录特征值出现次数，将时间复杂度降至O(nm)。实测数据显示，优化后的算法在处理大规模数据时性能提升显著。文章还通过实际案例展示了该算法在用户行为分析系统中的应用，强调了特征提取和位运算在算法优化中的重要性。总结指出，深刻理解问题本质并运用基础计算机科学知识，是设计高效算法的关键。
2025-05-12 15:27:16
1210
原创 element-ui下拉输入框+resetFields无法回显
实际场景用方法二会比较好点，如果有100个下拉框，给初始值的话，那你就要给100个内容进行初始化，很浪费时间。在vue3中也存在这样的情况，不知道这是不是resetFields遗留下来的bug，还需要看一下resetFields的源码。具体的原理还需要大家在评论区进行补充，附上vue3试验的代码。
2025-01-08 11:11:48
579
原创 ExpandingCard扩展卡片
这是一个很初级的project，主要的是通过active类的增删，再结合flex布局来实现。github.com。
2024-11-02 20:20:15
539
原创 JS处理下划线
这道题比较绕的是根据当前字符是双引号还是下划线，以及是否处于引号内，来决定是否分割当前段落。我们可以使用inQuotes的状态，当遇到双引号时，它会进行切换，根据状态进行筛选内容。
2024-10-25 14:07:17
605
原创 JS螺旋矩阵II
该题目是通过模拟螺旋填充的过程，生成一个 n x n 的螺旋矩阵。首先初始化变量和二维零矩阵，然后按照从左到右、从上到下、从右到左、从下到上的顺序填充矩阵，最后处理矩阵大小为奇数时的特殊情况，返回生成的螺旋矩阵。这道面试题算是高频出现的题目之一，它并不要求掌握复杂的算法，而是侧重于模拟某个过程，但非常考验我们对代码的驾驭和把握能力。
2024-10-25 13:48:00
375
原创 JS长度最小的子数组
窗口内是什么？sum≥target的长度最小的 连续 子数组。如何移动窗口的起始位置？当sum≥target时，就要移动如何移动窗口的结束位置？for循环遍历的索引滑动窗口的精妙之处在于根据当前子序列和大小的情况，不断调节子序列的起始位置。从而将O(n^2)暴力解法降为O(n)。代码随想录。
2024-10-24 16:54:27
790
原创 JS有序数组的平方
这题要求将给定非递减顺序数组的每个数字平方后，再按非递减顺序排序。一开始我们会想到采用暴力解法先平方后排序，但更优解为使用双指针法，从数组两端向中间遍历，比较平方值后逆序放入新数组，时间复杂度为O(n)，空间复杂度为O(1)。代码随想录。
2024-10-23 23:04:24
673
原创 JS移除元素
双指针相对暴力解决法来说，时间复杂度更低，实际应用中，通常会选择时间复杂度更低的方法（如方法二或方法三）以提高性能。代码随想录力扣题目链接。
2024-10-23 19:52:46
908
原创 JS两数之和
本题其实有四个重点，把这四点想清楚了，本题才算是彻底理解了。为什么会想到用哈希表哈希表为什么用map本题map是用来存什么的map中的key和value用来存什么的为什么会想到用哈希表当我们需要查询一个元素是否出现过，或者一个元素是否在集合里的时候，就要第一时间想到哈希法。哈希表为什么用map在JavaScript中，Map是一种内建的哈希表实现，它允许我们使用任何类型的键（key），不仅仅是字符串。在这个问题中，我们使用数字作为键，这是Map非常适合的场景。此外，Map。
2024-10-22 18:43:24
988
原创 JS二分查找
二分法的核心在于通过不断地将搜索区间一分为二，来逐步缩小搜索范围，直至找到目标值或确定目标值不存在。而在这个过程中，搜索区间的定义（是左闭右闭、左闭右开，还是其他）以及相应的边界处理方式是至关重要的。代码随想录。
2024-10-22 18:41:06
897
原创 Vue组件通信
父子关系的组件数据传递选择props与$emit进行传递，也可选择ref兄弟关系的组件数据传递可选择$bus，其次可以选择$parent进行传递祖先与后代组件数据传递可选择attrs与listeners或者Provide与Inject复杂关系的组件数据传递可以通过vuex存放共享的变量。
2024-10-21 09:29:45
1043
原创 CSS响应式布局
vw ，就是相对于视口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为相对于视口的高度。查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片、字体大小等等。响应式布局：是同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕，简单来说就是屏幕。flex 布局在响应式方面，主要是实现元素宽高的自适应，无法实现其他属性，如字体大小的自适应。
2024-10-21 08:42:32
1136
原创 JS闭包的特性和应用场景
当通过调用一个外部函数返回的一个内部函数后，即使外部函数执行已经结束了，但是内部函数引用了外部函数中的变量也依旧需要被保存在内存中，我们把这些变量的集合叫做闭包。我们定义行为，然后把它关联到某个用户事件上（点击或者按键）。我们的代码通常会作为一个回调（事件触发时调用的函数）绑定到事件上。原生的setTimeout传递的第一个函数不能带参数，通过闭包可以实现传参效果。用闭包定义能访问私有函数和私有变量的公有函数。
2024-10-20 15:10:36
575
原创 flex实现骰（tou）子点数
文章目录效果演示分析思路代码实现效果演示分析思路5点需要使用margin进行移动点数。而6点的话，使用align-content: space-between;和 justify-content: space-between;就能实现，不过需要注意的是主轴为侧轴，dot的第二个要给padding才能实现每一列3个点。代码实现<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-
2024-08-30 00:09:11
739
原创 CSS关于居中的问题
由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感。我们可以用百分比来表示，子元素相对父元素移动 50%的距离后，再根据子元素的外边距进行调整。值是写死的，如果 son 的宽度发生改变，子元素也无法水平居中。是写死的，如果父元素的宽度发生改变，子元素就无法水平居中了。子绝父相，子元素设置以下属性，也能进行水平垂直居中。子元素 y 轴移动的距离是父子元素高度差的一半，子元素 x 轴移动的距离是父子元素宽度差的一半。子元素相对父元素移动 50%的距离后，使用。
2024-07-10 15:31:18
847
原创 cesium公交车轨迹漫游
这是一个用 Cesium.js 做的公交车轨迹漫游，实现的功能有加载站点和道路轨迹点数据、监听车辆的实时位置、车辆控制器。滚动屏等等。
2024-07-03 11:48:40
1958
2
原创 cesium楼层分户实现功能
这是一个涉及Cesium.js（一个用于Web的3D地球和地图的JavaScript库）和前后端交互的楼房分户案例。该案例的主要功能包括区域绘制、户型切分、楼房分层、编辑房户信息和查看房户信息等等。
2024-07-03 09:51:01
1833
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人