- 博客(41)
- 收藏
- 关注
原创 一、Sequelize简单创建一个数据库
文章目录1. 什么是Sequelize?2. 安装Sequelize3. Sequelize的基本使用(1)连接数据库①创建Sequelize对象② 测试连接(2)建立model对象(数据库表)(3)模型之间建立关联,并同步数据库运行之后:1. 什么是Sequelize?Sequelize详情请看官方文档Sequelize 是一个基于 promise 的 Node.js ORM。ORM是对象关系映射,是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术。简单的说,ORM是通过使用描述对象和数
2021-12-31 18:06:38 1536
原创 dotenv -- 环境变量的管理
文章目录1.什么是dotenv2.dotenv 的安装3.如何使用dotenv(1)创建 .env 文件,并且配置好环境变量(2)在入口文件app.js里引入dotenv(3)接下来的项目中的每个地方使用环境变量了1.什么是dotenv在开发Node.js的项目中,我们往往需要配置很多的不同环境变量,因此,我们每个文件也需要按需加载引入不同的环境变量文件,这就给我们的开发过程带来了很大的不便,因此,我们可以使用 dotenv 来帮助我们统一管理环境变量。dotenv 是一个零依赖的模块,它能将环境变量
2021-12-31 16:26:14 3403 1
原创 Redux(二) -- react-redux的使用及其工作原理
前言:之前我们说用redux可以方便的管理我们的数据,但是发布订阅的模式还是会有所不便,你还是需要在你们UI组件中编写订阅的函数。React-Redux是Redux的官方React绑定库,它更加的简化了我们的redux内部操作,不需要我们再手动绑定订阅操作。一、React-Redux 和 Redux在使用方式上的区别(参考上一章例子大概写的,有不明白的地方还请往下看后面的完整代码。)1.获取数据的对比redux的获取数据,要使用getState( )并且还需要subscribe( )监听才能获
2021-11-23 20:38:35 789
原创 ES6学习笔记(十)-- Proxy代理
前言:Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。由于Proxy实例方法非常多,本文不一一描述,详情还请大家参考官方文档。一、Proxy概述Proxy 可以对目标对象的读取、赋值、函数调用等操作进行 拦截,然后 进行操作处理。它不直接操作对象,而是像代理模式,通过对对象的代理对象进行操作,在进行这些操作时,可以添加一些需要的额外操作。(可以理解成污水处理厂,它们会把污水拦下来,进行处理,然后在
2021-11-22 20:07:43 423
原创 Redux(一) -- redux的使用及其工作原理
前言:在我们使用react进行开发时,管理不断变化的 state 非常困难。如果一个 model 的变化会引起另一个 model 变化,那么当 view 变化时,就可能引起对应 model 以及另一个 model 的变化,依次地,可能会引起另一个 view 的变化。直至你搞不清楚到底发生了什么。state 在什么时候,由于什么原因,如何变化已然不受控制。所以我们需要把 state 进行统一管理,这样才能控制每一个state的变化,让我们的程序可读性更强,出错率更低。一、什么是Redux?Redux
2021-11-20 21:51:51 1201
原创 React--hooks-- useRef 的使用
前言:在学React基础时,我们学习了refs这个属性来获取真实DOM,进而去操作真实DOM。而 我们 一般都是在 类组件上,使用 React.createRef(); 来创建ref。如果我们要在 函数组件上使用ref呢?所有React-hooks就为我们带来了 useRef 这个钩子函数。一、什么是useRef?const myRef = useRef(initialValue);useRef返回一个可变的ref对象,其.current属性被初始化为传入参数initialValue返
2021-11-19 22:57:58 934
原创 React--hooks-- useReducer数据状态管理
前言:之前我们在写react组件时,我们要么是通过类组件内定义state来管理数据,要么就是在函数组件内使用useState来管理数据。但如果一个数据牵扯到了很多个组件,那么我们管理起来就会十分麻烦。所以 react-hooks 为我们提供了一个类似与redux的功能 – useReducer来帮助我们集中式的处理复杂的state管理。一、useReducer的使用useReducer接收两个参数:第一个参数:reducer函数。第二个参数:初始化的state。返回值为最新的state和dis
2021-11-15 22:02:46 1864
原创 ES6学习笔记(九)-- Map对象
前言:了解Map之前,我们先来看看什么是键值对。JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),也就是{ key:value }的形式。但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。所以ES6提供了Map来解决这个问题,它类似于对象,也是键值对的集合,但是 “键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是 由原来的 字符串 - 值 ,变成了 值 - 值一、Map的特性Map对象支持使用复杂数据结构作为key,所以Map
2021-11-14 22:19:01 1372
原创 React--hooks-- useContext的使用
前言:之前,我们在使用 context 时,函数组件只能用 Consumer 包裹,而类组件虽然说能用 contextType ,但 contextType 在一个类组件内也只能使用一次,不能多个一起使用,所以当我需要传入多个context 时就会十分麻烦。而 React-hooks 为我们提供了 useContext 来让我们在函数组件中更方便的接收 context 。一、useContext的基本用法需求:简单实现一个主题切换、1.当我们不使用useContext时在这里插入代码片.
2021-11-14 21:11:54 1277
原创 React--hooks-- useMemo和useCallback
前言:在我们渲染页面时,有很多的函数和变量在没有被调用,但确触发并执行,父组件内的一部分在渲染时,子组件也会重新渲染等,这样会造成大量的内存消耗。所以 React-hooks 为我们提供了 useMemo 和 useCallback 来让我们对此进行优化处理,减少此类消耗,提高整体性能。一、useMemo 的使用1.不使用useMemo时function App() { const [count, setCount] = useState(1); const [value, se
2021-11-13 22:33:34 813
原创 React--hooks--useEffect的使用
前言:在react的class组件中,我们通过生命周期的钩子函数来完成一些副作用操作(发送网络请求,手动变更 DOM,记录日志等)。那么切换到函数组件,没有了this指向的生命周期钩子函数我们又要如何处理这些副作用操作呢?React-hooks 为我们提供了 useEffect 钩子函数,来让我更好的处理副作用。我们可以把 useEffect 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。一、如何使用
2021-11-12 22:40:29 899
原创 ES6学习笔记(九)-- Set集合
前言:ES6为我们提供了一种新的数据结构,它就是Set。实际上这里的Set 和 java 中的Set十分相似,存放的都是键值对,并且不能重复。让我来一起学习一下吧。一、Set的概念和基本用法Set 对象允许你存储任何类型数据的唯一值,无论是原始值或者是对象引用。简单点说就是:Set对象可以存任何数据类型的数据,而且会自动帮我们去重。// Set , 存放数组,不允许存放重复的值let setArr = new Set(['I','love','you','love'])console.lo
2021-11-12 15:39:30 522
原创 ES6学习笔记(八)-- 新增数据类型Symbol
前言:Symbol是ES6新增的一种数据类型,表示独一无二的值,防止属性名的冲突。一、Symbol的定义Symbol函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述let s1 = Symbol('foo');console.log(s1) // Symbol(foo)console.log(s1.toString()) // "Symbol(foo)"// 如果 Symbol 的参数是一个对象,就会调用该对象的toString方法,// 将其转为字符串,然后才生成一个
2021-11-10 15:35:49 388
原创 ES6学习笔记(七)-- ES6对象
前言:ES6对JS对象也升级了很多便利的操作以及新增的方法,这里只介绍一部分。更多详情请参考官网。一、ES6对象内的一些简洁操作1.在构建对象时,如果键值和值一样,则可以用属性简写;当然方法也可以简写let name = 'mikasa'let age = 16let obj = { name, age, method() { // 省略 function return "Hello!"; }}2.属性名表达式 (常用于构建key值(键名))Java
2021-11-09 16:10:25 568
原创 ES6学习笔记(六)-- 数组的扩展
前言:ES6为我们的数组操作提供了很多方便的方法,我们一起来看看吧。一、扩展运算符这里其实和前面讲的解构赋值是一样的,就不过多赘述。let arr = ['I','love ','you']function fn(a,b,c){ console.log(a,b,c);}fn(...arr)主要用途:(1)复制数组const a1 = [1, 2];// 写法一const a2 = [...a1]; // 得到新的内存地址// 写法二const [...a2] = a1
2021-11-08 17:07:20 101
原创 ES6学习笔记(五)-- 函数的扩展
前言ES6为我们在函数的使用上也提供了许多的便捷的东西,这里只阐述一部分,详情请参考官方文档。1.函数参数的默认值2.rest 参数3.箭头函数(重点:this的指向问题)一、函数参数的默认值ES6 之前,不能直接为函数的参数指定默认值。而 ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。function log(x = 'Hello', y = 'World') { console.log(x, y);}log() // Hello Worldlog('Hello'
2021-11-06 15:15:44 117
原创 ES6学习笔记(四)-- 数值的扩展
前言:ES6也为我们的数值操作提供了很多便利的操作,详情请参考官方文档。一、二进制和八进制表示法ES6 提供了二进制(Binary)和八进制(Octal)数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示。0b111110111 === 503 // true,二进制0o767 === 503 // true,八进制二、Number对象方法方法描述Number.isFinite()检查一个数值是否为有限的(finite),即不是InfinityNumb
2021-11-05 19:56:07 147
原创 ES6学习笔记(三)-- 字符串的新增方法
前言:ES6为我们提供了更多方便的字符串操作,这里只写了常用的,详情请参考官网。新增的实例方法:(实例方法 都需要先声明实例才能使用)方法描述includes(string, position)判断字符串中是否包含指定字符串,返回值是布尔值startsWith(string, position)判断字符串的开头是否包含指定字符串,返回值是布尔值endsWith(string, position)判断字符串的尾部是否包含指定字符串,返回值是布尔值repea
2021-11-05 16:51:14 91
原创 ES6学习笔记(二)-- 解构赋值
前言:解构赋值主要分为 数组的解构 和 对象的解构 ,在ES5中,我们想要获取数组中的每一个元素时,会十分的繁琐:let arr = [1,2,3];console.log(arr[0]);console.log(arr[1]);console.log(arr[2]); // 想要获得数组的每一个元素,得要一个个取,十分繁琐而ES6 的解构赋值,为我们很好的解决了这些问题,大大加快了开发效率。一、数组的解构赋值解构数组时,我们 解构出来的数据 都是按照 数组的下标顺序 获取的。1
2021-11-02 19:34:01 254
原创 ES6学习笔记(一)--let 和 const
前言:let 的用法类似于 var ,但是 let 只在所在的代码块内有效,所以我们一般使用 let 替代 var 。而 const 用来声明常量。一、let命令1. 块级作用域ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。{ // 块级作用域 let a = 10; var b = 1;}console.log(a); // ReferenceError: a is not defined.console.log
2021-11-01 20:00:35 92
原创 React--hooks--useState的使用 和 常见问题
Hook的简介Hook简单点说就是:(让函数组件具备类组件的功能)1.只能在函数组件内使用2.使得组件复用变得更加简单3.抛开了class繁杂的生命周期,以及this的指向问题一、useState的使用1.定义useState// 由于useState的返回值是数组// 所以数组解构出来的第一个参数是 状态,第二个参数是 改变状态的方法// initialState可以是任意js类型或对象,也可以是一个函数用于惰性初始化const [state, setState] = useState
2021-10-25 14:44:02 3707
原创 React--Context的使用
一、为什么要用contextContext 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。当我们子组件很多,并且都在同一个组件树上时,我们需要把props传递非常多次,所有我们可以用context把一些每个组件的公共数据通过Provider传递。Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据。二、如何使用Context?详情参考官网(1) Reract官方给出的API :React.createContext:创建一个上下文的容器(组
2021-10-20 19:30:00 348
原创 React-Refs的使用
Refs的使用(详情参考官网 Refs & DOM)Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。在典型的 React 数据流中,props 是父组件与子组件交互的唯一方式。要修改一个子组件,你需要使用新的 props 来重新渲染它。但是,在某些情况下,你需要在典型数据流之外强制修改子组件。被修改的子组件可能是一个 React 组件的实例,也可能是一个 DOM 元素。也就是说,Refs其实是提供了一个对真实DOM(组件)的引用,我们可
2021-10-16 20:43:15 365
原创 六、React生命周期
挂载卸载过程1.1.constructor()constructor()中完成了React数据的初始化,它接受两个参数:props和context,当想在函数内部使用这两个参数时,需使用super()传入这两个参数。注意:只要使用了constructor()就必须写super(),否则会导致this指向错误。1.2.componentWillMount()componentWillMount()一般用的比较少,它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor().
2021-10-08 20:16:35 103
原创 五、React -- 列表&Key,表单
列表&Key一、.map()的使用1. 渲染基础的列表组件这个组件接收 numbers 数组作为参数并输出一个元素列表。const numbers = [1,2,3,4,5]function NumList(props){ const numbers = props.numbers; const listItems = numbers.map((number)=>( <li>number:{number}</li> ))
2021-09-27 19:08:35 87
原创 四、React组件的传值问题
React组件传值react内组件传值主要有三种: 父组件向子组件传值 、 子组件向父组件传值 、 以及 兄弟组件之间的传值一、父组件 - - - > 子组件父组件向子组件传值是通过 props 来传,在子组件中用 this.props.xx 接收父组件传来的值class Father extends React.Component { constructor(props) { super(props) this.state = {
2021-09-20 20:37:20 392
原创 三、类组件的state & setState
一、state的基本使用需求:封装一个Clock组件来实现时钟的自动更新1.用函数组件实现function Clock(props){ return ( <div> <h1>hello world</h1> <h1>it is {props.time}</h1> </div> )}function tick(){ React
2021-09-18 16:25:13 960
原创 二、React函数组件和类组件
注意: 无论是函数组件还是类组件,组件名称必须以大写字母开头。React 会将以小写字母开头的组件视为原生 DOM 标签。例如,< div /> 代表 HTML 的 div 标签,而 < Welcome /> 则代表一个组件,并且需在作用域内使用 Welcome。函数组件1.定义函数组件(1)最基本的定义方式function Welcome() { return <h1>Hello</h1>;}(2)传入props的定义方式functio
2021-09-14 22:24:57 90
原创 一、JSX语法的基本使用
JSX语法的基本使用一、什么是JSX?JSX是React的核心组成部分,是一种JavaScript语法扩展,它使用XML标记的方式去直接声明界面,界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构(DOM结构)的语法。eg. 我们直接用html输出一个helloworld,代码是直接写在body里面:<body> <div>helloworld</div></body>但 jsx 是 把 html 代码写在
2021-09-11 16:47:05 1491
原创 二叉树的遍历
一、什么是二叉树?树 是一种经常用到的数据结构,用来模拟具有树状结构性质的数据集合。树里的每一个节点有一个值和一个包含所有子节点的列表。从图的观点来看,树也可视为一个拥有N 个节点和N-1 条边的一个有向无环图。二叉树是一种更为典型的树状结构。如它名字所描述的那样,二叉树是每个节点最多有两个子树的树结构,通常子树被称作“左子树”和“右子树”。二、二叉树的三种遍历(1)前序遍历前序遍历首先访问根节点,然后遍历左子树,最后遍历右子树。递归写法:class Solution { // 先序遍历
2021-08-29 16:44:05 78
原创 H5新特性
一、什么是H5?HTML5并不仅仅只是做为HTML标记语言的一个最新版本,更重要的是它制定了Web应用开发的一系列标准,成为第一个将Web做为应用开发平台的HTML语言。HTML5定义了一系列新元素,如新语义标签、智能表单、多媒体标签等,可以帮助开发者创建富互联网应用,还提供了一些Javascript API,如地理定位、重力感应、硬件访问等,可以在浏览器内实现类原生应用,甚至结合Canvas我们可开发网页版游戏。二、新特性1.语意特性,添加< header >< header/
2021-08-27 21:26:00 138
原创 二分查找及其细节
二分查找一、定义:二分查找也称折半查找(Binary Search),是一种在有序数组中查找某一特定元素的搜索算法。我们可以从定义可知,运用二分搜索的前提是数组必须是有序的,这里需要注意的是,我们的输入不一定是数组,也可以是数组中某一区间的起始位置和终止位置二、思想:(1)确定数组nums的大小,定义 left = 0, rigth = nums.length - 1 , mid = (left + right)/2,(2)当 left <= right 时循环执行下面步骤当 nums[mid
2021-08-26 20:09:29 134
原创 sessionstorage 和 localstorage 的区别
Web存储随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,传统方式我们以document.cookie来进行存储的,但是由于其存储大小只有4k左右,并且解析也相当的复杂,给开发带来诸多不便,HTML5规范则提出解决方案。 Webstroage API提供的方法: setItem (key, value) —— 保存数据,以键值对的方式储存信息。 getItem (key) —— 获取数据,将键值传入,即可获取
2021-08-25 21:14:21 330
原创 滑动窗口思想
滑动窗口滑动窗口的本质还是双指针的应用一 . 滑动窗口的作用滑动窗口算法可以用以解决数组/字符串的子元素问题,它可以将嵌套的循环问题,转换为单循环问题,降低时间复杂度。二 . 滑动窗口的用法定义左右指针,右指针依次遍历数组,此时的下标即右指针,向后依次挪动 ; 当左指针和右指针区间内的元素不符合条件时,我们便会移动左指针,直至条件符合,继续挪动右指针。其间统计每一次的结果。三. 应用举例eg-1. 长度最小的子数组 (leecode 209题, 难度 中等 )public int minS
2021-08-22 23:58:21 127
原创 双指针的应用
双指针的应用一. 双指针可分为:快慢指针,对撞指针。二. 双指针技巧主要应用在解决 数组,链表 以及 字符串 问题三. 双指针的应用场景:(1)快慢指针:主要运用于处理链表内部环路的问题,再就是可以解决数组内是否有重复项的问题。eg-1. 删除有序数组中的重复项(leetcode 第26题 - 难度 easy)class Solution { public int removeDuplicates(int[] nums) { int len = nums.length;
2021-08-22 23:03:56 605
转载 List、Set、Map详解及区别
List、Set、Map详解及区别一、List接口List是一个继承于Collection的接口,即List是集合中的一种。List是有序的队列,List中的每一个元素都有一个索引;第一个元素的索引值是0,往后的元素的索引值依次+1。和Set不同,List中允许有重复的元素。实现List接口的集合主要有:ArrayList、LinkedList、Vector、Stack。ArrayListArrayList是一个动态数组,也是我们最常用的集合。它允许任何符合规则的元素插入甚至包括null。每一个Ar
2021-05-25 22:35:11 11583 1
原创 **Unity中Update,FixedUpdate,LateUpdate的区别*
Unity中Update,FixedUpdate,LateUpdate的区别void FixedUpdate () 固定更新void Update () 更新void LateUpdate() 晚于更新1.FixedUpdate () 和 Update ()同:当MonoBehaviour启用时,其在每一帧被调用。都是用来更新的异:Update()每一帧的时间不固定,即...
2020-04-02 18:39:40 159
原创 算法改进(斐波那契数列)
斐波那契数列指的是这样一个数列 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233,377,610,987,1597,2584,4181,6765,10946,17711,28657,46368…这个数列从第3项开始,每一项都等于前两项之和。递推公式:斐波那契数列:1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, ...
2020-01-18 17:28:31 843
原创 单链表的一些基本操作(自我总结)
链表可分为两种1.无头结点定义2.有头节点定义无头结点定义的链表:它的第一个节点就开始储存数据,这样在进行后续某些操作时会造成一些不方便的地方。(这是我从啊哈算法中看到的版本,没有分开函数去创立链表)#includeusing namespace std; //链表是由多个结构体组成,其中的指针指向的下一个结构体的地址struct node{ int data;...
2020-01-15 21:32:11 378
原创 c++中有关字符串的一些问题(可能不全面)
字符数组*char有关的应用函数:1.字符串复制函数strcpy其函数原型为strcpy(char[],const char[]);strcpy是string copy(字符串复制)的缩写。它的作用是将第二个字符数组中的字符串复制到第一个字符数组中去,将第一个字符数组中的相应字符覆盖。eg.#include<cstdio>#include<iostream>...
2020-01-14 18:31:58 535
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人