当前位置: 首页 > news >正文

前端须知名词解释

目录

一、多维转一维

二、一维转多维

一维转多维——使用场景:分页

三、判断当前元素是否为数组

四、判断当前元素是否是空对象

五、数字分割符:提高数字可读性

六、模糊盒子(怪异盒子)与标准盒模型

七、css的filter属性

图片模糊

这个filter滤镜可以用来做全局页面变灰,

转存失败重新上传取消​编辑​编辑

八、找到数组中的最大/最小值

 

九、虚拟dom

十、vue的template模版的渲染过程

十一、灰度发布(金丝雀发布、 渐进式发布)


一、多维转一维

一、使用forEach 结合 递归处理
function flatData(list,children){let resList = []list.forEach(ele => {if(ele[children]&&ele[children].length>0){resList=resList.concat(flatData(ele[children]))  }else {resList.push(ele)}});return resList}二、[1,[2,[3]]].join().split(',')
三、[1,[2,[3]]].flat()

二、一维转多维

一维转多维——使用场景:分页

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; var row = 3; var multiArr = []; for (var i = 0; i < arr.length; i += row) { multiArr.push(arr.slice(i, i + row)); } console.log(multiArr);

三、判断当前元素是否为数组

[1,2,3] instanceof ArrayArray.isArray([1,2,3])[1,2].constructor ===Array

四、判断当前元素是否是空对象

Object.key/entries/value({}).length>0console.log(JSON.stringify({})=='{}')

五、数字分割符:提高数字可读性

属于ES新增,老项目可能不支持,若要提高数字的可读性,你可以使用下划线作为分隔符来更好地区分数字的各个部分。这样做可以让数字更易读,让人一目了然,而且还能在小白面前秀一把。

var num == 1_110_000;//等同于1110000

六、模糊盒子(怪异盒子)与标准盒模型

模糊盒子的宽包含了padding、content、border,当设置padding和border时,content会被压缩,因为宽包含了padding/border。属性box-sizing:border-box;

标准盒模型的宽只有一个content,所以当我们设置padding/border时,整个元素会扩大,content不会压缩。属性:box-sizing:content-box;

 

七、css的filter属性

图片模糊

给img标签设置属性

filter: blur(5px);

这个filter滤镜可以用来做全局页面变灰,

filter: grayscale(1);

还记得吗,当国家公祭日等重要节日,各大网站与软件网页置灰,就是用的这个

 

八、找到数组中的最大/最小值

 

 

九、虚拟dom

为什么要有虚拟dom呢,很多年前在没有vue和react的时候,修改数据后在渲染页面是通过大范围全局dom循环遍历查询要更新数据的dom,这就消耗了很多计算资源,多了很多没必要的性能消耗,那么虚拟dom是怎么回事呢,虚拟dom会把页面dom元素抽象化成一个嵌套对象(从dom根节点递归得来),当我们修改数据值,会在虚拟dom对象里查找,修改的是虚拟dom对象的属性,通过diff算法对比前后的虚拟dom后才会进行真实dom的渲染。

十、vue的template模版的渲染过程

首先将template里的内容转化为render函数,接下来就是挂载实例,把render函数从根节点开始递归形成虚拟dom,通过diff算法对比新旧虚拟dom更新真实dom

十一、灰度发布(金丝雀发布、 渐进式发布)

灰度发布就是发布非稳定版本供用户使用来进行测试的一种发布方式,我们常常看到游戏会抽取部分用户发放一些账号让大家提前体验新内容,也常常看到软件提醒要不要更新到最新的测试版本来体验新功能,用户想不想当小白鼠完全自愿,开发人员可以测试服务器的稳定性和新功能的流畅度来规避风险,再根据用户反馈做出进一步的调整,然后就有了稳定版发布,是双赢的一种策略。

 

相关文章:

前端须知名词解释

目录 一、多维转一维 二、一维转多维 一维转多维——使用场景&#xff1a;分页 三、判断当前元素是否为数组 四、判断当前元素是否是空对象 五、数字分割符&#xff1a;提高数字可读性 六、模糊盒子&#xff08;怪异盒子&#xff09;与标准盒模型 七、css的filter属性 …...

React性能优化之memo缓存函数

React是一个非常流行的前端框架&#xff0c;但是在处理大型应用程序时&#xff0c;性能可能会成为一个问题。为了解决这个问题&#xff0c;React提供了一个称为memo的功能&#xff0c;它可以缓存函数并避免不必要的重新渲染。 memo是React中的一个高阶组件&#xff08;HOC&…...

2023年高教社杯 国赛数学建模思路 - 案例:ID3-决策树分类算法

文章目录 0 赛题思路1 算法介绍2 FP树表示法3 构建FP树4 实现代码 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 算法介绍 FP-Tree算法全称是FrequentPattern Tree算法&#xff0c;就是频繁模…...

C# Emgu.CV 条码检测

效果 项目 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using Emgu.CV; using Emgu.CV.Util; using static Emgu.C…...

VueRouter的基本使用

路由的基本使用 文章目录 路由的基本使用01-VueRouterVueRouter的使用 &#xff08; 5 2&#xff09;综合代码 拓展&#xff1a;组件存放问题 什么是路由呢&#xff1f; 在生活中的路由&#xff1a;设备和IP的映射关系 在Vue中&#xff1a;路径 和 组件 的 映射 关系。 01-Vu…...

网工笔记:快速认识7类逻辑接口

逻辑接口是指能够实现数据交换功能但物理上不存在、需要通过配置建立的接口。逻辑接口需要承担业务传输。 下面是我整理了7款常见的逻辑接口。 接口类型 描述 Eth-Trunk接口 具有二层特性和三层特性的逻辑接口&#xff0c;把多个以太网接口在逻辑上等同于一个逻辑接口&…...

MySQL中的free链表,flush链表,LRU链表

一、free链表 1、概述 free链表是一个双向链表数据结构&#xff0c;这个free链表里&#xff0c;每个节点就是一个空闲的缓存页的描述数据块的地址&#xff0c;也就是说&#xff0c;只要你一个缓存页是空闲的&#xff0c;那么他的描述数据块就会被放入这个free链表中。 刚开始数…...

mac使用VsCode远程连接服务器总是自动断开并要求输入密码的解决办法

在mac中使用vscode远程连接服务器&#xff0c;时常会出现自动断开并要求重新输入服务器密码的问题&#xff0c;接下来让我们来解决它&#xff1a; 1、首先&#xff0c;在本地创建公钥&#xff1a; ssh-keygen 这条命令执行之后&#xff0c;出现提示直接回车即可&#xff1b;直…...

Python爬虫分布式架构 - Redis/RabbitMQ工作流程介绍

在大规模数据采集和处理任务中&#xff0c;使用分布式架构可以提高效率和可扩展性。本文将介绍Python爬虫分布式架构中常用的消息队列工具Redis和RabbitMQ的工作流程&#xff0c;帮助你理解分布式爬虫的原理和应用。 为什么需要分布式架构&#xff1f; 在数据采集任务中&#…...

【ES】笔记-集合介绍与API

集合是一种不允许值重复的顺序数据结构。 通过集合我们可以进行并集、交集、差集等数学运算&#xff0c; 还会更深入的理解如何使用 ECMAScript 2015(ES2015)原生的 Set 类。 构建数据集合 集合是由一组无序且唯一(即不能重复)的项组成的。该数据结构使用了与有限集合相同的数…...

Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】

&#x1f600;前言 本篇博文是关于Spring Boot(Vue3ElementPlusAxiosMyBatisPlusSpring Boot 前后端分离)【五】&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章…...

二、Tomcat 安装集

一、Tomcat—Docker 1. 拉取镜像 # 1、拉取镜像&#xff08;tomcat版本8&#xff0c;jre版本8&#xff09;。 docker pull tomcat:8-jre82. 启动容器 # 2、启动一个tomcat容器。 docker run -id --name tomcat -p 8080:8080 镜像ID # 3、宿主机里新建/root/tomcat目录&#x…...

CentOS 上通过 NFS 挂载远程服务器硬盘

NFS&#xff08;Network File System&#xff09;是一种用于在不同的计算机系统之间共享文件和目录的协议。它允许一个计算机系统将其文件系统的一部分或全部内容暴露给其他计算机系统&#xff0c;使其能够像访问本地文件一样访问这些内容。在这篇博客中&#xff0c;我们将介绍…...

微信小程序中的 广播监听事件

定义 WxNotificationCenter.js 文件&#xff1b; /*** author: Di (微信小程序开发工程师)* organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)* 垂直微信小程序开发交流社区* * github地址: https://github.com/icindy/WxNotificationCenter…...

Quickstart: MinIO for Linux

单节点部署教程 1.安装Minio服务端 //wget下载二进制文件 wget https://dl.min.io/server/minio/release/linux-amd64/minio //赋予权限 chmod x minio //将minio可执行文件移入usr/local/bin目录下&#xff0c;使得minio可以全局执行 sudo mv minio /usr/local/bin/ 2.启动Mi…...

Java中word转Pdf工具类

背景&#xff1a; 最近做的一个项目中&#xff0c;对于word转Pdf用的地方很多&#xff0c;特此记录 搭建总图&#xff1a; 代码部分&#xff1a; 1.需要的jar包&#xff1a; aspose-words-15.8.0-jdk16.jar 注&#xff1a;下载好这个jar包后&#xff0c;在项目的根目录新建一…...

【conda install】网络慢导致报错CondaHTTPError: HTTP 000 CONNECTION FAILED for url

⭐⭐问题&#xff1a; 部署安装环境经常会出现由于网络慢问题&#xff0c;导致conda安装不了库&#xff0c;报错如下&#xff1a; Solving environment: failedCondaHTTPError: HTTP 000 CONNECTION FAILED for url <https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/…...

2023-8-28 图中点的层次(树与图的广度优先遍历)

题目链接&#xff1a;图中点的层次 #include <iostream> #include <cstring> #include <algorithm>using namespace std;const int N 100010;int h[N], e[N], ne[N], idx; int n, m; int q[N], d[N];void add(int a, int b) {e[idx] b, ne[idx] h[a], h…...

设计模式(一)

1、适配器模式 &#xff08;1&#xff09;概述 适配器中有一个适配器包装类Adapter&#xff0c;其包装的对象为适配者Adaptee&#xff0c;适配器作用就是将客户端请求转化为调用适配者中的接口&#xff1b;当调用适配器中的方法时&#xff0c;适配器内部会调用适配者类的方法…...

Prometheus关于微服务的监控

在微服务架构下随着服务越来越多,定位问题也变得越来越复杂,因此监控服务的运行状态以及针对异常状态及时的发出告警也成为微服务治理不可或缺的一环。服务的监控主要有日志监控、调用链路监控、指标监控等几种类型方式,其中指标监控在整个微服务监控中比重最高,也是实际生…...

工业相机图像获取:RAW 图像如何保存和显示,附海康Basler堡盟相机代码

工业相机RAW图像保存显示&#xff0c;海康/Basler/堡盟代码直接抄 阅读提示&#xff1a;本文偏向工业视觉入门实操&#xff0c;避开晦涩理论&#xff0c;聚焦RAW图像的保存、显示落地方法&#xff0c;附带三大主流工业相机品牌的实测代码&#xff0c;适合视觉工程师、调试新手快…...

用AirScript脚本自动发送生日祝福邮件(极简版)

1. 为什么需要自动发送生日祝福邮件&#xff1f; 你有没有遇到过这样的情况&#xff1f;明明记得朋友的生日快到了&#xff0c;结果当天忙得团团转&#xff0c;等想起来的时候已经过了零点。或者更尴尬的是&#xff0c;设置了手机提醒&#xff0c;但看到通知后想着"等会儿…...

LIBERO Benchmark自定义任务避坑指南:手把手教你从零构建厨房场景的BDDL文件

LIBERO Benchmark厨房任务BDDL实战&#xff1a;从场景拆解到避坑全流程 当你第一次打开LIBERO Benchmark的文档&#xff0c;面对那些复杂的项目结构和晦涩的术语时&#xff0c;是否感到无从下手&#xff1f;本文将以一个具体的厨房场景任务为例——"打开橱柜放入杯子&quo…...

Arduino按钮新玩法:一个按键实现开关机、模式切换,附完整项目代码

Arduino单键交互系统设计&#xff1a;从状态机到低功耗实战 当你的便携式环境监测仪只有一个物理按键&#xff0c;却需要实现开关机、模式切换、参数校准等复杂功能时&#xff0c;如何设计优雅的交互逻辑&#xff1f;本文将带你从基础按钮检测出发&#xff0c;逐步构建一个基于…...

Qwen2.5-0.5B Instruct在软件测试中的自动化应用

Qwen2.5-0.5B Instruct在软件测试中的自动化应用 1. 引言 软件测试是确保产品质量的关键环节&#xff0c;但传统测试方法往往耗时费力。开发人员需要编写大量测试用例&#xff0c;执行重复的测试流程&#xff0c;还要分析复杂的测试结果。这个过程不仅枯燥&#xff0c;还容易…...

双指针-11. 盛最多水的容器

文章目录1.题解2.机考代码3.知识点讲解1.异向双指针力扣地址&#xff1a; 中等&#xff1a;11. 盛最多水的容器1.题解 class Solution {public int maxArea(int[] height) {int maxarea 0, l 0, r height.length - 1;while(l < r){maxarea Math.max(maxarea, Math.min(…...

别再只盯着通用数据集了!盘点2024年那些能直接拿来微调LLaMA、ChatGLM的医学问答数据集

2024医学大模型实战&#xff1a;精选可直接微调的问答数据集与应用指南 当开源大模型如LLaMA-3、ChatGLM3和Gemma在通用领域展现出惊人潜力后&#xff0c;医疗健康领域正成为下一个技术落地的黄金赛道。但许多工程师在兴奋地下载完模型权重后&#xff0c;却卡在了最关键的一环—…...

ComfyUI-VideoHelperSuite解决VHS_VideoCombine节点缺失的4阶段实战方案

ComfyUI-VideoHelperSuite解决VHS_VideoCombine节点缺失的4阶段实战方案 【免费下载链接】ComfyUI-VideoHelperSuite Nodes related to video workflows 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-VideoHelperSuite 在ComfyUI视频工作流中&#xff0c;VHS_V…...

硬件工程师眼中的“省心”麦克风:MP421A-AT01E如何解决射频干扰与声音漂移

从“喂&#xff0c;听得到吗&#xff1f;”到“你说&#xff0c;我听着”&#xff1a;MP421A-AT01E如何让蓝牙耳机回归通话本质你有没有这样的经历&#xff1f;戴上刚买的蓝牙耳机&#xff0c;兴冲冲地给朋友打电话&#xff0c;结果对方第一句就是&#xff1a;“你那边好吵&…...

GetQzonehistory:5分钟快速备份QQ空间历史说说的终极指南

GetQzonehistory&#xff1a;5分钟快速备份QQ空间历史说说的终极指南 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory 在数字时代&#xff0c;我们的记忆越来越依赖于在线平台。QQ空间作…...