略略略_略-CSDN博客

1.字典特点字典存储的是键值对，主要特点是一一对应。比如保存一个人的信息数组形式：[19，“Tom”, 1.65]，可通过下标值取出信息。字典形式：{“age”: 19, “name”: “Tom”, “height”: 165}，可以通过 key 取出 value。此外，在字典中 key 是不能重复且无序的，而 Value 可以重复。2.字典和映射的关系有些编程语言中称这种映射关系为字典，如 Swift 中的 Dictonary，Python 中的 dict。有些编程语言中称这种映射关系

2022-05-22 22:13:29 131

原创数据结构与算法学习（六）集合

集合几乎每种编程语言中，都有集合结构。集合比较常见的实现方式是哈希表，这里使用 JavaScript 的 Object 进行封装。1.集合特点集合通常是由一组无序的、不能重复的元素构成。数学中常指的集合中的元素是可以重复的，但是计算机中集合的元素不能重复。集合是特殊的数组。特殊之处在于里面的元素没有顺序，也不能重复。没有顺序意味着不能通过下标值进行访问，不能重复意味着相同的对象在集合中只会存在一份。2.封装集合ES6 中的 Set 就是一个集合类，尝试重新封装一个 Set 类，了解集合的

2022-05-15 19:21:02 106

原创数据结构与算法学习（五）队列

数据结构与算法学习（五）队列一.简述队列（Queue）是一种运算受限的线性表，特性是先进先出(FIFO：First In First Out)。现实中存在的队列，就是在电影院的排队。1.特点：只允许在表的前端（front）进行删除操作。只允许在表的后端（rear）进行插入操作。2.存在意义CPU 资源是有限的，任务的处理速度与线程个数并不是线性正相关。相反，过多的线程反而会导致 CPU 频繁切换，处理性能下降。所以，线程池的大小一般都是综合考虑要处理任务的特点和硬件环境，来事先设置的。

2022-04-17 20:37:57 590

原创数据结构与算法学习（四）栈

1.栈1.栈先进后出，后进先出。类似于一摞盘子，最后放上的盘子，往往先拿出去使用。其限制是仅允许在表的一端进行插入和删除运算。这一端被称为栈顶，相对地，把另一端称为栈底。向一个栈插入新元素又称作进栈、入栈或压栈，它是把新元素放到栈顶元素的上面，使之成为新的栈顶元素。从一个栈删除元素又称作出栈或退栈，它是把栈顶元素删除掉，使其相邻的元素成为新的栈顶元素。在入栈和出栈过程中，只需要一两个临时变量存储空间，所以空间复杂度是 O(1)。不管是顺序栈还是链式栈，入栈、出栈只涉及栈顶个别数据的操作，所以

2022-04-10 11:14:56 420

原创数据结构与算法学习（三）链表

数组与链表数组存储多个元素，数组（或列表）可能是最常用的数据结构。几乎每一种编程语言都有默认实现数组结构，提供了一个便利的 [] 语法来访问数组元素。数组缺点：数组的创建需要申请一段连续的内存空间(一整块内存)，并且大小是固定的，当前数组不能满足容量需求时，需要扩容。(一般情况下是申请一个更大的数组，比如 2 倍，然后将原数组中的元素复制过去)在数组开头或中间位置插入数据的成本很高，需要进行大量元素的位移。链表存储多个元素，另外一个选择就是使用链表。不同于数组，链表中的元素在内存中不必是

2022-04-05 21:54:26 98

原创数据结构与算法学习（二）复杂度分析与数组

// n表示数组array的长度int find(int[] array, int n, int x) { int i = 0; int pos = -1; for (; i < n; ++i) { if (array[i] == x) { pos = i; break; } } return pos;}最好情况时间复杂度要查找的变量x恰巧是数组中的第一个元素,这个时候对应的时间复杂度就是最好情况时间复杂度，也就是O(1)。最

2022-03-27 22:26:47 631

原创数据结构与算法学习（一）复杂度分析

一.大 O 复杂度表示法求 1,2,3…n 的累加和的执行时间。 int cal(int n) { int sum = 0; int i = 1; for (; i <= n; ++i) { sum = sum + i; } return sum; }从 CPU 的角度来看，这段代码的每一行都执行着类似的操作：读数据-运算-写数据。尽管每行代码对应的 CPU 执行的个数、执行的时间都不一样，但是，我们这里只是粗略估计，所以可以假设每行代码执行的时间都

2022-03-20 20:30:41 1090

原创设计模式学习（五）

一.职责链模式使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。请求发送者只需要知道链中的第一个节点，弱化发送者和一组接收者之间的强联系，可以便捷地在职责链中增加或删除一个节点，同样地，指定谁是第一个节点也很便捷。以展示不同类型的变量为例，设置一条职责链，可以免去多重if条件分支。// 定义链的某一项function ChainItem(fn) { this.fn = fn; this.

2022-03-13 21:59:37 1311

原创阮一峰 Promise学习

Promise 的含义Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。Promise对象有以下两个特点。对象的状

2022-03-06 21:58:03 318

原创阮一峰es6，Proxy和Reflect学习

一.Proxy1.简述Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。var obj = new Proxy({}, { get: function (targe

2022-02-20 18:56:53 709

原创阮一峰es6 set和map学习

一.Set1.基本用法ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成 Set 数据结构。const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) { console.log(i);}// 2 3 5 4上面代码通过add()方法向 Set 结构加入成员，结果表明 Set 结构不会添加重复的值。

2022-02-13 21:02:46 572

原创设计模式学习（四）

迭代器模式一.定义：迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。迭代器模式可以把迭代的过程从业务逻辑中分离出来，在使用迭代器模式之后，即使不关心对象的内部构造，也可以按顺序访问其中的每个元素。二.简单实现一个迭代器：迭代器模式无非就是循环访问聚合对象中的各个元素。1.jQuery 中的$.each 函数其中回调函数中的参数 i 为当前索引，n 为当前元素，代码如下:$.each( [1, 2, 3], function( i, n ){ c

2022-02-06 16:25:26 443

原创阮一峰ES6学习-Symbol

一.Symbol概述：ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。Symbol 值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类

2022-02-06 13:26:13 790

原创设计模式学习（三）

代理模式定义：是为一个对象提供一个代用品或占位符，以便控制对它的访问。定义举例:如果想请明星来办一场商业演出，只能联系他的经纪人。经纪人会把商业演出的细节和报酬都谈好之后，再把合同交给明星签。代理模式的关键是，当客户不方便直接访问一个对象或者不满足需要的时候，提供一个替身对象来控制对这个对象的访问，客户实际上访问的是替身对象。替身对象对请求做出一些处理之后，再把请求转交给本体对象。简单举例小明追女生的故事小明决定给 A 送一束花来表白。刚好小明打听到 A 和他有一个共同的朋友 B，于是

2022-01-23 21:27:40 218

原创设计模式学习（二）

单例模式定义:保证一个类仅有一个实例，并提供一个访问它的全局访问点。JavaScript中没有类的定义，单例模式的特点是唯一和全局访问，那么我们可以联想到JavaScript中的全局对象，利用ES6的let不允许重复声明的特性，刚好符合这两个特点；是的，全局对象是最简单的单例模式。let obj = { name:"W3Cschool", getName:function(){}}obj就是一个单例，因为obj刚好就符合单例模式的两大特点：“唯一"和"可全局访问”。但是并不建

2022-01-16 17:14:40 267

原创 useRef与JS设计模式学习(一)

useRef与JS设计模式学习(一)useRefconst refContainer = useRef(initialValue);使用useRef Hook，你可以轻松的获取到dom的ref。useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内持续存在，在组件的整个生命周期保持不变。当 ref 对象内容发生变化时，useRef 并不会通知你。变更 .current 属性不会引发组件重

2022-01-09 18:29:58 532

原创 js 容易出问题的点

js容易出问题的点一.null和undefined在原始类型中，有两个类型Null和Undefined，他们都有且仅有一个值，null和undefined，并且他们都代表无和空，我一般这样区分它们：1.null表示被赋值过的对象，刻意把一个对象赋值为null，故意表示其为空，不应有值。所以对象的某个属性值为null是正常的，null转换为数值时值为0。2.undefined表示“缺少值”，即此处应有一个值，但还没有定义，如果一个对象的某个属性值为undefined，这是不正常的，如obj.n

2022-01-03 00:55:24 81

原创 React学习 antd2升级到antd5； Class 中使用 React Hooks，并且能够互相传值

antd mobile2升级到antd mobile5官网上有两种升级方法，使用 antd-mobile-v2安装和通过别名安装 v5。第一种方法要把项目中所有对 antd-mobile 的引入都替换为 antd-mobile-v2，成本比较大，而且也没有足够时间去测试替换后的项目。因此这里采用第二种安装方式，别名安装。antd官网的升级指南一.antd2升级到antd5$ npm install --save antd-mobile-v5@npm:antd-mobile@next# or$

2021-12-26 16:47:34 2305

原创前端性能优化

前端性能优化方法简述减少请求数量、减小资源大小、优化网络连接、优化资源加载、减少重绘回流、使用性能更好的API和构建优化。一.减少请求数常用的减少http请求数有以下几种：1.合并图片当图片较多时，可以合并为一张大图，从而减少http请求数。经常变化的图片可能不太合适，变化相对稳定的就可以考虑。合并大图除了能减少http 请求数外，还可以充分利用缓存来提升性能。2.合并压缩css样式表和js脚本他们的共同目的都是为了减少http连接数。3.去掉不必要的请求开发写代码或者系统升级之后残留的

2021-12-19 21:24:45 150

原创 Promise学习

一.什么是PromisePromise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理且更强大。它最早由社区提出并实现，ES6将其写进了语言标准，统一了用法，并原生提供了Promise对象。二.Promise解决了什么问题1.回调地狱问题2.代码的可读性问题3.信任问题三.为什么会出现回调地狱在JavaScript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现：f

2021-12-12 19:56:25 64

原创 react 学习

react 学习一.阻止冒泡阻止react冒泡的三种方法import React, { Component } from 'react';class App extends Component { componentDidMount() { document.addEventListener('click', this.handleDocumentClick, false); document.body.addEventListener('click', this.handl

2021-12-05 22:55:24 169

原创 React 相关知识

React 相关知识1. React 事件机制React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.pr

2021-11-28 15:57:42 3943

原创 React 生命周期复习与Fiber学习

React 生命周期复习与Fiber学习React生命周期（新）16.3的时候，getDerivedStateFormProps不会延长到setState()和forceUpdate()React生命周期（旧）React官方认为，某个数据的来源必须是单一的，否则很容易出现Bug。且componentWillReceiveProps生命周期里用户可以操作this，所以在React16.3之后官方移除了componentWillReceiveProps，使用静态属性getDerivedStateFr

2021-11-21 14:47:20 156

原创 2021-11-14

重点知识回顾一. 什么是高阶组件?高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。二.高阶组件作用① 复用逻辑：高阶组件更像是一个加工react组件的工厂，批量对原有组件进行加工，包装处理。我们可以根据业务需求定制化专属的HOC,这样可以解决复用逻辑。② 强化props：这个是HOC最常用的用法之一，高阶组件返回的组件，可以劫持上一层传过来的props,然后混入新的props,

2021-11-14 15:31:29 561

原创 2021-11-07

React之diff算法diff算法的作用计算出Virtual DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面。传统diff算法diff算法即差异查找算法；对于Html DOM结构即为tree的差异查找算法；而对于计算两颗树的差异时间复杂度为O（n^3）,显然成本太高，React不可能采用这种传统算法；通过循环递归对节点进行依次对比，算法复杂度达到 O(n^3) ，n是树的节点数，这个有多可怕呢？——如果要展示1000个节点，得执行上亿次比较。即便是CPU快能执行3

2021-11-07 15:37:24 54

原创 2021-10-31

setState一.setState产生原因在React中，数据是自顶向下单向流动的，即从父组件到子组件。这样组件之间的关系变得简单并且可预测。state和props是React组件中最重要的改建，如果顶层组件初始化props, 那么React会向下遍历整颗组件树，重新尝试渲染所有的子组件。而state只关心每个组件自己内部的状态，这些状态只能在组件内部改变。当组件内部使用内置方法setState时，该组件就会尝试重新渲染，因为我们改变了内部状态，组件需要更新。二.setState作用通过set

2021-10-31 19:27:55 204

原创 2021-10-24

高阶组件(二)一.强化props1.混入props这个是高阶组件最常用的功能，承接上层的props,在混入自己的props，来强化组件。有状态组件(属性代理)function classHOC(WrapComponent){ return class Idex extends React.Component{ state={ name:'alien' } componentDidMount(){

2021-10-24 20:07:35 87

原创 2021-10-17

高阶组件(一)一. 什么是高阶组件?高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。简单来说，高阶组件（HOC，Higher-Order Components）不是组件，而是一个函数，它会接收一个组件作为参数并返回一个经过改造的新组件。需要区分的是，组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件。高阶组件是 React 中用于复用组件逻辑的一种高级技巧，

2021-10-17 21:02:50 116

原创 2021-10-10

一.组件与创建组件方式1.组件的含义组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。2.创建组件的方式函数组件与 class 组件。3.函数组件function Welcome(props) { return <h1>Hello, {props.name}</h1>;}该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个

2021-10-10 20:38:18 44

原创 2021-10-03

React 生命周期详细学习先放入一个生命周期速查表（来自于React官网）16.3的时候，getDerivedStateFormProps不会延长到setState()和forceUpdate()1.什么是生命周期组件从诞生到销毁会经历一系列的过程，该过程就叫做生命周期。React在组件的生命周期中提供了一系列的钩子函数（类似于事件），可以让开发者在函数中注入代码，这些代码会在适当的时候运行。生命周期仅存在于类组件中，函数组件每次调用都是重新运行函数，旧的组件即刻被销毁2.react旧版生命

2021-10-04 01:17:13 142

原创计算机网络学习

OSI模型及五层协议的体系结构OSI分层（7层）：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层。TCP/IP分层（4层）：网络接口层、网际层、运输层、应用层。五层协议（5层）：物理层、数据链路层、网络层、运输层、应用层。每一层的协议：物理层：RJ45、CLOCK、IEEE802.3 （中继器，集线器，网关）数据链

2021-09-26 18:21:02 361

原创 2021-09-19

计算机网络知识学习之HttpHttp协议http协议是客户端和服务器端两者通信共同遵循的一些规则。主要内容是定义了客户端如何向服务器请求资源，服务器如何响应客户端请求。web的界面是根据我们输入的URL（网址、地址），浏览器从服务器端获取对应的文件资源等信息，然后显示在浏览器上面。像这种通过发送请求获取服务器资源的web浏览器等，都可以称之为客户端（client）。web使用http（超文本传输协议）协议作为规范，来完成从客户端到服务端等一系列的运作流程，而协议指的就是规则的约定，可以说，web是建立

2021-09-19 19:42:22 163

空空如也

空空如也