前端各种方法自我整理

news2024/11/16 9:56:38

Javascript方法


  • slice [slaɪs]切片

slice (-2)取出数组中倒数两个植变生成一个新数组

slice(0,3)取出数组下标0到下标3的值,生成新数组

  • includes [ɪnˈkluːdz]包含

查看数组或字符串内是否有该值,有返回true,无返回false

例子:arr.includes('a')  //true,false

  • pop

取出数组中最后一个值

例子:var num = arr.pop()

  • push/pʊʃ/

可向数组的末尾添加一个或多个元素,并返回新的长度。

注意: 新元素将添加在数组的末尾。

注意: 此方法改变数组的长度。

提示: 在数组起始位置添加元素请使用 unshift() 方法。

  • shift/ʃɪft/

shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。

注意: 此方法改变数组的长度!

提示: 移除数组末尾的元素可以使用 pop() 方法

  • unshift

方法用于在数组开头增加一个值,并返回新的长度!

注意: 此方法改变数组的长度!

  • JSON.stringify()

将 JavaScript 对象转换为 JSON 字符串

  • json.parse()/pɑːrs/对…进行语法分析

可以将JSON字符串转为一个对象

  • Object.assign/əˈsaɪn/分配

 Object.assign(target, ...sources)

 参数: target--->目标对象

       source--->源对象

       返回值:target,即目标对象

Object.assign(Father.prototype,{ dance(){ return '我爱跳舞'; } });

向类中添加方法class Father

var result = Object.assign(target,source)

  • toString

把数字转换为字符串

例:num.toString()

  • indexOf

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1。

例:str.indexOf("welcome");

  • replace

replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串

例:替换第一个,str.replace("Microsoft","Runoob"):

替换全局:str.replace(/blue/g,"red");

  • toLocaleString/loʊˈkæl/语系

方法可根据本地时间把 Date 对象转换为字符串,并返回结果。

还可以将数字变成千分位格式:

例:new Date().toLocaleString() //2021/10/12 下午7:39:06

num.toLocaleString()  //12,345,678

  • join

join() 方法用于把数组中的所有元素转换一个字符串。


webpack.common.js


entry/ˈentri/加入

webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的

module/ˈmɑːdʒuːl/

        Module(模块)是Webpack中最基本的概念,它代表着一个单独的文件(或一组相关的文件),它可以是JavaScript、CSS、图片、JSON等任何类型的文件。在Webpack中,每个Module都会被转换成一个或多个Chunk。 

        rules/ruːlz/

        创建模块时,匹配请求的规则数组。这些规则能够修改模块的创建方式。 这些规则能够对模块(module)应用 loader,或者修改解析器(parser)。

 plugins插件

 插件 Plugin 用于执行更广泛的任务,例如:打包优化、环境变量注入等


webpack.dev.js 


mode

版本 

devServer 

本地代理服务


webpack.prod.js


output 

输出打包线上文件 


React生命周期


constructor()

constructor()中完成了React数据的初始化,它接受两个参数:props和context,当想在函数内部使用这两个参数时,需使用super()传入这两个参数。

注意:只要使用了constructor()就必须写super(),否则会导致this指向错误。

componentWillMount()

componentWillMount()一般用的比较少,它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor()初始化数据后,但是还未渲染DOM时。

componentDidMount()

组件第一次渲染完成,此时dom节点已经生成,可以在这里调用ajax请求,返回数据setState后组件会重新渲染

componentWillUnmount ()

在此处完成组件的卸载和数据的销毁。

clear你在组建中所有的setTimeout,setInterval

移除所有组建中的监听 removeEventListener


更新过程


static getDerivedStateFromProps(props, state)

/dɪˈraɪvd/获得     获得state来自props

getDerivedStateFromProps 的存在只有一个目的:让组件在 props 变化时更新 state。

shouldComponentUpdate(nextProps,nextState)

主要用于性能优化(部分更新)

唯一用于控制组件重新渲染的生命周期,由于在react中,setState以后,state发生变化,组件会进入重新渲染的流程,在这里return false可以阻止组件的更新

因为react父组件的重新渲染会导致其所有子组件的重新渲染,这个时候其实我们是不需要所有子组件都跟着重新渲染的,因此需要在子组件的该生命周期中做判断

getSnapshotBeforeUpdate(prevProps, prevState)

/ˈsnæpʃɑːt/片段

在 getSnapshotBeforeUpdate() 方法中,我们可以访问更新前的 props 和 state。

componentDidUpdate(prevProps,prevState)

组件更新完毕后,react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期,这里可以拿到prevProps和prevState,即更新前的props和state。

render()

render函数会插入jsx生成的dom结构,react会生成一份虚拟dom树,在每一次组件更新时,在此react会通过其diff算法比较更新前后的新旧DOM树,比较以后,找到最小的有差异的DOM节点,并重新渲染。

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

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

相关文章

Vue--》Vue3打造可扩展的项目管理系统后台的完整指南(十二)完结篇

今天开始使用 vue3 + ts 搭建一个项目管理的后台,因为文章会将项目的每一个地方代码的书写都会讲解到,所以本项目会分成好几篇文章进行讲解,我会在最后一篇文章中会将项目代码开源到我的GithHub上,大家可以自行去进行下载运行,希望本文章对有帮助的朋友们能多多关注本专栏…

linux常用压缩/解压缩命令的使用

目录 gzipbzip2tar gzip gzip 的常用选项: -l(list) 列出压缩文件的内容。 -k(keep) 在压缩或解压时,保留输入文件。 -d(decompress) 将压缩文件进行解压缩。 如果 gzip 不加任何选项,此时为压缩。压缩完该文件会生成后缀为.gz 的压缩文…

java读取excel,指定列A列为空,将下方空行上移,并将指定列F列数据拼接

java读取excel,将空行上移 改造前: 效果图: 上代码: import org.apache.poi.ss.usermodel.*; import org.apache.poi.xssf.usermodel.XSSFWorkbook;import java.io.FileInputStream; import java.io.FileOutputStream; import jav…

SqueezeNet算法解析—鸟类识别—Paddle实战

文章目录 一、理论基础1.前言2.设计理念2.1 CNN微架构(CNN MicroArchitecture)2.2 CNN宏架构(CNN MacroArchitecture)2.3 模型网络设计探索过程2.4 结构设计策略2.5 Fire模块 3.网络结构4.评估分析 二、实战1.数据预处理2.数据读取…

树莓派登录密码忘记了怎么办????

我们常常会不记得我们的密码,比如说我近期想玩一下我们树莓派开发版,登录的时候忘记了怎么办,第一想到的就是重刷系统,从头再来,今天我给大家带来了一个解决忘记了登录密码如何去修改它,从而进入系统里。 …

分享一款超级好用的下载软件,IDM--不限速,破解版,IDM破解版下载安装

本片文章分为四个部分: 第一部分,下载安装IDM 第二部分,IDM破解 第三部分,浏览器插件的安装 第四部分,百度网盘使用IDM下载 下载IDM 首先大家可以在浏览器搜索IDM 网址:https://www.internetdownloadma…

Zynq PS无法读取SD卡(TF卡)异常分析及如何读写SD卡

最近我正在进行一个Zynq项目,我使用了Xilinx SDK自带的系统库函数来读取SD卡中的配置信息。然而,一直读取异常。 我进行了一系列的调试和检查,包括确认PS部分的代码正确性以及Xilffs的配置是否正确,但是问题仍然没有解决。最后&am…

NYDIG最新报告:比特币今年上半年回报率达83.6%,远超其他资产类别

本文要点: 比特币的强劲势头延续到了二季度,本季度比特币上涨 6.8%,年初至今上涨 83.6%。 二季度末,一系列新的现货比特币 ETF 申请(尤其是 ETF 巨头贝莱德的申请)提振了比特币价格。 在多家机构提交现货 B…

POI下载excel通用方法

POI下载excel通用方法 最近遇到一个业务是需要下载excel&#xff0c;使用POI,这里记录一下实现过程 1、导包 <dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>3.9</version></dependency>…

本周大新闻|传微软曾考虑收购Niantic;腾讯引进Quest挑战重重

本周XR大新闻&#xff0c;AR方面&#xff0c;传微软曾考虑收购AR头部公司Niantic&#xff1b;Q-PIXEL公布5000PPI可调色Micro LED&#xff1b;三星智能眼镜商标曝光&#xff1b;Humane公布首款产品Ai Pin&#xff1b;空客推企业级AR解决方案。 VR方面&#xff0c;Vision Pro销…

边缘计算那些事儿-漫谈网络切片关键技术

0、背景 网络切片作为一种比较前沿的技术&#xff0c;当前并没有太多系统的资料可以学习&#xff0c;很多的技术资料都是比较分散地分布在论文和一些技术博客中&#xff0c;笔者当前是通过论文的解读获取相关的技术信息&#xff0c;在过程中笔者总结了相关的技术栈&#xff0c;…

pytorch多分类问题 CrossEntropyLoss()函数的输入size/shape不一致问题

在使用pytorch实现一个多分类任务的时候&#xff0c;许多多分类任务在训练过程中都会有如下的代码&#xff1a; criterion nn.CrossEntropyLoss() loss criterion(output, target) # output.size : [batch_size, class_num] # target.size : [batch_size]许多的初学者会卡在…

Kubernetes 容器类型 Init - pause - sidecar - app容器

目录 Kubernetes 的容器类型 Init 初始化容器 参考文档&#xff1a;Init 容器 | Kubernetes 使用 Init 容器的情况 案例&#xff1a;定义了一个具有 2 个 Init 容器的简单 Pod 你通过运行下面的命令启动 Pod&#xff1a; 发现两个Init容器都没有运行成功 查看更多详细…

一些行业报告--From 艾瑞咨询

一些行业报告--From 艾瑞咨询 1 介绍2 机械臂行业研究 [From 艾瑞咨询 -- 中国工业机器人行业研究报告&#xff08;2023&#xff09;2.1 发展历程2.2 中国工业机器人相关政策2.3 产业链2.4 三大部分六大系统2.5 伺服&控制器 主要玩家 及 关键指标及难点2.6 减速机 主要玩家…

mysql中根据已有的表来创建新表的三种方式

mysql根据现有表创建新表 1、语法1&#xff1a;CREATE TABLE new_tbl LIKE orig_tbl; 1、1 根据departments表创建新表departments1 departments 表结果和表数据库如下 创建departments1如下 使用命令&#xff1a; CREATE TABLE departments1 LIKE departments; 这种语法&…

GEE:在地图上添加时间滑动条,以交互式可视化不同年份影像

作者:CSDN @ _养乐多_ 本文将介绍在Google Earth Engine(GEE)平台上的地图显示区域创建一个交互式界面,可以为用户添加一个时间滑动条,通过滑动条可以选择显示不同年份的遥感影像。 结果如下图所示, 文章目录 一、代码二、代码链接一、代码 // 使用滑块从图像集合中选…

Auto-Rig Pro 手指控制器骨骼(IK-FK)

选中手指控制器骨骼,在tool面板里看到snap IK-FK, IK-FK,还有snap all to IK 和 FK: 这些都是Auto-Rig Pro提供的一些工具&#xff0c;可以让您在IK&#xff08;反向动力学&#xff09;和FK&#xff08;正向动力学&#xff09;之间切换和同步。IK和FK是两种不同的绑定方式&…

43. 间断连续登录用户问题

文章目录 题目需求思路一实现一题目来源 题目需求 现有各用户的登录记录表&#xff08;login_events&#xff09;如下&#xff0c;表中每行数据为&#xff1a;一个用户何时登录了平台。 现要求统计各用户最长的连续登录天数&#xff0c;间断一天也算作连续&#xff0c;例如&a…

git安装及初步使用

git的安装 &#xff1a; 在CentOS 7.6环境下可以使用一条语句就能安装git yum -y install git如果上面命令包以下错误&#xff0c;说明权限不够 [leijiefl ~]$ yum -y install git Loaded plugins: fastestmirror You need to be root to perform this command.可以转换成ro…

神经网络学习小记录74——Pytorch 设置随机种子Seed来保证训练结果唯一

神经网络学习小记录74——Pytorch 设置随机种子Seed来保证训练结果唯一 学习前言为什么每次训练结果不同什么是随机种子训练中设置随机种子 学习前言 好多同学每次训练结果不同&#xff0c;最大的指标可能会差到3-4%这样&#xff0c;这是因为随机种子没有设定导致的&#xff0…