Basic usage and precautions of arrow function (= >) and three-point operator (...) in ES6 (this points to)

Catalog

One 、 Arrow function

Basic grammar ：

Omit writing ：

this Point to ：

1. Under the global function this

2. Object method this

3. Arrow function in image this

4. In the constructor this Point to the problem

Simple application ：

Two 、 Three point operator

1. Function passes indefinite parameters , Verify the length of the array .

2. Use with deconstruction

3. Use with array deconstruction Function to object

4. Expand

1. use ... The output array

2. Merge array

3. Turn the class array into a real array

4. Copy the array

5. practice

---

One 、 Arrow function

Basic grammar ：

() =>{} // (): function =>: The necessary grammar , Point to code block {}: Code block

const realName = () => { } ;// Assign a function to realName.

example ：

const num = (k,v) => {
	return k+v;
}

Omit writing ：

If the formal parameter or code block has only one sentence, it can be abbreviated ：

const myFun = (k) => {return k+1;}

Abbreviation ：

const myFun = k =>  k +1;

this Point to ：

1. Under the global function this

Ordinary functions are related to the caller

Arrowhead function this Is static According to the context this

2. Object method this

there this It refers to the instance

	const Person = {
				realname:" Zhang San ",age:19,
				say:function(){
					console.log(this);
				}
			}
			Person.say(); //person example 

3. Arrow function in image this

there this Point to window

	const Person = {
				realname:" Zhang San ",age:19,
				say:()=>{
					console.log(this);
				}
			}
			Person.say();//windows

4. In the constructor this Point to the problem

ordinary this Instance can be changed

In the arrow function this Will not change , In limine new The instance of is always this instance

			function Person(realname,age){
				this.realname = realname;
				this.age = age;
				this.say = ()=>{  
					console.log(this);// This this Can't   at that time new  Who the instance is 
				}
				this.say1 = function(){
					console.log(this);
				}
			}
			const P1 = new Person(" Zhang San ",19);
			const P2 = new Person(" Li Si ",20);
			P1.say.call(P2);//{realname: ' Zhang San ', age: 19, say: ƒ, say1: ƒ}
			P1.say1.call(P1);//{realname: ' Zhang San ', age: 19, say: ƒ, say1: ƒ}
			

Simple application ：

Simple click event , reflect this The direction of

	<button id="btn"> Did not click </button>

	<script>

		let btnObj = document.querySelector("#btn");
		let flag = false;

		btnObj.addEventListener("click", function () {
			flag = !flag;
			if (flag) {
				setTimeout(() => {
					this.innerText = " Clicked ";// arrow this Point to context 
				}, 3000)
			} else {
				this.innerText = " Did not click "; // caller 
			}

		})

	</script>

Two 、 Three point operator

1. Function passes indefinite parameters , Verify the length of the array .

			function demo(a,...b){
		    console.log(a,b);//b Is an array  2,3,4,5
			}
			demo(1,2,3,4,5);

2. Use with deconstruction

   let [a,...b] = [1,2,3,4,5,6]
   console.log(a,b);//1,[2,3,4,5,6]

3. Use with array deconstruction Function to object

      function demo({username,password}){
            console.log(username,password);
        }
        demo({username:'root',password:'123456'})

4. Expand

1. use ... The output array

        const arr = [1,2,3];
        console.log(...arr);

2. Merge array

        const arr1 = [1,2,3];
        const arr2 = [3,4,5];
        const arr3 = [...arr1,...arr2];
        console.log(arr3);

3. Turn the class array into a real array

    <div>1</div>
    <div>2</div>
    <div>3</div>
 <script>
        let div = document.querySelectorAll('div');
        const arr = [...div];
        console.log(arr);

        let str = '12345';
        console.log([...str]);
  </script>

4. Copy the array

     let arr1 = [1,2,3];
     let arr2 = [...arr1];
     console.log(arr1,arr2);

5. practice

	            let demo=(a,b)=> a+b;
		    	
		    	const arr1 = [1,2];
		    	const arr2 = [4,5];
		    	
		    	console.log(demo(...arr1));//3
		    	console.log(demo(...arr2));//9