- 博客(66)
- 收藏
- 关注
RSS订阅原创 虚拟dom转真实dom
初版// 文本节点 vDom: string// 元素节点 vDom: object {tag:'div', classList: [], value: 'div', children: [{...},{...}]}const virtualDomToDom = vDom => { let parentNode = document.querySelector('body') const toDom = vDom => { const vDomType = typeo
2021-12-27 18:13:28
462
1
原创 右边盒子高度随着左边盒子高度而变化
思路：父盒子不设置高度，随着左边盒子内容的变化而将父盒子高度撑开，此时父盒子高度等于左边盒子高度，然后再让右边盒子高度为父盒子高度的100%用于测试，给左边盒子添加内容 <script> const btn = document.querySelector('#btn') const left = document.querySelector('.left') btn.onclick = function () { const value
2021-12-26 22:12:42
979
原创 window子对象
Window的子对象document文档对象模型，通常用来操作 dom 元素，对 dom 的增删改查screen保存了当前屏幕的一些信息 console.log(screen.availHeight) // 浏览器窗口所在的屏幕的高度（单位像素） console.log(screen.availWidth) // 浏览器窗口所在的屏幕的宽度（单位像素） console.log(screen.height) // 浏览器窗口可用的屏幕高度（单位像素） console.log(screen.wi
2021-12-15 10:19:32
1558
原创 css实现常用效果
css实现常用效果溢出隐藏一行/* 溢出隐藏 */overflow: hidden;/* 溢出部分显示省略号 */text-overflow: ellipsis;/* 强制不换行 */white-space: nowrap;多行overflow: hidden;text-overflow: hidden;/* 将对象作为弹性伸缩盒子模型显示 */display: -webkit-box;/* 设置多少行 */-webkit-line-clamp: 2;/* 设置或检索伸缩
2021-12-14 20:03:31
415
原创 js判断两个对象是否相等
function isEqual(a, b) { const aProps = Object.getOwnPropertyNames(a) const bProps = Object.getOwnPropertyNames(b) if (aProps.length !== bProps.length) { return false } const set = new Set() aProps.forEach(item => { if (!set.has(item
2021-12-13 23:43:55
703
原创 js本地存储
本地存储js 本地存储主要有以下几种方式• cookie• session• localStorage• sessionStorage• indexedDB(待补充)cookiecookie，小型文本文件，指某些网站为了辨别用户信息而存储在用户浏览器（即客户端）上的数据。是为了解决 http 无状态导致的问题（问题：多次请求无法区分是否是来自同一用户）。它存储的文本数据一般不超过 4kb，由一个名称 name、一个值 value 和其它几个可选属性，如：有效期、安全性、使用范围。由于需要
2021-12-13 23:29:42
1400
原创 js typeof
typeof我们知道 typeof 可以用来判断一个值类型变量的类型，如下代码typeof 10 // numbertypeof '10' // stringtypeof undefiend // undefiendtypeof true // booleantypeof null // object当然，上面的只是一些基础用法，下面介绍的 typeof 应用场景可能很多都没见过一function fun() { console.log(typeof arguments)}fun
2021-11-28 15:12:56
468
原创 在React中使用防抖节流
在React中使用防抖节流防抖和节流先来介绍一下防抖和节流防抖：事件触发后延迟n秒在执行，如果在这n秒内再次触发则重新计时。即在一段时间内只允许事件执行一次，常用于表单提交，输入框防抖节流：事件触发后延迟n秒在执行，并且在这n秒内再次触发事件时不允许执行。即减少一段时间内事件触发的频率，常用与监听滚动条滚动，鼠标移动，窗口大小变化依据上面的定义可以手写一个防抖和节流防抖：const debounce = (fn, delay) => { let timer return
2021-11-22 21:49:27
2893
3
原创 哈希表（散列表）
哈希表前言首先来看数组，我们知道数组可以通过下标值拿到某个元素，这个操作是非常快的（O(1)），但是数组的插入和删除的效率并不是很高，删除数组的某个元素我们需要将被删除元素的后面的元素往前移，插入则需要将数组元素往后移，这种移动操作是效率并不是很好。这时候可能就会想能不能有一种数据结构既能通过某个index值快速查找到某个元素（数组的功劳），又能让插入和删除效率非常高（链表的功劳），所以就引入了哈希表（散列表）这个数据结构哈希表定义哈希表就是通过key值（键值）直接访问数据的数据结构。它会通过一
2021-10-24 15:29:30
182
原创 js使用reduce实现map
js使用reduce实现map先介绍一下 reduce 方法reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。参数：callback：回调函数，有四个参数 (1) accumulator：累计器，累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（见于下方）。 (2) currentValue：当前值 (3) index：可选，当前项的索引号，如果指定了 initialValue，则
2021-10-13 20:05:47
622
原创 SyntaxError: Invalid regular expression: invalid group specifier name
这是因为Safari浏览器不支持两种 //格式的正则表达式零度断言：?<= , ?<!解决：使用构造函数代替 // 格式```javascriptlet reg = /ab?<=cd/改写成let reg = new RegExp('ab(?<=cd)')
2021-10-13 15:38:29
4642
原创 链表
复习 链表链表被称为线性表的链式存储结构定义链表：可以存储多个元素，由n个结点和指针链组成一个链表，称为线性表的链式存储结构；每个节点由数据域和指针域两部分组成单链表单链表：由n个节点和指针链组成，每一个结点由数据域（存放元素本身的数据）和指针域（指向下一个元素的引用（或称为指针））组成单链表的代码实现function LinkedList() { /** * 头指针，用于指向链表的第一个节点的引用， * 当链表为空的时候，head指向 null * 最后一个节点指
2021-10-11 01:14:51
192
原创 栈和队列
复习 栈和队列栈和队列前言：我们知道数组是一种线性结构，并且可以在任意位置进行插入和删除，有时候为了实现某些功能，需要对这种任意性加以限制，而栈和队列就是比较常见的受限的线性表结构，栈仅允许在表的一端进行插入和删除，这一端称为栈顶，另一端称为栈低。后进先出LIFO(last in first out)：向一个栈插入元素叫做进栈，压栈，入栈，将新元素放到栈顶元素的上面，成为新的栈顶元素；从栈顶删除元素叫做出栈，退栈，删除栈顶元素，使其相邻的元素成为新的栈顶元素；基于数组实现functio
2021-10-06 12:22:52
73
原创 深度优先搜索和广度优先搜索
复习 深度优先搜索和广度优先搜索（js）先来了解一下图的存储方式------领接表和领接矩阵无向图的领接矩阵和领接表有向图的领接矩阵和领接表知道图是如何存储的以后，就可以用代码来保存一个图，采用邻接表的方式来存储图function Chart() { /* 顶点 */ this.vertex = [] /* 边 */ this.edge = new Map()// 添加顶点 Chart.prototype.addVertex = (vertex)
2021-10-04 11:27:36
99
原创 树和二叉树
复习 树和二叉树1. 树的定义树是是由n（n >= 0）各结点构成的有限集合，是一种一对多的数据结构当 n = 0 时，称为空树当 n > 0 时，称为非空树，具备以下性质有且仅有一个特殊的结点，这个结点称为根节点其余结点可分为m（m >= 0）个互不相交的有限集合，其中每一个集合本身又是一颗树，并叫做树的子树2. 树的基本术语3. 二叉树(**)1. 定义由 n（n >= 0）个结点组成的有限集合二叉树不是树的特殊情况，完全是两个概念。因为二叉
2021-10-03 23:56:19
235
原创 es6的Promise详解
PromisePromise的含义Promise是异步编程的一种解决方案，比以前传统的异步操作就是回调函数和事件更强大，使用起来更简便，并且避免了回调地狱的问题（回调地狱就是指多层回调函数嵌套）Promise是es6新增的引用类型，是一个构造函数，通过和关键字new一起使用来创建Promise实例，需要传递一个执行器函数（这个执行器函数是同步执行的），执行器函数有两个参数且都是函数，这两个参数是js提供的不需要我们手动创建const p = new Promise((resolve,reject
2021-09-30 00:55:44
289
原创 常用排序算法(js)
复习排序算法1. 冒泡排序思路：每一轮都对相邻的两个元素进行比较，如果逆序则交换位置，直到所有元素都排好序为止基本操作：代码：ArrayList.prototype.bubbleSort = () => { const len = this.data.length for (let i = 0; i < len - 1; i++) { for (let j = 0; j < len - 1 - i; j++) { if
2021-09-28 23:54:14
605
原创 清晰专业的js代码
// 1. 单行if else 语句const num = 10if (num < 100) { console.log('yes')} else { console.log('no')}10 < 100 ? console.log('yes') : console.log('no')// 2. 使用展开运算符合并数组const arr = [1, 2, 3, 4]const brr = [5, 6, 7, 8]console.log([...arr, ...brr
2021-09-17 19:41:05
78
原创 React.memo、useMemo、useCallback的用法
React.memo、useMemo、useCallback的用法 这三个API通常都是在优化组件的时候使用，并且他们的原理都是类似于vue的计算属性的缓存机制，依赖项没有发生过变化，直接拿到之前求得的结果不会在执行函数；也可以说是基于记忆化函数的原理，记忆化函数：也就是当前输入的参数如果之前已经求过结果，那么便不再重新执行，而是直接输出之前的结果先看代码父组件只要任意一个 state 被更新了 都会执行组件函数被重新渲染，从而导致 子组件 son 也会被从新渲染即使子组件没有依赖父组件的 stat
2021-08-05 14:53:31
335
原创 react组件通信的方式
父子组件通信父子通信父组件向子组件传值，通过 props的方式，在子组件身上绑定一个自定义属性将值传递给子组件子组件向父组件传值，也是通过 props的方式，在子组件身上绑定一个自定义属性并将可以修改父组件状态的函数传递给子组件，然后子组件通过调用这个函数就可以将值传递给父组件父组件 import { useState } from 'react'import Son from './son'const Father2 = () => { const [count, setCo
2021-08-04 20:44:20
82
原创 git commit的时候报错husky ＞ pre-commit hook failed (add --no-verify to bypass)
如图解决办法：将 git commit -m "....." 换成 git commit --no-verify -m "...."
2021-07-27 17:28:46
193
原创 ts类型兼容
ts类型兼容结构类型：结构类型是一种只用其成员来描述类型的方式，比如类，接口。兼容性规则：（1）如果 x 要兼容 y（即 x = y），那么y至少要具有x相同的属性；（2）或者说只能将 “子类” 赋值 给 “父类”，反过来不成立；检查函数参数的时候也是这种兼容性规则例1，可以使用第（1）中理解，y 中包含了 name 属性interface Named { name: string;}let x: Namedlet y = { name: 'Alice', location: 'Se
2021-07-25 11:07:34
325
原创 jsDOM事件流
dom事件流分为三个阶段：捕获阶段、目标阶段、冒泡阶段事件捕获：事件从DOM顶层节点触发，逐级往下传播至最具体的元素接收的过程事件冒泡：事件从最具体的元素触发，逐级向上传播至DOM数的最顶层节点的过程目标元素：具体触发事件的元素当事件名触发后这三个阶段的顺序是这样的：捕获阶段，目标阶段，冒泡阶段一般我们在dom事件上只需要一个阶段就行了（即捕获阶段还是冒泡阶段），通过 addEventListener 这个方法的第三个参数，默认为false：冒泡阶段；true：捕获阶段冒泡： <
2021-06-27 10:57:43
206
2
原创 js其他值类型自动转换数值类型的情况
js其他值类型自动转换数值类型的情况其他值类型与数值类型做减法的时候，‘10’ --> 10；true —> 1；false —> 0；null ----> 0；undefined ----> NaNconsole.log('------减法--------')console.log(10 - '10') // 0console.log(10 - true) // 10 - 1 = 9console.log(10 - false) // 10 - 0
2021-06-26 23:22:06
114
原创 js给字符串在每两个之间插入一个0
使用字符串的replace方法，替换字符，即：a ----> a0，然后使用slice截取字符串，不截取最后一个字符let str = 'abc'let str1 = 'abcdef'// 将字符串的每个字符都添加一个0：a --> a0 然后删除最后一个 0function insert(str) { for (let i = 0; i < str.length; i += 2) { str = str.replace(str[i], str[i] + '.
2021-06-26 11:57:51
1204
原创 js判断数组的常用7种方法
我知道的Array.isArray(arr)const arr = [1, 2, 3]// 我知道的 五种方法console.log(Array.isArray(arr))arr instanceof Arrayconsole.log(arr instanceof Array)arr.__ proto__ === Array.prototypeconsole.log(arr.__proto__ === Array.prototype)arr(.__ proto _
2021-06-23 22:51:32
139
原创 js的基本数据类型包括es6新增
js基本类型有 undefined boolean null string numberes6新增有 Symbol BigIntconsole.log(typeof undefined)console.log(typeof null)console.log(typeof 1)console.log(typeof '1')console.log(typeof true)// es6新增基本数据类型// 1.Symbolconsole.log(Symbol(123))console.log(
2021-06-23 22:16:52
484
原创 解决外边距合并的问题
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl
2021-06-23 21:55:32
78
原创 js本地存储
js本地存储有cookie sessionStorage localStorage三种方式三种方式的区别：cookie无法保存太大的数据（最大4kb），本地保存的数据会发送给服务器，浪费带宽等sessionStorage，localStorage 存储在用户的浏览器，只能存储字符串，存储得容量较大（前者约5M，后者约20M）sessionStorage生命周期为关闭浏览器窗口，只在同一窗口（页面）下数据可以共享localStorage生命周期永久生效，除非手动删除 否则关闭页面也会存在，可以多窗
2021-06-10 20:28:06
684
原创 js存储cookie
/** * @description: 存储 token * @param {*} key 键名 * @param {*} value 键值 * @param {*} time 需要存储多长时间(单位为 h) * @return {*} */ function saveCookie(key, value, time) { // h ---> ms time = tim
2021-06-10 18:41:10
263
原创 路由跳转：Redirected when going from “/“ to “/register“ via a navigation
vue-router.esm.js?8c4f:2065 Uncaught (in promise) Error: Redirected when going from “/” to “/register” via a navigation写了个小demo用于复习路由守卫；在路由规则里给 path: ‘/register’ 添加了路由独享守卫，没有登陆进入 /register 就会跳转到 /login；然后通过编程式导航进入 /register 页面然后莫名就报错了翻译过来就是：从 / 页面重定向
2021-06-08 21:07:32
3095
原创 js中var，let，const用法与区别
var 具有变量提升，let const 不具有// 1. var 具有变量提升，let const 不具有console.log(a) // undefinedconsole.log(b) // 报错console.log(c) // 报错var a = 10let b = 10const c = 10var可以重复声明变量，let和const不可以// 2. var可以重复声明变量，let和const不可以var num = 10var num =100let num1.
2021-06-06 17:17:51
201
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人