MATLAB | 这些花里胡哨的热图怎么画

news2024/9/28 7:19:18

好早之前写过一个绘制相关系数矩阵的代码,但是会自动求相关系数,而且画出来的热图只能是方形,这里写一款允许nan值出现,任意形状的热图绘制代码,绘制效果如下:

如遇到bug请后台提出,并去gitee下载更新版本


教程部分

1 基础绘制

假设有个随机数矩阵,绘图:

Data=rand(15,15);
SHM=SHeatmap(Data,'Format','sq');
SHM=SHM.draw();

假设存在负数:

Data=rand(15,15)-.5;
SHM=SHeatmap(Data,'Format','sq');
SHM=SHM.draw();

假设存在nan:

Data=rand(12,12)-.5;
Data([4,5,13])=nan;
SHM=SHeatmap(Data,'Format','sq');
SHM=SHM.draw();

假设非方阵:

Data=rand(25,30);
SHM=SHeatmap(Data,'Format','sq');
SHM=SHM.draw();

颜色怎么换,在后面会讲到。

2 显示文字

使用setText方法显示文字:

Data=rand(12,12)-.5;
Data([4,5,13])=nan;

SHM=SHeatmap(Data,'Format','sq');
SHM=SHM.draw();

SHM.setText();

如果要修饰或显示文字请在修改颜色后进行。

3 修改形状

形状有以下几个可选项:

  • sq : 方形(默认)
  • pie : 饼图
  • circ : 圆形
  • oval : 椭圆形
  • hex : 六边形
  • asq : 自带调整大小的方形
  • acirc : 自带调整大小的圆形
figure() 
Data=rand(12,12)-.5;
SHM=SHeatmap(Data,'Format','oval');
SHM=SHM.draw(); 

figure() 
Data=rand(12,12)-.5;
SHM=SHeatmap(Data,'Format','pie');
SHM=SHM.draw(); 

展示一下全部类型:

sq

pie

circ

oval

hex

asq

acirc

4 颜色范围

新版本使用clim老版本使用caxis调整映射范围:

Data=rand(12,12)-.5;
Data([4,5,13])=nan;

SHM=SHeatmap(Data,'Format','sq');
SHM=SHM.draw();

clim([-.8,.8])
SHM.setText();

调整前:

调整后:

5 colormap

matlab自带的colormap都能用:

Data=rand(14,14);
SHM=SHeatmap(Data,'Format','sq');
SHM.draw();

colormap(bone)

可以联合我写的slanCM工具函数:
https://slandarer.blog.csdn.net/article/details/127719784

举点例子:

colormap(flipud(slanCM(20)))

colormap(flipud(slanCM(21)))

colormap(slanCM(61))

colormap(slanCM(177))

再比如:

Data=rand(12,12)-.5;
Data([4,5,13])=nan;

SHM=SHeatmap(Data,'Format','sq');
SHM=SHM.draw();

clim([-.7,.7])
colormap(slanCM(141))
SHM.setText();

clim([-.7,.7])
colormap(slanCM(136))

clim([-.7,.7])
colormap(slanCM(134))

clim([-.8,.8])
colormap(slanCM(110))

clim([-1,1])
colormap(slanCM(97))

6 调整colormap位置

假设编写如下代码:

Data=rand(3,12);
SHM=SHeatmap(Data,'Format','sq');
SHM=SHM.draw();


改成这样:

Data=rand(3,12);
SHM=SHeatmap(Data,'Format','sq');
SHM=SHM.draw();

CB=colorbar;
CB.Location='southoutside';

7 修改标签

改编x轴y轴标签就还是设置XTickLabel
YTickLabel:

Data=rand(10,10);
SHM=SHeatmap(Data,'Format','sq');
SHM=SHM.draw(); 

ax=gca;
ax.XTickLabel={'X-1','X-2','X-3','X-4','X-5','X-6','X-7','X-8','X-9','X-10'};
ax.YTickLabel={'Y-1','Y-2','Y-3','Y-4','Y-5','Y-6','Y-7','Y-8','Y-9','Y-10'};
ax.FontSize=14;

8 整体修饰

使用:

  • setBox :修饰边框
  • setPatch :修饰图形
  • setText :修饰文本

可对各个部分进行整体修改。

修改图形边缘及框颜色:

Data=rand(10,10);
Data([4,5,13])=nan;

SHM=SHeatmap(Data,'Format','pie');
SHM=SHM.draw(); 

SHM.setBox('Color',[0,0,.8])
SHM.setPatch('EdgeColor',[.8,0,0])

修改全部文本颜色:

Data=rand(10,10);
Data([4,5,13])=nan;

SHM=SHeatmap(Data,'Format','sq');
SHM=SHM.draw(); 

SHM.setText('Color',[0,0,.8],'FontSize',14)

9 局部修改

使用:

  • setTextMN
  • setPatchMN

设置第m行n列对象的属性:

举个例子,把数值大于0.9部分文字变为星号,并用红色框框起来:

Data=rand(9,9);
Data([4,5,13])=nan;

SHM=SHeatmap(Data,'Format','sq');
SHM=SHM.draw();

SHM.setText(); 

for i=1:size(Data,1)
    for j=1:size(Data,2)
        if Data(i,j)>.9
            SHM.setTextMN(i,j,'String','**','FontSize',20)
            SHM.setPatchMN(i,j,'EdgeColor',[1,0,0],'LineWidth',2)
        end
    end
end

局部设置可设置nan部分颜色:

SHM.setPatchMN(4,1,'FaceColor',[.8,.6,.6])


工具函数完整代码

classdef SHeatmap
% =========================================================================
% Format
% -------------------------------------------------------------------------
% sq    : 方形(默认)
% pie   : 饼图
% circ  : 圆形
% oval  : 椭圆形
% hex   : 六边形
% asq   : 自带调整大小的方形
% acirc : 自带调整大小的圆形
% =========================================================================
% @author : slandarer
% gzh  : slandarer随笔 
% -------------------------------------------------------------------------
% Zhaoxu Liu / slandarer (2023). special heatmap 
% (https://www.mathworks.com/matlabcentral/fileexchange/125520-special-heatmap), 
% MATLAB Central File Exchange. 检索来源 2023/3/1.
% -------------------------------------------------------------------------

    properties
        ax,arginList={'Format'}
        Format='sq'  % sq    : 方形(默认)
                     % pie   : 饼图
                     % circ  : 圆形
                     % oval  : 椭圆形
                     % hex   : 六边形
                     % asq   : 自带调整大小的方形
                     % acirc : 自带调整大小的圆形
        Data
        dfColor1=[0.9686    0.9882    0.9412;    0.9454    0.9791    0.9199;    0.9221    0.9700    0.8987;    0.8988    0.9609    0.8774;
                  0.8759    0.9519    0.8560;    0.8557    0.9438    0.8338;    0.8354    0.9357    0.8115;    0.8152    0.9276    0.7892;
                  0.7909    0.9180    0.7685;    0.7545    0.9039    0.7523;    0.7180    0.8897    0.7361;    0.6816    0.8755    0.7199;
                  0.6417    0.8602    0.7155;    0.5962    0.8430    0.7307;    0.5507    0.8258    0.7459;    0.5051    0.8086    0.7610;
                  0.4596    0.7873    0.7762;    0.4140    0.7620    0.7914;    0.3685    0.7367    0.8066;    0.3230    0.7114    0.8218;
                  0.2837    0.6773    0.8142;    0.2483    0.6378    0.7929;    0.2129    0.5984    0.7717;    0.1775    0.5589    0.7504;
                  0.1421    0.5217    0.7314;    0.1066    0.4853    0.7132;    0.0712    0.4488    0.6950;    0.0358    0.4124    0.6768;
                  0.0314    0.3724    0.6364;    0.0314    0.3319    0.5929;    0.0314    0.2915    0.5494;    0.0314    0.2510    0.5059]
        dfColor2=[0.6196    0.0039    0.2588;    0.6892    0.0811    0.2753;    0.7588    0.1583    0.2917;    0.8283    0.2354    0.3082;
                  0.8706    0.2966    0.2961;    0.9098    0.3561    0.2810;    0.9490    0.4156    0.2658;    0.9660    0.4932    0.2931;
                  0.9774    0.5755    0.3311;    0.9887    0.6577    0.3690;    0.9930    0.7266    0.4176;    0.9943    0.7899    0.4707;
                  0.9956    0.8531    0.5238;    0.9968    0.9020    0.5846;    0.9981    0.9412    0.6503;    0.9994    0.9804    0.7161;
                  0.9842    0.9937    0.7244;    0.9526    0.9810    0.6750;    0.9209    0.9684    0.6257;    0.8721    0.9486    0.6022;
                  0.7975    0.9183    0.6173;    0.7228    0.8879    0.6325;    0.6444    0.8564    0.6435;    0.5571    0.8223    0.6448;
                  0.4698    0.7881    0.6460;    0.3868    0.7461    0.6531;    0.3211    0.6727    0.6835;    0.2553    0.5994    0.7139;
                  0.2016    0.5261    0.7378;    0.2573    0.4540    0.7036;    0.3130    0.3819    0.6694;    0.3686    0.3098    0.6353]
        Colormap;maxV
        patchHdl;boxHdl;pieHdl;textHdl
    end
    methods
        function obj=SHeatmap(Data,varargin)
            obj.Data=Data;
            obj.maxV=max(max(abs(obj.Data)));
            % 获取其他数据
            disp(char([64 97 117 116 104 111 114 32 58 32,...
                 115 108 97 110 100 97 114 101 114]))
            for i=1:2:(length(varargin)-1)
                tid=ismember(obj.arginList,varargin{i});
                if any(tid)
                    obj.(obj.arginList{tid})=varargin{i+1};
                end
            end
            % 设置配色
            if any(any(obj.Data<0))
                obj.Colormap=obj.dfColor2;
                % tX=linspace(0,1,size(obj.Colormap,1));
                % tXi=linspace(0,1,256);
                % tR=interp1(tX,obj.Colormap(:,1),tXi);
                % tG=interp1(tX,obj.Colormap(:,2),tXi);
                % tB=interp1(tX,obj.Colormap(:,3),tXi);
                % obj.Colormap=[tR(:),tG(:),tB(:)];
            else
                obj.Colormap=obj.dfColor1(end:-1:1,:);
            end
        end
        function obj=draw(obj)
            obj.ax=gca;hold on;box on
            obj.ax.FontName='Times New Roman';
            obj.ax.FontSize=12;
            obj.ax.LineWidth=.8;
            obj.ax.XLim=[.5,size(obj.Data,2)+.5];
            obj.ax.YLim=[.5,size(obj.Data,1)+.5];
            obj.ax.YDir='reverse';
            obj.ax.TickDir='out';
            obj.ax.TickLength=[0.002,0.002];
            obj.ax.DataAspectRatio=[1,1,1];
            obj.ax.YTick=1:size(obj.Data,1);
            obj.ax.XTick=1:size(obj.Data,2);
            colormap(obj.Colormap)
            colorbar

            if any(any(obj.Data<0))
                try caxis(obj.maxV.*[-1,1]),catch,end
                try clim(obj.maxV.*[-1,1]),catch,end
            else
                try caxis(obj.maxV.*[0,1]),catch,end
                try clim(obj.maxV.*[0,1]),catch,end
            end

            % 调整初始界面大小
            fig=obj.ax.Parent;
            fig.Color=[1,1,1];
            if max(fig.Position(3:4))<600
                fig.Position(3:4)=[1.6,1.8].*fig.Position(3:4);
                fig.Position(1:2)=fig.Position(1:2)./4;
            end

            bX1=repmat([.5,size(obj.Data,2)+.5,nan],[size(obj.Data,1)+1,1])';
            bY1=repmat((.5:1:(size(obj.Data,1)+.5))',[1,3])';
            bX2=repmat((.5:1:(size(obj.Data,2)+.5))',[1,3])';
            bY2=repmat([.5,size(obj.Data,1)+.5,nan],[size(obj.Data,2)+1,1])';
            obj.boxHdl=plot([bX1(:);bX2(:)],[bY1(:);bY2(:)],'LineWidth',.8,'Color',[1,1,1].*.85);
            if isequal(obj.Format,'sq')
                set(obj.boxHdl,'Color',[1,1,1,0])
            end

            
            baseT=linspace(0,2*pi,200);
            hexT=linspace(0,2*pi,7);
            thetaMat=[1,-1;1,1].*sqrt(2)./2;

            for row=1:size(obj.Data,1)
                for col=1:size(obj.Data,2)    
                    if isnan(obj.Data(row,col))
                        obj.patchHdl(row,col)=fill([-.5,.5,.5,-.5].*.98+col,[-.5,-.5,.5,.5].*.98+row,[.8,.8,.8],'EdgeColor','none');
                        obj.pieHdl(row,col)=fill([0,0,0,0],[0,0,0,0],[0,0,0]);
                        obj.textHdl(row,col)=text(col,row,'×','FontName','Times New Roman','HorizontalAlignment','center','FontSize',20);
                    else
                        tRatio=abs(obj.Data(row,col))./obj.maxV;
                        switch obj.Format
                            case 'sq'
                                obj.patchHdl(row,col)=fill([-.5,.5,.5,-.5].*.98+col,[-.5,-.5,.5,.5].*.98+row,...
                                    obj.Data(row,col),'EdgeColor','none');
                            case 'asq'
                                obj.patchHdl(row,col)=fill([-.5,.5,.5,-.5].*.98.*tRatio+col,[-.5,-.5,.5,.5].*.98.*tRatio+row,...
                                    obj.Data(row,col),'EdgeColor','none');
                            case 'pie'
                                baseCircX=cos(baseT).*.92.*.5;
                                baseCircY=sin(baseT).*.92.*.5;
                                obj.pieHdl(row,col)=fill(baseCircX+col,baseCircY+row,...
                                    [1,1,1],'EdgeColor',[1,1,1].*.3,'LineWidth',.8);
                                baseTheta=linspace(pi/2,pi/2+obj.Data(row,col)./obj.maxV.*2.*pi,200);
                                basePieX=[0,cos(baseTheta).*.92.*.5];
                                basePieY=[0,sin(baseTheta).*.92.*.5];
                                obj.patchHdl(row,col)=fill(basePieX+col,-basePieY+row,...
                                    obj.Data(row,col),'EdgeColor',[1,1,1].*.3,'lineWidth',.8);
                            case 'circ'
                                baseCircX=cos(baseT).*.92.*.5;
                                baseCircY=sin(baseT).*.92.*.5;
                                obj.patchHdl(row,col)=fill(baseCircX+col,baseCircY+row,...
                                    obj.Data(row,col),'EdgeColor','none','lineWidth',.8);
                            case 'acirc'
                                baseCircX=cos(baseT).*.92.*.5;
                                baseCircY=sin(baseT).*.92.*.5;
                                obj.patchHdl(row,col)=fill(baseCircX.*tRatio+col,baseCircY.*tRatio+row,...
                                    obj.Data(row,col),'EdgeColor','none','lineWidth',.8);
                            case 'oval'
                                tValue=obj.Data(row,col)./obj.maxV;
                                baseA=1+(tValue<=0).*tValue;
                                baseB=1-(tValue>=0).*tValue;
                                baseOvalX=cos(baseT).*.98.*.5.*baseA;
                                baseOvalY=sin(baseT).*.98.*.5.*baseB;
                                baseOvalXY=thetaMat*[baseOvalX;baseOvalY];
                                obj.patchHdl(row,col)=fill(baseOvalXY(1,:)+col,-baseOvalXY(2,:)+row,...
                                    obj.Data(row,col),'EdgeColor',[1,1,1].*.3,'lineWidth',.8);
                            case 'hex'
                                obj.patchHdl(row,col)=fill(cos(hexT).*.5.*.98.*tRatio+col,sin(hexT).*.5.*.98.*tRatio+row,...
                                    obj.Data(row,col),'EdgeColor',[1,1,1].*.3,'lineWidth',.8);
                        end
                        obj.textHdl(row,col)=text(col,row,sprintf('%.2f',obj.Data(row,col)),'FontName','Times New Roman','HorizontalAlignment','center','Visible','off');
                    end
                end
            end
        end
        % 修饰文本
        function setText(obj,varargin)
            graymap=mean(get(obj.ax,'Colormap'),2);
            climit=get(obj.ax,'CLim');
            for row=1:size(obj.Data,1)
                for col=1:size(obj.Data,2)     
                    set(obj.textHdl(row,col),'Visible','on','Color',...
                        [1,1,1].*(interp1(linspace(climit(1),climit(2),size(graymap,1)),graymap,obj.Data(row,col))<.5),varargin{:})
                end
            end
        end
        function setTextMN(obj,m,n,varargin)
            set(obj.textHdl(m,n),varargin{:})
        end
        % 设置图形样式
        function setPatch(obj,varargin)
            for row=1:size(obj.Data,1)
                for col=1:size(obj.Data,2)   
                    if ~isnan(obj.Data(row,col))
                    set(obj.patchHdl(row,col),varargin{:})
                    if isequal(obj.Format,'pie')
                    set(obj.pieHdl(row,col),varargin{:})  
                    end
                    end
                end
            end
        end
        function setPatchMN(obj,m,n,varargin)
            set(obj.patchHdl(m,n),varargin{:})
            if isequal(obj.Format,'pie')
                set(obj.pieHdl(m,n),varargin{:})
            end
        end
        % 设置框样式
        function setBox(obj,varargin)
            set(obj.boxHdl,varargin{:})
        end
    end
% =========================================================================
% @author : slandarer
% gzh  : slandarer随笔 
% -------------------------------------------------------------------------
% Zhaoxu Liu / slandarer (2023). special heatmap 
% (https://www.mathworks.com/matlabcentral/fileexchange/125520-special-heatmap), 
% MATLAB Central File Exchange. 检索来源 2023/3/1.
% -------------------------------------------------------------------------
end

编程不易,希望大家该点赞的点赞,该在看的在看!!

未经允许本代码请勿作商业用途,引用的话可以引用我file exchange上的链接,可使用如下格式:

Zhaoxu Liu / slandarer (2023). special heatmap (https://www.mathworks.com/matlabcentral/fileexchange/125520-special-heatmap), MATLAB Central File Exchange. 检索来源 2023/3/1.

若转载请保留以上file exchange链接及本文链接!!!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/381789.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Spring Boot+Vue前后端分离项目练习02之网盘项目利用token进行登陆验证

1.添加依赖 首先需要添加jwt对应的依赖。 <dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>0.9.1</version></dependency>2.添加配置 JWT由三部分构成&#xff0c;分别是 header, pa…

详解数据结构中的顺序表的手动实现,顺序表功能接口【数据结构】

文章目录线性表顺序表接口实现尾插尾删头插头删指定位置插入指定位置删除练习线性表 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列。 线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列…

Freemarker动态模板渲染flyingsaucer将html转PDF(多页固定头尾)

目录一、序言二、CSS样式控制打印模板三、代码示例1、pom.xml2、application.yml3、PdfGenerationController4、Freemarker模板内容四、展示效果一、序言 一般正常来说&#xff0c;生成PDF的操作都是通过将HTML转成PDF&#xff0c;HTML动态渲染可以借助模板引擎&#xff0c;如…

从外行到外包,从手工测试到知名互联大厂测开,我经历了什么...

本人本科就读于某普通一本院校&#xff08;非985&#xff0c;211&#xff09;&#xff0c;经管类专业&#xff0c;从大四实习到15年毕业后前两年一直在从事自己专业相关的工作。17年时决定想要转业从事计算机相关领域工作&#xff0c;在17年9月的一个机遇大跨度转行到测试行业&…

vue子组件监听父组件数据变化并作出改变(亲测有效)

vue子组件监听父组件数据变化并作出改变&#xff08;亲测有效&#xff09; 1. 问题 1.1 封装组件时经常会遇到子组件需要根据父组件数据变化并执行对应的操作逻辑 1.2 监听方法中加了deep、immediate 等参数监听数组/对象还是没有生效 1.3 类型table组件需要根据父组件数据…

Java多线程学习——线程的创建、Thread类以及多线程状态

文章目录学习目标一、认识线程1、线程是什么&#xff1f;2、为什么要有线程3、进程和线程的区别二、Thread类以及常见方法1.创建线程的几种方式2、Thread类属性及方法2.1、Thread的常见构造方法2.2、Thread的常见属性3、线程的中断-interrupt()中断一个线程&#xff1a;4、等待…

前端面试题 —— 浏览器原理(一)

目录 一、进程与线程的概念 二、如何实现浏览器内多个标签页之间的通信? 三、浏览器资源缓存的位置有哪些&#xff1f; 四、对浏览器内核的理解 五、常见的浏览器内核比较 六、浏览器的主要组成部分 七、渲染过程中遇到 JS 文件如何处理&#xff1f; 八、什么情况会阻塞…

【C语言】动态内存管理

我们之前开辟的空间&#xff0c;大小固定&#xff0c;且在申明数组的时候&#xff0c;必须指定数组的长度。但是有时候我们需要的空间大小在程序运行的时候才知道&#xff0c;这就得动态内存开辟出马了。 目录 1.malloc和free 2.calloc 3.realloc 4.常见动态内存错误 5.经…

TCP 握手过程 三次 四次

蛋老师视频 SYN 同步 ACK 确认 FIN 结束 核心机制是确定哪些请求或响应需要丢弃 SYN、ACK、FIN 通过 1/0 设置开启/关闭 开启SYN后&#xff0c;报文中会随机生成 Sequence序号 用于校验 &#xff08;应用可能发起多个会话&#xff0c;可以区分&#xff09; 服务器的同步序…

2023版D盾防火墙v2.1.7.2,主动防御保护,以内外保护的方式 防止网站和服务器给入侵。限制了常见的入侵方法,让服务器更安全

v2.1.7.2 (20230107) 2023-1-7 1.修正PHP一处文件检测的bug。 2.修正某些情况下无法文件加白问题。 v2.1.7.2 2022-10-13 1.针对aspx的样本加入了新的识别。 2.针对上传 doc格式文件提示“上传格式不符” 的修正。 3.工具“HTTPS安全”,把 TLS 1.1 和 TLS 1.0 设置为默认不选中…

杰理AD16N简介

一、概述&#xff1a; AD16N是杰理新出的一个MP3解码芯片&#xff0c;是高集成度的 32 位通用音频 SOC&#xff0c; 集成 40KByte SRAM&#xff0c; 时钟源可选内部 RC 或外部12MHz 晶振&#xff0c; 最高主频可达 160MHz&#xff1b; 主要是替代AC109N系列和AC608N、AC104N系列…

Python爬虫书写时遇到的问题汇总

文章目录python的xpath插件需要的库下载出现问题懒加载python 爬取图片,网址都正确但是下不下来的原因:爬取下来的文字包含Windows不能识别的特殊字符selenium的find_element_by_id()出现的问题爬虫信息写入mysql时的1045号错误python的xpath插件需要的库下载出现问题 ERROR: C…

MySQL特殊语法insert into ... on duplicate key update ...

一、前言 在日常开发中&#xff0c;经常会遇到这样的需求&#xff1a;查看某条记录是否存在&#xff0c;不存在的话创建一条新记录&#xff0c;存在的话更新某些字段。 比如下列伪代码&#xff1a; $row mysql_query($result);if($row){mysql_execute(update ...);}else{my…

MongoDB复习

目录 1.docker安装 2.mondo概念解析 3.数据库操作 4.基本数据类型 5. 适合使用场景 6.对集合操作 7.常用操作 1.docker安装 docker pull mongo:latest docker run -d --restartalways -p 27017:27017 --name mymongo -v /data/db:/data/db -d mongo docker exec -it m…

【SpringBoot高级篇】SpringBoot集成Sharding-JDBC分库分表

【SpringBoot高级篇】SpringBoot集成Sharding-JDBC分库分表Apache ShardingSphere分库分表分库分表的方式垂直切分垂直分表垂直分库水平切分水平分库水平分表分库分表带来的问题分库分表中间件Sharding-JDBCsharding-jdbc实现水平分表sharding-jdbc实现水平分库sharding-jdbc实…

数据结构-考研难点代码突破(查找算法 - 散列表(哈希表)C++实现除留余数法拉链法哈希)

文章目录1. 哈希表与解决哈希冲突的方法2. C实现除留余数法拉链法哈希1. 哈希表与解决哈希冲突的方法 散列表(Hash Table)&#xff0c;又称哈希表。是一种数据结构。 特点&#xff1a;数据元素的关键字与其存储地址直接相关。 关键字通过散列函数&#xff08;哈希函数&#…

Vue3.0文档整理:2、创建单页面应用程序

2.1&#xff1a;创建步骤 2.1.1&#xff1a;vue-cli 安装并执行create-vue:npm init vuelatest 它是Vue官方的项目脚手架工具 选择项目功能 除了第一项的项目名字外&#xff0c;其他可以暂时默认回撤或者选择No 切换到项目目录:cd <your-project-name> 安装项目依赖&…

山寨APP频出?安全工程师和黑灰产在较量

在山寨这个领域&#xff0c;没有人比黑灰产更懂模仿。 据安全从业者介绍&#xff0c;一般而言&#xff0c;对于成熟的山寨开发者来说&#xff0c;几天时间内就可以做出一套前端框架。服务器、源代码、域名、服务商这些内容的创建&#xff0c;通过网上租赁的方式就可以解决。 比…

【面试题】2023前端vue面试题及答案

Vue3.0 为什么要用 proxy&#xff1f;在 Vue2 中&#xff0c; 0bject.defineProperty 会改变原始数据&#xff0c;而 Proxy 是创建对象的虚拟表示&#xff0c;并提供 set 、get 和 deleteProperty 等处理器&#xff0c;这些处理器可在访问或修改原始对象上的属性时进行拦截&…

Window问题详解(下)

建议先看一下 Window问题详解(上) 思路② 既然会超时,那该怎么办呢? 显然需要一个更快速的方法来解决这个问题! 我们先来观察一下图片: 我们发现,每一次选中的数都会增加下一个。 !!!!! 因此,我们可以根据此特性优化时间!! 第一次先求出前 k − 1 k-1 k−