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

最新推荐文章于 2022-09-06 10:25:32 发布

小张快跑。

最新推荐文章于 2022-09-06 10:25:32 发布

阅读量321

点赞数 1

分类专栏：狂刷面试题系列

本文链接：https://blog.csdn.net/io_123io_123/article/details/125124515

版权

JavaScript 事件绑定正则表达式比较运算符事件监听

关键词由CSDN通过智能技术生成

狂刷面试题系列专栏收录该内容

12 篇文章 5 订阅

订阅专栏

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

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开始的字符串