ES6中箭头函数 (=＞)、三点运算符（...）的基本用法和注意事项（this指向）

目录

一、箭头函数

基础语法：

省略写法：

this指向：

1.全局函数下的this

2.对象方法里面的this

3.对像里面的箭头函数this

4.构造函数中的this指向问题

简单应用：

二、三点运算符

1.函数传不定参数，验证数组的长度。

2.与解构使用

3.与数组解构使用 函数传对象

4.扩展

1.用...输出数组

2.合并数组

3.将类数组转为真正的数组

4.复制数组

5.练习

---

一、箭头函数

基础语法：

() =>{} // ():函数 =>:必须的语法，指向代码块 {}:代码块

const realName = () => { } ;//把函数赋值给realName。

例：

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

省略写法：

如果形参或者代码块只有一句可以简写：

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

简写：

const myFun = k =>  k +1;

this指向：

1.全局函数下的this

普通函数与调用者有关

箭头函数的this是静态 根据上下文的this

2.对象方法里面的this

这里的this是指向实例的

	const Person = {
				realname:"张三",age:19,
				say:function(){
					console.log(this);
				}
			}
			Person.say(); //person实例

3.对像里面的箭头函数this

这里的this指向window

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

4.构造函数中的this指向问题

普通的this可以改变实例

箭头函数中的this不会改变，一开始 new 的实例永远就是这个实例

			function Person(realname,age){
				this.realname = realname;
				this.age = age;
				this.say = ()=>{  
					console.log(this);//这个this不会 当时new 实例是谁就是谁
				}
				this.say1 = function(){
					console.log(this);
				}
			}
			const P1 = new Person("张三",19);
			const P2 = new Person("李四",20);
			P1.say.call(P2);//{realname: '张三', age: 19, say: ƒ, say1: ƒ}
			P1.say1.call(P1);//{realname: '张三', age: 19, say: ƒ, say1: ƒ}
			

简单应用：

简单的点击事件，体现this的指向

	<button id="btn">未点击</button>

	<script>

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

		btnObj.addEventListener("click", function () {
			flag = !flag;
			if (flag) {
				setTimeout(() => {
					this.innerText = "已点击";//箭头this指向上下文
				}, 3000)
			} else {
				this.innerText = "未点击"; //调用者
			}

		})

	</script>

二、三点运算符

1.函数传不定参数，验证数组的长度。

			function demo(a,...b){
		    console.log(a,b);//b为数组 2,3,4,5
			}
			demo(1,2,3,4,5);

2.与解构使用

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

3.与数组解构使用 函数传对象

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

4.扩展

1.用...输出数组

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

2.合并数组

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

3.将类数组转为真正的数组

    <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.复制数组

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

5.练习

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