分析几个面试题:==和===;绑定事件;正则表达式

article/2025/9/23 3:19:25

        今天也是我学后端的朋友给我发了三个前端的面试题,这里我们试着分析一波。

目录

1、==和===的含义是什么,又有什么区别呢?

(1)赋值:=

(2)相同:==

(3)严格相同:===

2、如何绑定事件,常用的绑定事件有哪些?

(1)原生JS的绑定事件

(2)JQuery中的事件绑定

(3)Vue中的事件绑定

3、正则表达式的作用以及常用符号

(1)什么是正则表达式?

(2)正则表达式中常用个特殊符号和字符有哪些

1、==和===的含义是什么,又有什么区别呢?

这里呢,我们直接总结一下JS中三个等号的区别吧!

(1)赋值:=

        在JS中,一个“=”和其他语言中的等号含义和用法是相同的,即:赋值。相信有一定语言基础的小伙伴一定是烂熟于心了,这里简单介绍一下:赋值,简单来说就是将“=”后面的值,赋给“=”前面的变量。在JS中同样也是。

a = 10
// 把 10 赋值给 变量a

(2)相同:==

双等号:==,“==”前后两个值进行比较,只比较值返回true或false

注意:

①在JS中,null==undefined   //true  (这里其实是JS的设计漏洞)

②在JS中,使用“==”会存在隐式转换:如果一个是字符串,一个是数值,把字符串转换成数值之后再进行比较, ‘3’ == 3   //true  |   1 == true   //true

(3)严格相同:===

三等号:===,“===”前后两个值进行比较,先比较值,再比较类型返回true或false

注意:

①”===”不会存在隐式转换   '1' === 1 //false

②null===undefined  // false  (因为在JS中null和undefined是两种不同的数据类型)

③1 === true  //false

④如果两个值都引用同一个对象或是函数,那么相等,否则不相等(这里主要是指对象数组,因为引用类型引用的是同一个地址)

总结:

“=”:赋值,后 赋给 前。

“==”:比较相同,只要值相同,就是true。

“===”:严格比较相同,值和类型都必须相同, 才是true;地址相同,也是true。

2、如何绑定事件,常用的绑定事件有哪些?

        在前端开发中,为了提高开发效率,所以对于这种绑定事件的方式,在不同框架中都进行了不同的封装,这里我们先介绍一部分,后续我们再补充。

        这里我们先介绍常用的绑定事件,对于用户而言,常用的事件无非是鼠标事件、HTML事件和键盘事件

1.点击事件:onclick:单击事件;ondblclick:双击事件

2.焦点事件:onblur:失去焦点;onfocus:元素获得焦点。

3.加载事件:onload:一张页面或一幅图像完成加载。

4.鼠标事件:onmousedown 鼠标按钮被按下;onmouseup 鼠标按键被松开;

onmousemove 鼠标被移动;onmouseover 鼠标移到某元素上;onmouseout 鼠标从某元素移开。

5.键盘事件:onkeydown 某个键盘按键被按下;onkeyup 某个键盘按键被松开;

onkeypress 某个键盘按键被按下并松开。

(1)原生JS的绑定事件

①直接在DOM元素绑定事件

1 <div id="btn" onclick="clickone()"></div> //直接在DOM里绑定事件
2 <script>
3     function clickone(){ alert("hello"); }
4 </script>

 简单来说:先创建函数,然后给元素绑定事件,触发事件后,调用这个函数

②在标签上绑定事件

<div id="btn"></div>
2 <script>/*      获取元素           */  /*绑定事件*/    /*触发函数*/ 
3   document.getElementById("btn").onclick = function(){ alert("hello"); } //脚本里面绑定
4 </script>

这种绑定事件的方式,简单来说就是:获取到元素,绑定事件 ,触发对应函数。

③通过事件监听,来绑定事件

<div id="btn"></div>
<script>document.getElementById("btn").addeventlistener("click",clickone,false); 
//参数1:事件;参数2:触发的函数;参数3:规定此事件发生在冒泡过程还是捕获过程(可不写)
//通过侦听事件处理相应的函数,
//第三个参数设置为true就在捕获过程中执行,反之就在冒泡过程中执行处理函数。function clickone(){ alert("hello"); }
</script>

简单来说:获取元素,事件监听(当发生某次事件时,触发对应的函数)

注意:

方式1和方式2是我们经常用到的,那么既然已经有两种绑定事件的方法为什么还要有第三种呢?答案是这样的:

        用 "addeventlistener" 可以绑定多次同一个事件,且都会执行,而在DOM结构如果绑定两个 "onclick" 事件,只会执行第一个;在脚本通过匿名函数的方式绑定的只会执行最后一个事件。

        方式3注册了事件监听,还可以通过“removeListener”使用来取消监听。

(2)JQuery中的事件绑定

        jQuery中提供了四种事件监听方式,分别是bind、live、delegate、on,对应的解除监听的函数分别是unbind、die、undelegate、off。

具体这四种事件的使用方式,可以参考我之前的文章了解详细:

【面试题】JQuery中的事件绑定_小张快跑。的博客-CSDN博客详解JQuery绑定事件有4种方式:bind()、live()、delegate()和on()方法https://blog.csdn.net/io_123io_123/article/details/125125105?spm=1001.2014.3001.5502

(3)Vue中的事件绑定

        vue.js中的事件绑定,使用< v-on:事件名=函数名>来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法。

        /*v-on是Vue1中绑定事件的方式,在Vue2中,使用@符号即可*/

方式1、 直接在标签中写js方法

<button v-on:click="alert('hi')">执行方法的第一种写法</button>

方式2、调用method的办法

<button v-on:click="run()">执行方法的第一种写法</button>  <button @click="run()">执行方法的 简写 写法</button>
export default {  data () { },methods:{run:function(){alert('这是一个方法');}}}

拓展:方法传参,方法直接在调用时在方法内传入参数

<button @click="result('111')">执行方法传值111</button><button @click="result('222')">执行方法传值2222</button>
export default {  data () { },methods:{result:function(val){alert(val);}}}

3、正则表达式的作用以及常用符号

(1)什么是正则表达式?

        正则表达式(Regular Expression):是由一些字符和特殊符号组成的字符串,可以描述模式的重复或者表述多个字符。正则表达式的用途是为高级的文本模式匹配、抽取、或文本形式的搜索和替换提供基础。

(2)正则表达式中常用个特殊符号和字符有哪些?

特殊符号描述示例示例意义
|管道符号,表示选择其中一个进行匹配re1| re2选择匹配正则表达式re1或者re2
.匹配除去\n之外的任意字符d.d表示匹配d与d之间为任意字符的情况,如“did”“d2d”等
^匹配字符串起始部分^my表示任何以my作为开始的字符串
$匹配字符串终止符bye$表示匹配任何以bye结束的字符串
*匹配0或者多次左端出现的正则表达式[0-9]*表示匹配以任意个数字开始的字符串
特殊字符描述示例示例意义
\d (\D)\d匹配任何一个十进制数字,\D不匹配任何数字\d\d\d匹配三个数字的字符串
\w (\W)\w匹配任何一个字母字符,\W不匹配任何字母字符\w+匹配一个由字母字符组成的字符串
\s (\S)\s匹配任何空格字符,\S不匹配任何空格字符of\sthe匹配of和the之间有任何空格字符的情况
\b(\B)\b匹配任何单词边界,\B不匹配任何单词边界\bthe任何以the开始的字符串


http://chatgpt.dhexx.cn/article/RhKujwbw.shtml

相关文章

前端面经总结

HTML及浏览器 对栅栏布局的理解 栅格化布局中的元素&#xff1a;column列&#xff0c;row行&#xff0c;gutter列之间的距离&#xff0c;container容器 栅格是否可以嵌套 canvas和svg的区别 SVG&#xff1a; SVG 是一种使用 XML 描述 2D 图形的语言。 在 SVG 中&#xff0c;…

前端深入学习

但是面试中必考的点且占比非常大的有前端基础和算法。 决定你是否能拿sp offer&#xff08;高薪offer&#xff09;以及是否进名企的是项目和算法。 absolute 生成绝对定位的元素&#xff0c;相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 “left”, “to…

web前端常用词汇

html中的单词 Network [netwɜːk] 网络 General [dʒen(ə)r(ə)l] 一般的&#xff0c;大体的 Request [rɪkwest] 请求 Response [rɪspɒns] 响应 Headers [hedəz] 标题 HyperText [haɪpətekst] 超文本 Transfer [trnsfɝ] 传递 Protocol [prəʊtə…

前端html、css、JavaScript---硬核知识汇总

前端HTML篇 硬核&#xff01;一篇文章教你阅遍html。 声明&#xff1a;本篇文章只是一个刚开始学习后端开发的菜鸟汇总完成的 JavaWeb学习前导html篇&#xff0c;所以专业性肯定不如前端人员&#xff0c;但用于学习后端开发足够了&#xff0c;刚接触html的童鞋拿来快速了解ht…

前端面试题总结(转载)

DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动1.DOM中两个节点存在的关系无非3种&#xff1a;1.1.包含与被包含,IE率先引入的contains()方法可检测&#xff0c;例 A.contains(B)&#xff0c;即检查节点B是否是节点A的子节点&#xff0c;返回布尔值&…

前端三件套知识点

html 常用插件 文件比较 常用快捷键 ctrl f 查找当前页面的内容 !后按table 或者 html:5 代码模板快捷键 altb调试快捷键 ctrlk ctrlt改颜色主题 altshifta注释快捷键 html基础概念 一、 WEB标准的概念及组成 WEB标准不是某一个标准&#xff0c;而是一系列标准的集合。 …

php前端搜索功能,JavaScript实现前端实时搜索功能的代码分享(图)

这篇文章主要为大家详细介绍了JavaScript实现前端实时搜索功能&#xff0c;具有一定的参考价值&#xff0c;感兴趣的小伙伴们可以参考一下 大部分页面都具备搜索功能。而作为前端&#xff0c;我们的目的只是将用户输入的内容返回给后台而后呈现反馈数据给用户&#xff0c;具体实…

前端实时搜索功能

** 大部分页面都具备搜索功能。而作为前端&#xff0c;我们的目的只是将用户输入的内容返回给后台而后呈现反馈数据给用户&#xff0c;具体实现如下&#xff1a; ** 1.基本布局&#xff1a; <div class"searcher"><p class"searcher-main">…

适合后端开发人员的html笔记

1html 锚点 <a href"#bottom">跳转到底部</a> <div class"aa"></div> <a href"#" id"bottom">跳转到顶部</a> img 图片标签 h1:一级标题块级元素其他的都是行内元素 img同时具备行内元素和块级…

【JavaScript】 一万字 JavaScript 笔记(详细讲解 + 代码演示 + 图解)

文章目录 变量 变量声明的提升数据类型Typeof运算符数据类型转换 表达式与运算符 隐式类型转换toFixed(a)方法保留a位小数关系运算符短路求值流程控制语句 数组函数DOMBOM面向对象 变量 一个变量只定义但没有赋初值&#xff0c;默认值是 undefined定义变量时必须写var&a…

前端面试 汇总整理

-----------------------------------------html css-------------------------------------------- 一.回流与重绘 回流一定引起重绘&#xff0c;重绘不一定回流 1.浏览器渲染机制 1&#xff09;浏览器采用流式布局。 2&#xff09;浏览器将html解析成DOM&#xff0c;css解析成…

JavaWeb——后端开发必备的JavaScript知识

JS学习 1.什么是JavaScript&#xff0c;有什么用&#xff1f; 答&#xff1a;JavaScript是网景公司发明的&#xff0c;运行在浏览器上的脚本语言&#xff0c;简称JS。 补充&#xff1a;网景公司现在没了&#xff0c;被美国在线收购了。 2.在HTML中嵌入JavaScript代码的三种方…

el-input中设置onkeypress事件是否匹配正则表达式显示输入内容的格式

场景 若依前后端分离版手把手教你本地搭建环境并运行项目&#xff1a; 若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客_若依前后端分离搭建 设置el-input的onkeypress事件限制输入内容是否匹配正则表达式。 注&#xff1a; 博客&a…

前端开发实习生面试总结

个人感觉面试官对实习生还是很友好的&#xff0c;大部分时候你答不上来都会引导你&#xff0c;最后还会点评你的不足&#xff0c;评价出来的那些问题确实是我自己的短板&#xff01;所以在整个过程中还是学到了很多&#xff01;&#xff01; 本人坐标南京&#xff0c;南京投的相…

datacenter 2

突然综合类又有新的事情了 页面能顺利打开了 但是好像值传不过去 之前不知道为什么输出了三十次 之前是判断两个不为4和200 然后else输出 现在改了之后只输入10次 但是出现通讯错误那个问题

数据中心与云数据中心

数据中心与云数据中心 数据中心&#xff08;DC&#xff0c;DataCenter&#xff09;是指在一个物理空间内实现信息的集中处理、存储、传输、管理等功能&#xff0c;它包括服务器、存储、网络等关键设备和这些关键设备运行所需要的环境因素&#xff0c;如供电、制冷、消防、监控等…

阿里云cassandra数据库datacenter查看

在使用阿里云的cassandra数据库时需要注意的是下图中的数据中心ID对应cassandra中的datacenter&#xff0c;而不是数据中心的名称&#xff01;&#xff01;&#xff01; 即SessionBuilder.withLocalDatacenter方法要使用阿里云cassandra官方文档中的数据中心ID public SelfT w…

英特尔固态硬盘测试软件,英特尔固态硬盘工具(Intel SSD Datacenter Tool)

英特尔固态硬盘数据中心工具Intel SSD Datacenter Tool是一个有用的命令行应用程序&#xff0c;特别适合管理 910 系列的英特尔SSD固态驱动器。如果用户的硬盘是英特尔的就需要下载一个这样的软件&#xff0c;软件能对硬盘进行检测和固件升级&#xff0c;有需要的可以下载使用。…

ICNP‘2019 Congestion Control for Cross-Datacenter Networks论文阅读笔记

文章目录 BackgroundGeminiDiscussion Background 现代的一些大规模在线服务会将他们的信息储存在不同地域的数据中心当中&#xff0c;并且这种分布以及变得越来越流行了。这意味着&#xff0c;有一些流会同时经过数据中心与广域网。(和Annulus中提到的是同一个问题) 实际上这…

2008服务器文件夹镜像,【玩转腾讯云】导入镜像-Windows 2008 R2 Datacenter

微软发布对 Windows Server 2008 和 2008 R2 的支持已于 2020 年 1 月 14 日结束。 这意味着定期安全更新也已终止,将不会有额外的: 免费本地安全更新 非安全更新 免费支持选项 在线技术内容更新 各云服务商也发布了相关下线 Windows 2008 系列镜像的公告 【腾讯云】关于Wind…