OnwardAndUpward-CSDN博客

原创 JavaScript将数组对象数据转换为树形结构

特别注意：为了逻辑比较清晰，下面的代码内容相对较多，但是可以兼容各种传入数组数据，例如：在存在搜索业务的情况下，传入的内容存在不一定存在一级节点的情况。

2024-12-19 15:51:33 166

原创 JavaScript如何动态修改::after、::before等伪类样式

由于::after这种伪类元素并不是直接的dom元素我们在修改的时候尝试了各种方法都不行，所以我们只能通过增加新的CSS样式去影响它，但是有的时候我们修改不了CSS的源代码或者想要做一些动态判断就出现了问题，这个时候我们可以在某个层叠样式表去新增一个CSS样式，从而直接影响伪类元素，具体代码如下。

2024-12-17 10:07:12 474

在react中我们有的时候会遇到这样的问题，当我们在使用一个数组数据的时候，当这个数组数据嵌套特别深时，比如树形结构数据，我们在修改了一个比较深的那一层的值时，会发现render没有重新执行，这个就是嵌套太深，我们修改的时候没有进行深拷贝，react没有监听到数据发生变化，所以这个时候就需要深拷贝。我们会发现当正常的数据结构我们直接重新创建一个数组或者对象然后使用剩余运算符将之前的数据解构出来就完成了深拷贝，但是当数组或者对象里面存在嵌套的时候就不行了。

2024-12-10 10:57:45 228

原创什么是CSS盒模型？box-sizing又是什么？

在我们的网页中，我们的HTML的布局都是通过盒子完成的，div就是其中之一，它的组成部分包含了从内到位，依次是内容区域、内边距（padding）、border（边框）、外边距（margin），我们的盒子就是由此四部分组成。整个HTML就是由各种盒子组成。

2024-12-09 17:58:36 235

原创 JavaScript的防抖和节流

设计思路：将我们需要执行的方法，放在一个定时器中，声明一个全局变量将定时器赋值给这个变量，当第一次执行的时候，先判断此此全局变量是否被赋值，如果被赋值了说明存在之前的执行，这个就将它清除掉，保证它为没有赋值的状态。防抖就是在一段事件内，如果重复执行了同一个事件，那么我们就只保留最后一次执行，一般用于输入框的change事件。节流就是在一段时间内事件重复触发的时候，规定时间段内，触发一次，一般适用于滚动监听。注意，以上的写法都是放了方便大家理解，没有采用闭包的方式进行书写！

2024-12-04 10:50:44 163

原创 JavaScript实现监听移动端左右滑动功能

【代码】JavaScript实现监听移动端左右滑动功能。

2024-11-15 20:00:53 263

原创 JavaScript判断是否是有效字符串

方法二：直接将成对括号进行替换操作，最后结果为空则为有效。方法一：使用栈的存放数据思路，后进先出。

2024-11-13 16:17:47 285

原创 JavaScript中统计每个字符出现的个数（使用reduce方法）

思路是先初始化一个空对象，第一次进入，当前遍历元素不存在直接赋值1，每次返回上一次的执行结果，第二次进入时，该元素存在直接给该元素加1。

2024-11-13 16:09:07 251

原创 JavaScript中实现十进制转二进制算法

【代码】JavaScript中实现十进制转二进制算法。

2024-10-20 16:17:57 342 1

原创 dom上如何挂载react实例和去除dom上挂载的react实例

去除dom上挂载的实例，可以在react组件卸载时调用，防止内存泄漏。dom上如何挂载react组件。

2024-08-08 11:22:50 169

原创 JS等待所有方法执行完成在执行下一个方法，promise All

在工作中会遇到这样一个场景，前端需要拿到不同接口返回的结果在执行某个逻辑，当使用链式那样的方式去请求，等一个接口响应完在请求下一个接口，这种方法就会导致请求时间特别长。这个时候就可以使用promise all，同时请求所有接口，然后使用Promise.all监听每个请求。promise相关用法，可以参考我的另外一篇文章http://t.csdnimg.cn/i3mUQ。

2024-08-01 09:51:45 1007

原创 JS中如何对数组或者数组对象中所有的元素进行快速判断（every、some）

every是判断数组中所有元素均满足某个条件，some是判断数组中任意一个元素满足条件。

2024-07-31 09:43:58 230

原创使用css实现打开抽屉效果（css过渡动画）

使用css实现鼠标悬浮打开抽屉效果

2024-06-21 09:56:36 1083

原创 JS判断对象中是否存在某个属性（hasOwnProperty）

【代码】JS判断对象中是否存在某个属性（hasOwnProperty）

2024-04-28 15:38:22 376

原创 js判断dom元素是否出现在当前视口内

【代码】js判断dom元素是否出现在当前视口内。

2024-04-26 09:23:35 650

原创 jquery一些常用操作dom代码（含修改伪类元素的样式）

获取满足条件的子元素（在当前元素中的直接子元素中遍历）prepend()：向指定元素的开始处增加子元素。append()：向指定元素的末尾处增加子元素。before()：向指定元素前面增加同级元素。获取满足自己条件的父节点（只返回最接近的）获取满足条件的子元素（在所有子元素中遍历）after()：向指定元素后面增加同级元素。获取兄弟节点siblings。

2023-09-18 16:05:33 541