Analyze several interview questions: = = and = = =; Binding events; regular expression

         Today, my back-end friend sent me three front-end interview questions , Here we try to analyze a wave .

Catalog

1、== and === What does it mean , What's the difference ？

（1） assignment ：=

（2） identical ：==

（3） Strictly the same ：===

2、 How to bind events , What are the common binding events ？

（1） Native JS Binding events for

（2）JQuery Event binding in

（3）Vue Event binding in

3、 The role of regular expressions and common symbols

（1） What is regular expression ？

（2） Which special symbols and characters are commonly used in regular expressions

1、== and === What does it mean , What's the difference ？

What about here? , Let's sum up directly JS The difference between the three equal signs in ！

（1） assignment ：=

         stay JS in , One “=” It has the same meaning and usage as the equal sign in other languages , namely ： assignment . I believe that a little friend with a certain language foundation must be familiar with it , Here is a brief introduction ： assignment , To put it simply, I will “=” Value after , Assign to “=” Previous variables . stay JS The same is true in China .

a = 10
//  hold  10  Assign a value to   Variable a

（2） identical ：==

Double equal sign ：==,“==” Compare the two values , It's only worth , return true or false.

Be careful ：

① stay JS in ,null==undefined   //true  （ This is actually JS Design flaws in ）

② stay JS in , Use “==” There will be implicit conversions ： If one is a string , One is numerical value , Convert the string to a numeric value before comparing , ‘3’ == 3   //true  |   1 == true   //true

（3） Strictly the same ：===

Three equal signs ：===,“===” Compare the two values , First compare the values , Compare the types , return true or false.

Be careful ：

①”===” There will be no implicit conversion    '1' === 1 //false

②null===undefined  // false  （ Because in JS in null and undefined There are two different types of data ）

③1 === true  //false

④ If both values refer to the same object or function , So equal , Otherwise it's not equal （ This mainly refers to object and Array , Because the reference type refers to the same address ）

summary ：

“=”： assignment , after Assign to front .

“==”： Same comparison , As long as the value is the same , Namely true.

“===”： Strictly compare the same , The value and type must be the same ,  It's just true; The address is the same , It's also true.

2、 How to bind events , What are the common binding events ？

         In front end development , To improve development efficiency , So for this way of binding events , Different packages are implemented in different frameworks , Here we first introduce a part , Later we will add .

         Here we first introduce the common binding events , For users , Common events are nothing more than Mouse events 、HTML Events and keyboard events

1. Click event ：onclick： Click events ;ondblclick： Double-click the event

2. "Event" ：onblur： Lose focus ;onfocus: Element gets focus .

3. Loading event ：onload： A page or an image is loaded .

4. Mouse events ：onmousedown Mouse button pressed ;onmouseup Mouse button released ;

onmousemove Mouse moved ;onmouseover Move the mouse over an element ;onmouseout Move the mouse away from an element .

5. Keyboard events ：onkeydown A keyboard key is pressed ;onkeyup A keyboard key is released ;

onkeypress A keyboard key is pressed and released .

（1） Native JS Binding events for

① Directly in DOM Element binding events

1 <div id="btn" onclick="clickone()"></div> // Directly in DOM Binding events in 
2 <script>
3 　　　　function clickone(){ alert("hello"); }
4 </script>

  Simply speaking ： Create function first , Then bind events to the elements , After the event is triggered , Call this function

② Bind events to tags

<div id="btn"></div>
2 <script>
      /*       Get elements            */  /* The binding event */    /* Trigger function */ 
3 　　document.getElementById("btn").onclick = function（）{ alert("hello"); } // The script is bound 
4 </script>

This way of binding events , In a nutshell ： Get the element , The binding event , Trigger the corresponding function .

③ Through event monitoring , To bind events

<div id="btn"></div>
<script>
　document.getElementById("btn").addeventlistener("click",clickone,false); 
// Parameters 1： event ; Parameters 2： Trigger function ; Parameters 3： Specify whether this event occurs in the bubbling process or the capture process （ Don't write ）
// Handle the corresponding functions by listening for events ,
// The third parameter is set to true Just during the capture process , Instead, the processing function is executed during bubbling .

    function clickone(){ alert("hello"); }
</script>

Simply speaking ： Get elements , Event monitoring （ When something happens , Trigger the corresponding function ）

Be careful ：

The way 1 And way 2 It's something we often use , So since there are already two methods to bind events, why should there be a third one ？ The answer is this ：

         use "addeventlistener" You can bind the same event multiple times , And will execute , And in the DOM If the structure is bound to two "onclick" event , Only the first ; The script will only execute the last event in an anonymous way .

         The way 3 Registered event listener , You can also use “removeListener” Use to cancel listening .

（2）JQuery Event binding in

        jQuery There are four ways to monitor events , Namely bind、live、delegate、on, The corresponding functions for de listening are unbind、die、undelegate、off.

How to use these four events , Please refer to my previous article for details ：

【 Interview questions 】JQuery Event binding in _ Xiao Zhang, run . The blog of -CSDN Blog Detailed explanation JQuery Binding events are 4 Ways of planting ：bind()、live()、delegate() and on() Method https://blog.csdn.net/io_123io_123/article/details/125125105?spm=1001.2014.3001.5502

（3）Vue Event binding in

        vue.js Event binding in , Use < v-on: Event name = Function name > To complete , Here the function name is defined in Vue In the instance methods Object ,Vue Instances can directly access the methods .

        /*v-on yes Vue1 The way events are bound in , stay Vue2 in , Use @ A symbol is enough */

The way 1、 Write... Directly in the label js Method

<button v-on:click="alert（'hi'）"> The first way to write an execution method </button>

The way 2、 call method The way to

<button v-on:click="run()"> The first way to write an execution method </button>  
  
 <button @click="run()"> The implementation of the method   Abbreviation   How to write it </button>
export default {  
  data () { 

  },
  methods:{
   run:function(){
    alert(' This is a way ');
    }
   }
 }

expand ： Method dissemination , Method passes parameters directly into the method when it is called

<button @click="result('111')"> Execute method pass value 111</button>
 <button @click="result('222')"> Execute method pass value 2222</button>
export default {  
  data () { 

  },
  methods:{
   result:function(val){
    alert(val);
    }
   }
 }

3、 The role of regular expressions and common symbols

（1） What is regular expression ？

         Regular expressions （Regular Expression）： Is a string of characters and special symbols , It can describe the repetition of patterns or express multiple characters . Regular expressions are used for advanced text pattern matching 、 extract 、 Or text search and replacement .

（2） Which special symbols and characters are commonly used in regular expressions ？

Special symbols	describe	Example	Example meaning
|	Pipe symbol , Means to select one of them for matching	re1| re2	Select the matching regular expression re1 perhaps re2
.	Match remove \n Any character other than	d.d	Represents a match d And d Any character between , Such as “did”“d2d” etc.
^	Match the beginning of the string	^my	To express anything by my As the starting string
$	Match string terminator	bye$	Means to match any with bye Ending string
*	matching 0 Or a regular expression that appears multiple times on the left	[0-9]*	Means to match a string starting with any number

Special characters	describe	Example	Example meaning
\d (\D)	\d Match any decimal digit ,\D Does not match any numbers	\d\d\d	A string that matches three numbers
\w (\W)	\w Match any alphabetic character ,\W Does not match any alphabetic characters	\w+	Match a string of alphabetic characters
\s (\S)	\s Match any space character ,\S Does not match any space characters	of\sthe	matching of and the There is any space character between
\b(\B)	\b Match any word boundaries ,\B Does not match any word boundaries	\bthe	Any the Starting string