- 博客(117)
- 收藏
- 关注
RSS订阅
原创 用原生JS实现深拷贝
用原生JS实现深拷贝浅拷贝和深拷贝的概念这里不做赘述。思路：当拷贝的元素不是基础类型时，他只会进行浅拷贝。 赋值的时候（如var a =b），若其是基础类型(b是基础类型(ex:Boolean、String、Number))，则会重新用这个基础类型的值对其进行初始化(不会对其源头有影响)。//原理理解var a = 12; var b = a; console.log(a,b);//12,12 b=6; console.log(a,b);//12,6深
2020-12-23 15:15:24
632
原创 解决图片底部默认空白缝隙问题
问题描述在做一个背景图片更改效果的时候，发现图片在加了边框之后，在图片的下面会出现一个空表的缝隙如下图所示，在四个小图片下面会有一个缝隙问题分析这是由于形如图片的行内块元素的默认垂直对齐方式是基线对齐（baseline）,给文字预留了部分显示空间（即被文字占用）。说到垂直对齐方式，就要对四种不同的准线进行描述。如下图所示，基线和底线之间还留有部分距离。由于默认的对齐情况是按照英文的基线对齐，在不对垂直对齐方式进行调整的情况下，由于是基线对齐，图片的下面就会产生空白缝隙的情况。解决方案
2020-09-11 16:52:10
1078
原创 VS CODE中如何快速定位到需要的源码？
不要再一个一个文件的ctrl+F进行字段查找了，为什么不用全局搜索（或者单个文件的全局搜索）呢？搜索快捷键内容全局搜索Ctrl+Shift+F进行内容搜索（可限制范围）文件名全局搜索ctrl+P输出对应的文件名单个文件内的字段搜索Ctrl+F定位到当前文件中的某个字段Ctrl+P + @搜索的代码内容 +回车，自动定位到该行其他快捷键在打开的几个文件间进行跳转Ctrl+Tab （类似于windows的Alt+Tab）编辑位置的快速跳转Alt+ ←/→...
2021-06-15 16:23:31
5559
1
转载 Set、WeakSet、Map、WeakMap方法汇总
SetSet中的元素中的判定方式是全等。向 Set 加入值的时候，不会发生类型转换，所以5和"5"是两个不同的值。Set 内部判断两个值是否不同，使用的算法叫做“Same-value-zero equality”，它类似于精确相等运算符（===），主要的区别是向 Set 加入值时认为NaN等于自身，而精确相等运算符认为NaN不等于自身。let set = new Set();let a = NaN;let b = NaN;set.add(a);set.add(b);set // Set {N
2021-06-15 09:21:52
267
原创 Promise.all的用法及其细节
Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。可以将多个 Promise 实例，包装成一个新的 Promise 实例。const p = Promise.all([p1, p2, p3]);上面代码中，Promise.all方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。（Promise.all方法的参数可以不是数组，但
2021-06-11 15:29:01
50109
2
原创 yarn使用指南
YARN 是什么？Yarn发布于2016年10月，并在Github上迅速拥有了2.4万个Star(最近3.6万)。而npm只有1.2万个Star(最近1.7万)。这个项目由一些高级开发人员维护，包括了Sebastian McKenzie（Babel.js）和YehudaKatz（Ember.js、Rust、Bundler等）。由Facebook、Google、Exponent 和 Tilde 联合推出的JS 包管理工具为什么使用 YARN？Yarn 是为了弥补 npm 的一些缺陷而出现的。
2021-06-11 15:23:40
241
1
原创 使用 NPM 可能存在的困扰
NPM INSTALL 安装依赖慢有些依赖包源属于国外，在国内下载第三方包的速度极慢。解决方案：使用淘宝 NPM 镜像定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm$ npm install -g cnpm --registry=https://registry.npm.taobao.org使用方法：$ cnpm install [name]npm源管理工具$ npm install -g nrm使用方法：$ nrm ls* npm -
2021-06-11 14:55:32
403
原创 React性能优化小技巧
REACT 优化性能介绍一些项目中可用于改进 React 代码的有效技巧。避免在渲染函数中使用内联函数定义原因：如果在JSX属性中使用箭头函数，它将在每次渲染时创建新的函数实例。这可能会为垃圾收集器带来很多工作。可以定义箭头函数，而不是为 props 定义内联函数。避免在 map 方法中使用 Index 作为组件的 Key原因：使用 index作为 key， 被用在React虚拟DOM元素的时候，会使你的应用可能出现错误的数据 。当您从列表中添加或删除元素时，如果该 key 与以前相同，则 Re
2021-06-08 10:32:46
165
原创 TS——抽象类
// 抽象类不能创建实例(function () { abstract class Animal { name: string; constructor(name: string) { this.name = name; } // 抽象方法只能且必须在子类进行重写 abstract sayHi(): void; } class Dog extends Animal { sayHi() { console.log("hih
2021-06-07 17:16:41
170
原创 TS——接口
(function () { const obj = { name: "sss", age: 111, gender: "male", }; // 定义类时，可以使类去实现一个接口 // 实现接口就是使类满足接口的要求 class MyClass { constructor(name) { this.name = name; } say
2021-06-07 17:16:09
130
原创 TS自动编译
自动监视文件变化tsc xxx.ts -w编译路径下的所有ts文件前提：目录下有tsconfig.json，即使其是空文件也可以生效。快速生成tsconfig.json命令tsc -inittsc自动编译路径下的所有ts文件tsc -w //在主文件路径下执行...
2021-06-07 11:20:50
329
原创 Typescript类型
// 1. 基本类型：number string booleanlet ab: number;ab = 10;ab = 11;// 2. 字面量方法进行声明，则不可再改变 很少使用let abc: 10;// abc=11; //报错// 可以用 | 来连接多个类型 (联合类型)let abcd: "male" | "female";abcd = "male";abcd = "female";// abcd = "dontknown"; //报错，因为不在其声明的范围内le
2021-06-07 11:03:03
125
转载 git、gitee、github、gitlab 区别以及功能
Gitgit 是一种版本控制系统，是一个命令，是一种工具。我们用svn和git对比着来说，svn是集中式版本控制系统，而git是分布式版本控制系统。1、集中式版本控制系统是指版本库集中存放在一个中央服务器中，我们需要在自己电脑上通过连接中央服务器，从而把代码clone到本地，或者把自己电脑上的代码提交到中央服务器，如果中央服务器被炸毁了，那么所有的版本库都没了。在工作中，公司一般都有一个svn服务器，也就是版本控制系统，大家在自己电脑上通过TortoiseSVN客户端连接svn服务器，从而进行相应的版
2021-05-20 08:54:12
1889
原创 石墨文档支持的几种markdown格式
石墨目前支持几种最基本的 Markdown 语法：一级、二级、三级、四级标题（相应数量的 # 号 + 空格）有序列表（数字 + 点“.” + 空格）无序列表（星号“*” or 减号“-” + 空格）任务列表（一对中括号"[]" + 空格）引用（大于号 “>” + 空格）插入代码块（行首输入```+ 空格）分隔线（行首输入— + 空格）...
2021-05-16 10:25:58
4212
1
原创 同源策略
同源策略浏览器有一个很重要的概念——同源策略(Same-Origin Policy)。所谓同源是指，域名，协议，端口相同。不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况下，不能读写对方的资源。而违背同源策略，就是跨域。（AJAX默认遵循同源策略，即不满足同源策略，则不能发送AJAX请求）...
2021-05-15 11:15:07
104
原创 AJAX-POST设置请求体
AJAX发送请求//1.创建对象const xhr = new XMLHttpRequest();//2.初始化 设置类型与 URLxhr.open('POST','http://127.0.0.1:8000/server');//3.发送xhr.send();xhr.onreadystatechange = function(){ //判断 ..... //ex if(xhr.readyState === 4) //if(xhr.status>=200 &&
2021-05-14 19:58:03
424
原创 express基本使用
准备工作终端中对node进行初始化npm init --yes安装express框架npm i exporess基本使用引入expressconst express = require('express');创建应用对象const app = express();创建路由规则app.get('/',(request,response)=>{ //设置响应 response.send('HELLO EXPORESS');});request：
2021-05-14 17:32:10
146
原创 大型数据库——索引存储结构
索引存储结构：请创建一个包含一个表的数据库，该表至少2列。在此表中插入至少5行数据。在该表中创建一个聚集索引和非聚集索引，通过查询SYSINDEXES系统表相关信息和DBCC命令，显示你的数据表存储页和非聚集索引的存储页（非聚集索引用PAGE命令查看存储页时，用3号查看方式）。附上作业过程中使用的所有命令代码、截图、相关文字说明、作业心得体会等。创建数据库和表并插入数据：在该表中创建一个聚集索引和非聚集索引:CREATE UNIQUE CLUSTERED INDEX IX_ID ON TABLE
2021-05-14 16:35:09
210
原创 AJAX特点
AJAX的特点优点可以无需刷新页面与服务器端进行通信允许你根据用户时间来更新部分页面的内容缺点没有浏览历史，不能回退存在跨域问题（同源）SEO（搜索引擎优化）不友好
2021-05-14 14:45:20
99
原创 大型数据库——索引
什么叫索引据库中的索引是某个表中一列或者若干列值的集合和相应的指向表中物理标识这些值的数据页的逻辑指针清单。数据库中的索引与书籍中的索引类似，在一本书中，利用索引可以快速查找所需信息，无须阅读整本书。在数据库中，索引使数据库程序无须对整个表进行扫描，就可以在其中找到所需数据。书中的索引是一个词语列表，其中注明了包含各个词的页码。索引的作用通过创建唯一索引，可以保证数据记录的唯一性。可以大大加快数据检索速度。可以加速表与表之间的连接，这一点在实现数据的参照完整性方面有特别的意义。在使用OR
2021-05-09 16:46:56
377
原创 大型数据库——表的存储原理
数据行（记录）结构1、定长记录在定长记录里，每个字段都有固定的长度，而且字段数也是固定的。这种记录的字段能够连续存储，因此在给定记录地址的情况下，借助系统目录里有关字段的长度信息就能计算出某个特殊字段的地址。2、变长记录对于变长记录来说，一种可能的记录组织方式就是像定长记录一样连续地存放字段，字段之间通过分割符隔开。这种组织方式需要扫描记录才能定位需要访问的字段。另一种方法是在变长记录开始处预留一些空间作为存放一个整数偏移量数组的空间，数组中的第1个整数表示记录的第1个字段的起始地址，当然这个地址
2021-05-09 15:54:17
1760
6
原创 大型数据库——创建约束
利用create命令创建表其语法形式如下：CREATE TABLE <表名>(<字段名> <数据类型>[列级完整性约束条件] [,<字段名> <数据类型>[列级完整性约束条件] …][,<表级完整性约束条件>])参数说明：（1）<表名>是所要定义的基本表的名字。一个表它可以由一个或多个属性组成。（2）<字段名>一般取有实际意义的名字。（3）<数据类型>可以是前面介绍的数据类型。
2021-05-09 15:07:23
820
转载 大型数据库——事务控制
简介事务是一个用户定义的完整的工作单元，一个事务内的所有语句被作为整体执行，要么全部执行，要么全部不执行。遇到错误时，可以回滚事务，取消事务内所做的所有改变，从而保证数据库中数据的一致性和可恢复性。事务的特性原子性：事务是数据库的逻辑工作单位，事务中的操作要么都做，要么都不做。一致性：事务执行的结果必须是使数据库从一个一致性状态变到另一个一致性状态。隔离性：一事务的执行不能被其它事务干扰。持续性（永久性）：指事务一旦提交，则其对数据库中数据的改变就应该是永久的事务和批的区别批是一组整体编译的
2021-05-09 10:11:00
136
原创 手写Promise.race()
function promiseRace(promises){ if(!Array.isArray(promises)){ throw new Error('promises must be an array') } return new Promise(function(resolve,reject){ promises.forEach(p=>
2021-04-27 16:38:51
177
原创 JS实现两数之和的3种方法
常规办法：两次遍历 var twoSum = function (nums, target) { let res = [] for (let i = 0; i < nums.length - 1; i++) { for (let j = i + 1; j < nums.length; j++) { if (nums[i] + nums[j] === target) {
2021-04-23 11:39:31
4922
原创 JS实现call、bind、apply函数
call函数Function.prototype.myCall = function(context) { // 判断调用对象 if (typeof this !== "function") { console.error("type error"); } // 获取参数 let args = [...arguments].slice(1), result = null; // 判断 context 是否传入，如果未传入则设置为 window context =
2021-04-22 18:50:55
67
原创 JS中类数组转为数组的四种常见方法
类数组和数组结构类似，但是不能调用数组的方法，常见的类数组有arguments。一个函数也可以看做是类数组对象，因为他含有length属性，代表可接受的参数。通过数组原型上的slice实现Array.prototype.slice.call(arrayLike);通过数组原型上的splice实现Array.prototype.splice.call(arrayLike,0);通过数组原型上的cancat实现Array.prototype.cancat.call([],array
2021-04-21 11:45:32
199
原创 React 学习笔记 —— 错误边界 ErrorBoundary
理解：错误边界(Error boundary)：用来捕获后代组件错误，渲染出备用页面特点：只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误使用方式：getDerivedStateFromError配合componentDidCatch// 生命周期函数，一旦后台组件报错，就会触发static getDerivedStateFromError(error) { console.log(error); // 在render之前触
2021-04-19 22:45:34
1186
转载 React 学习笔记 —— render props
如何向组件内部动态传入带内容的结构(标签)?Vue中: 使用slot技术, 也就是通过组件标签体传入结构 <A><B/></A>React中: 使用children props: 通过组件标签体传入结构 使用render props: 通过组件标签属性传入结构,而且可以携带数据，一般用render函数属性children props<A> <B>xxxx</B></A>{this.props.ch
2021-04-19 19:36:28
139
原创 React 学习笔记 —— PureComponent
为什么会引入PureComponent？提高效率问题组件优化Component的2个问题只要执行setState(),即使不改变状态数据, 组件也会重新render() ==> 效率低只要父组件重新render(), 就会自动重新render子组件，纵使子组件没有用到父组件的任何数据 ==> 效率低效率高的做法只有当组件的state或props数据发生改变时才重新render()原因Component中的shouldComponentUpdate()总是返回
2021-04-19 18:35:01
106
原创 React学习笔记——Context
理解一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信使用1) 创建Context容器对象： const XxxContext = React.createContext() 2) 渲染子组时，外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据： <xxxContext.Provider value={数据}> 子组件 </xxxContext.Provider> 3) 后代组件读取数据： //第
2021-04-19 17:17:18
109
转载 React 学习笔记 —— Fragment
在 JSX 的语法中，明确要求，仅能有一个根标签因此，我们往往使用 div 去包裹整个组件标签但这样，会在页面上增加许多无用的 div，并且增加页面的标签层级可以用以下两种方式解决第一种：使用 Fragment 标签，它会在编译时被忽略import {Fragment} from 'react'...<Fragment> <p>test</p> <p>test</p></Fragment>...第二种：.
2021-04-19 16:46:40
209
原创 React学习笔记——3种常用的hooks
React Hook/Hooks是什么?Hook是React 16.8.0版本增加的新特性/新语法可以让你在函数组件中使用 state 以及其他的 React 特性三个常用的HookState Hook: React.useState()Effect Hook: React.useEffect()Ref Hook: React.useRef()State HookState Hook让函数组件也可以有state状态(虽然函数组件没有this), 并进行状态数据的读写操作语法
2021-04-19 16:39:53
608
转载 React学习笔记——lazyLoad
当未使用懒加载时，页面一打开，就将所有的路由组件给加载到页面了如果路由组件很多，且用户不会真正访问到那么多的路由组件，那么就相当于加载了不需要的多余组件因此，可以使用路由懒加载，当用户真正需要访问的时候再去请求如下import {lazy, Suspense} from 'react'import {Route} from 'react-router-dom'const Home = lazy(()=>import('./home'))const About = lazy(()=&.
2021-04-19 15:35:07
264
转载 React学习笔记——setState()的两种书写方法对比
setState更新状态的2种写法1.setState(stateChange, [callback])------对象式的setStatestateChange为状态改变对象(该对象可以体现出状态的更改)callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用import React, { Component } from 'react'export default class Demo extends Component { state = {
2021-04-19 13:51:37
606
原创 React学习笔记——使用redux调试工具
安装chrome浏览器插件下载工具依赖包npm install --save-dev redux-devtools-extension注：在Chrome中下载了扩展程序后，必须要安装工具依赖后才能生效
2021-04-19 12:34:35
154
原创 React学习笔记——纯函数和高阶函数
纯函数一类特别的函数: 只要是同样的输入(实参)，必定得到同样的输出(返回)必须遵守以下一些约束1)不得改写参数数据2)不会产生任何副作用，例如网络请求，输入和输出设备3)不能调用Date.now()或者Math.random()等不纯的方法redux的reducer函数必须是一个纯函数高阶函数理解: 一类特别的函数1)情况1: 参数是函数2)情况2: 返回是函数常见的高阶函数:1)定时器设置函数2)数组的forEach()/map()/filter()/reduce()/f
2021-04-19 12:28:23
169
原创 JS实现instanceOf()
function myInstanceOf(left, right) { let prototype = right.prototype let proto = Object.getPrototypeOf(left) while(true){ if(!proto) return false if(proto===prototype) return true...
2021-04-18 22:42:49
85
原创 React学习笔记——react-redux的使用
前言react-redux不同于redux，前者的诞生是由于react出品方认为使用rudux的react使用者太多了，进而Facebook公司自己出了react-redux来更好的优化react的使用。使用 react-redux安装 react-reduxyarn add react-redux在 react-redux 中，将组件分为两类：UI组件、容器组件其中，UI组件，不涉及 redux 相关代码，由 容器组件充当桥梁进行沟通，如下：在redux基本使用的demo基
2021-04-18 15:01:03
244
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人