前端各种方法自我整理

这篇具有很好参考价值的文章主要介绍了前端各种方法自我整理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Javascript方法


  • slice [slaɪs]切片

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

slice(0,3)取出数组下标0到下标3的值,生成新数组,但是不包含下标3的值

注意:slice不会改变数组的长度

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

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

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

  • floor 

返回小于等于x的最大整数: 

前端各种方法自我整理,面试,前端

注意:语法是Math.floor(x

  • pop

取出数组中最后一个值

例子:var num = arr.pop()

  • push/pʊʃ/

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

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

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

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

  • shift/ʃɪft/

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

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

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

  • unshift

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

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

  • concat

连接两个字符串: 该方法没有改变原有字符串,但是会返回连接两个或多个字符串新字符串。

前端各种方法自我整理,面试,前端

  • 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() 方法用于把数组中的所有元素转换一个字符串。

前端各种方法自我整理,面试,前端


set() 


  • 使用 new 关键字和 Set 构造函数可以创建一个空集合:

const s = new Set();
  • 经常用Set解决数组去重问题 

const arr = [1, 2, 3, 3, 4, 5, 4, 4, 2, 1, 3];
Array.from(new Set(arr)); // [1, 2, 3, 4, 5]
  • size:

获取Set实例的元素个数: 

const s = new Set([1, 2, 3]);
s.size; // 3
  •  add():

添加元素:

const s = new Set();
s.add(1).add(2).add(3);
Array.from(s); // [1, 2, 3]
  •  has():

查询Set实例是否存在某元素(返回布尔值):

const s = new Set();
s.add(1).add(2).add(3);
s.has(1); // true
  •  delete():

删除Set实例中某个元素(返回布尔值):

const s = new Set();
s.add(1).add(2);
s.delete(1);
Array.from(s); // [2]
  • clear():

清空Set实例: 

const s = new Set();
s.add(1).add(2).add(3);
Array.from(s); // [1, 2, 3]
s.clear();
Array.from(s); // []

 注意:set可以用for...of和foreach,但是不可以用for...in,应为它没有key值


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节点,并重新渲染。文章来源地址https://www.toymoban.com/news/detail-557368.html

到了这里,关于前端各种方法自我整理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 常见前端面试题整理(带答案)

    (1)根据内容的语义化,选择合适的标签。便于开发人员阅读和写出更优雅的代码,也便于团队后期的开发和维护; (2)在没有CSS,或者CSS尚未加载的时候,页面也能够呈现出很好的内容结构、代码结构(如标题和正文分开); (3)有利于搜索引擎优化。搜索引擎依赖于

    2024年02月07日
    浏览(45)
  • 【前端】项目碰到的面试题整理

    一、目录 js 中一个 = 、 、 = 的区别 ?.. es6 语法中将两个对象合并成一个对象,使用什么语法?… let、const、var 有什么区别?… jquery 中如何获取当前元素下一个同级元素?… JS 中的深拷贝与浅拷贝的区别?… 如何在 JS 中编码和解码 URL… 请描述一下 cookie,sessionStorage 和 lo

    2024年04月24日
    浏览(27)
  • 前端开发面试题及答案整理(合集)

      前端开发面试题及答案 1、对Web标准以及W3C的理解与认识? 答:标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链CSS和JS脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组

    2024年02月17日
    浏览(46)
  • 2023前端超全面试题,全是金三银四面试真题整理!附答案。

    目录 HTML 标签语意化 HTML5新特性 SEO input元素的类型 iframe的特点 CSS Flex BFC 重排重绘 CSS优先级 CSS3新特性 清除浮动的方法 盒模型的理解 响应式布局 移动适配方案 三栏布局 圣杯布局和双飞翼布局 JS JS为何是单线程 JS数据类型 js判断数据类型 js中的length属性 判断空对象 判断空

    2024年02月08日
    浏览(47)
  • 什么是组件,以及前端各种框架组件的使用方法

    🙂博主:小猫娃来啦 🙂文章核心: 介绍什么是组件,以及前端各种框架组件的使用方法 ⭐组件就像是搭积木一样的东西,可以用来构建软件或者系统。每个组件都有自己独立的功能和任务,就像一个小小的部件。你可以把这些小部件组合在一起,形成一个完整的应用程序

    2024年02月12日
    浏览(47)
  • 面试第一关:自我介绍【含自我介绍模板】

    自我介绍是每一个面试必不可少的环节,也是求职应聘必须克服的一关,通过自我介绍: 吸引面试官的注意力:自我介绍是你与面试官建立联系的第一步,也是面试的一个重要环节。通过一个清晰、有条理的自我介绍,你可以吸引面试官的注意力,让他们对你产生兴趣。 展

    2024年02月12日
    浏览(42)
  • 持续不断更新中... 自己整理的一些前端知识点以及前端面试题,包括vue2,vue3,js,ts,css,微信小程序等

    答: 在普通的前端项目工程中,在script标签中增加setup即可使用api 使用setup()钩子函数 答: 不要在计算属性中进行异步请求或者更改DOM 不要直接修改computed的值 区别: 计算属性值基于其响应式依赖被缓存,意思就是只要他之前的依赖不发生变化,那么调用他只会返回之前缓

    2024年02月11日
    浏览(58)
  • 软件测试面试01:自我介绍

    面试宫,您好,我叫XXX,来自于XXXX,目前从事软件测试工作,已经三年工作经验,个人性格,比较开朗,跟人关系比较好,做事也比较细心三年测试工作经验中,过了不少项目,积累不少项目经验,前面1-2年主要是功能测试,后面这一年主要做接口测试,app自动化测试能够独

    2024年02月06日
    浏览(53)
  • 技术支持面试 英文自我介绍

    Hello, my interviewer, my name is Zhang Ruichao, I come from Hunan, Changsha. I graduated from Hunan Agricultural University, majored in Intelligent Science and Technology, which means I spent 4 years in a key university with unified enrollment.  I\\\'m looking for a suitable promotion in Kanzhun Limited, until I found your company. So today I am coming for ap

    2024年02月07日
    浏览(76)
  • 现代前端开发者的自我迷失,你还会前端基础知识吗?

    通常来说,我认为情况并不算糟糕,熟练的手可以几乎做到一切。然而,最近我注意到一些事情改变了我对这个行业的看法。似乎在这些无尽的趋势、范式和新奇玩意中,我们忘记了前端开发的支柱(意思是忘记了基础知识,没有轮子没法写代码了)。 在这篇文章中,我想分

    2023年04月08日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包