qq_39637327的博客

原创 umi项目配置webpack优化打包体积

分析利用umi自带的包模块结构分析工具analyze查看每个模块的大小npm run analyze 或 yarn analyze配置在.umirc.js文件中，配置chainWebpackchainWebpack(config) { config.merge({ optimization: { minimize: true, splitChunks: { chunks: 'async', // initial

原创 React引入腾讯地图

React中使用腾讯地图

原创 JS——扁平数据结构转Tree

扁平数据结构转Tree

原创 JS——查询对象数组某属性值是否存在，没有则添加并排序

Array.prototype.some()；localeCompare()

原创 react hooks中使用dva

index.jsimport React from 'react';import { connect } from 'dva';import { Button } from 'antd';const usePage = (props) => {const {home} = props; const btnClick = () => { const {dispatch} = props; dispatch({ type:"home/getList",

原创 JS-对象数组去重

下面为需要过滤的数据，删除id重复的数据var arr = [ { id: 0, name: "A" }, { id: 1, name: "B" }, { id: 0, name: "C" }, { id: 1, name: "D" },];使用数组的reduce()方法let obj = {};arr = arr.reduce((preVal, curVal) => { obj[curVal.id] ? null : (obj[curVal.id] = preVal.

原创 JS——对象与对象数组之间相互转换

// 对象{cat:'Tom', mouse:'Jack'}// 对象数组[{ animal:'cat', name:'Tom'},{ animal:'mouse', name:'Jack'}]对象转换为对象数组方法一：const obj = {cat:'Tom', mouse:'Jack'}const arr = Object.entries(obj)let result = arr.map((item)=>{ return { animal: item[0]

原创 JS——根据对象数组的某个属性值找到指定的对象

var datas = [ { "name": "Apple", "id": "1" }, { "name": "Banana", "id": "2" } ]var data= datas.filter((item)=>item.id== "1")console.log(data); // [{name: "Apple", id: "1"}]filter() 方法将匹配元素集合缩减为匹配指定选择器的元素.该方法不

原创 XSS、CSRF攻击防御

XSS, 即为（Cross Site Scripting） , 中文名为跨站脚本, 是发生在目标用户的浏览器层面上的， 当渲染 DOM 树的过程成发生了不在预期内执行的 JS 代码时， 就发生了 XSS 攻击。大多数 XSS 攻击的主要方式是嵌入一段远程或者第三方域上的 JS 代码。 实际上是在目标网站的作用域下执行了这段 JS 代码。CSRF（Cross Site Request Forgery， 跨站请求伪造） ， 字面理解意思就是在别的站点伪造了一个请求。 专业术语来说就是在受害者访问一个网站时，

原创 长文本处理

默认：字符太长溢出了容器字符超出部分换行字符超出位置使用连字符单行文本超出省略.ellipsis{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}多行文本超出省略.line-clamp{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-

原创 水平垂直居中

单行的文本、inline 或者 inline-block 元素；固定宽高的块级盒子；不固定宽高的块级盒子；单行的文本、inline 或者 inline-block 元素；水平居中.parent { text-align: center;}垂直居中方法一：通过设置上下内间距一致达到垂直居中的效果：.single-line { padding-top: 10px; padding-bottom: 10px;}方法二：通过设置 height 和 line-he.

原创 React Hooks——useEffect

useEffect Hook 可以看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。实现componentDidMount 的功能useEffect的第二个参数为一个空数组，初始化调用一次之后不再执行，相当于componentDidMount。function Demo () { useEffect(() => { console.log('hello world') }, [])

原创 dva基本工作流程

原创 React生命周期

React生命周期分为三大周期，11个阶段，生命周期方法调用顺序分别如下。（1）在创建期的五大阶段，调用方法的顺序如下。getDetaultProps：定义默认属性数据。getInitialState：初始化默认状态数据。component WillMount：组件即将被构建。render：渲染组件。componentDidMount：组件构建完成（2）在存在期的五大阶段，调用方法的顺序如下。componentWillReceiveProps：组件即将接收新的属性数据。shouldComp

原创 JavaScript深入之call、apply和bind的模拟实现

call模拟的步骤可以分为：将函数设为对象的属性执行该函数删除该函数Function.prototype.call2 = function (context) { var context = context || window; // 首先要获取调用call的函数，用this可以获取 context.fn = this; // 因为arguments是类数组对象，所以可以用for循环 var args = []; for(var i = 1, len

原创 JavaScript深入之从原型到原型链

转载 JavaScript深入之闭包题解

作用域指的是一个变量和函数的作用范围，JS中函数内声明的所有变量在函数体内始终是可见的，在ES6前有全局作用域和局部作用域，但是没有块级作用域（catch只在其内部生效），局部变量的优先级高于全局变量。...

原创 闭包和作用域链

闭包闭包的定义：闭包是指有权访问另外一个函数作用域中的变量的函数。是一个函数能访问另外一个函数作用域中的变量对于闭包有下面三个特性：闭包可以访问当前函数以外的变量function getOuter(){ var date = '815'; function getDate(str){ console.log(str + date); //访问外部的date } return getDate('今天是：'); //"今天是：815"}getOuter();

原创 vue脚手架（vue-cli）构建项目

安装工具安装webpack：使用npm全局安装webpack,打开命令行工具，输入 npm install webpack -g，安装完成之后，输入 webpack -v 即可查看当前安装版本，出现版本号说明安装成功全局安装vue-cli：在命令行输入 npm install --global vue-cli，安装完成之后，输入 vue -V查看当前版本号使用Vue-cli来构建...

原创 数据结构——内部排序算法

实现直接插入排序、希尔排序、冒泡排序、快速排序、简单选择排序五种排序算法，并输出排序过程。假设待排序关键字序列为：{49，38，65，97，76，13，27，49}main.cpp#include <malloc.h>#include <stdio.h> #define N 8#include "Sorting.h"/* run this program u...

原创 数据结构——邻接表及图的遍历

图的邻接表的存储方法图的深度优先遍历和广度优先遍历1.由给定的图的邻接矩阵建立图的邻接表并显示出来；2.给出从结点a开始的图的深度优先遍历序列；3.给出从结点a开始的图的广度优先遍历序列。图的顶点信息和邻接矩阵如下所示：、main.cpp#define N 5 //顶点个数 #include "AdjGraph.h"int main(int argc, char** a...

原创 数据结构——二叉树的遍历

二叉树的先序遍历、中序遍历和后序遍历的递归算法，二叉树的非递归算法。1、括号表示法创建二叉树2、实现二叉树的递归遍历算法和非递归遍历算法(非递归算法选做)，依次输出二叉树的先序、中序和后序遍历序列3、二叉树的遍历遍历二叉树，输出结点值大于C的结点，而小于等于C的结点用*替代4、遍历二叉树，输出结点值小于D的结点，而大于等于D的结点用*替代main.cpp#include &lt...

原创 数据结构——稀疏矩阵的转置

熟悉稀疏矩阵的三元组顺序存储方式。稀疏矩阵如图所示，输出矩阵和三元组表用转置算法；求转置矩阵并输出转置后的矩阵和三元组表#include <malloc.h>#include <stdio.h> int main(int argc, char** argv) { ElemType a[8][8]={{0,0,-3,0,0,0,0,0}, {...

原创 数据结构——文本串加密

一个文本串可用事先给定的字母映射表进行加密。例如，假设字母映射表为：a b c d e f g h i j k l m n o p q r s t u v w x y zn g z q t c o b m u h e l k p d a w x f y i v r s j则字符串“encrypt”被加密为“tkzwsdf”要求：熟悉串的顺序存储结构，设计程序将输入的文本串进行加密后输出，然...

原创 数据结构——队列的应用

编制一个病人看病模拟程序。在病人排队过程中，主要重复两件事：1、病人到达诊室，将病历本交给护士，排到等待队列中候诊。2、护士从等待队列中取出下一位病人的病历，该病人进入诊室就诊。程序采用菜单方式，其选项及功能说明如下：排队——输入排队病人的病历号，加入到病人排队队列中。就诊——病人排队队列中最前面的病人就诊，并将其从队列中删除。查看排队——从队首到队尾列出所有的排队病人的病历号。下...

原创 数据结构——栈的应用

#include <malloc.h>#include <stdio.h> typedef char ElemType;//----- 栈的顺序存储表示 -----#define MaxSize 50typedef struct { ElemType data[MaxSize]; int top; //栈顶指针}SqStack;void ...

原创 数据结构——链表的应用

假设：有两个整数集合A和B分别用两个线性表LA和LB表示，即：线性表中的数据元素即为集合中的成员。（A/B为纯集合）要求：一个新的集合A=AUB，A仍然为纯集合，线性表采用链式存储方式。#include <malloc.h>#include <stdio.h> typedef int ElemType;typedef struct LNode { E...

原创 数据结构——顺序表的实现

运行效果：#include <malloc.h>#include <stdio.h> #define MaxSize 50typedef int ElemType;//typedef stu ElemType;#define LIST_INIT_SIZE 80 // 线性表存储空间的初始分配量#define LISTINCREMENT 10 ...