一、解构赋值

1.数组结构

(1)数组的解构赋值（字符串与其同理）

let [a, b, c] = [1, 2, 3];
        console.log(a);
        console.log(b);
        console.log(c);

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

(2).二维数组:依然一一对应

let [a,[b,c],d] = [1,[2,3],4];
	    console.log(a,b,c,d);

(3)省略变量:用逗号隔开中间省略变量

let [a,,c] = [1,2,3];
	     console.log(a,c);

(4)合并数组的值:合并运算符可以展开数组也可合并数组

			    let [a,...b] = [1,'a','b','c'];
			    console.log(b);
			    console.log(...b);

(5) 默认值:如果是undefined 默认值生效

let [a,b='2'] = [1,undefined];
 console.log(b);

2.对象结构


        let Person = { realname: "张三", age: 19 };
        let { realname: myrealname, age, height = 173 } = Person;//重命名
        console.log(myrealname, age, height);

注：

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值，否则解构失败就undefined。

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

4.解构应用

(1)变量值交换：交换a,b变量的值

        let a = 1;
        let b = 2;
        [b, a] = [a, b];
        console.log(a, b);

(2)结构函数

        function func() {
            return [1, 2, 3, 4];
        }
        let [a, b, c, d] = func();
        console.log(a, b, c, d);

二、箭头函数

1.基础语法

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

Const myFun = () => { } ;//把函数赋值给myFun

原js写法：

function sum(a,b){
  return a+b;
  }
  sum(1,2);

箭头函数写法：

const sum = (a,b)=>{
	return a+b;
	}
let res =  sum(1,2);
console.log(res);

2.省略写法

(1)简写:代码块只有一句话省略{}和return


const sum = (a,b)=> a+b;
let res =  sum(1,2);
console.log(res);

(2)只有一个参数小括号可以省略

const sum = a => a+3;
let res =  sum(1);
console.log(res);

3.this全局函数

(1)普通函数this 跟调用者有关

function global(){
 	console.log(this);
    } 
global();

this指向全局，所以打印为window。

(2)箭头函数的this 箭头函数this this静态根据上下文的this

 const global = ()=>{
 	console.log(this);
 }
 global();

因为没有上下文，所以这里的this依然为全局的。

4.对象方法里的this

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


//实例2：
        const Person2 = {
            realname: "张三", age: 19,
            say: () => {
                console.log(this);
            }
        }
        Person2.say();

如果函数作为对象的方法调用，this指向的是这个上级对象，即调用方法的对象。所以实例一this指向realname,实例二指向window。

5.构造函数对象的this

        function Person(realname, age) {
            this.realname = realname;
            this.age = age;
            this.say = () => {
                console.log(this);
            }
        }
        const P1 = new Person("张三", 19);
        P1.say();

构造函数中的this指向新创建的对象本身。

6.apply/call调用时的this

call(thisObj，Object) 调用一个对象的一个方法，以另一个对象替换当前对象。

const person1 = { name: "张三", age: 18 };
        var name = "李四", age = "19";

        function myfun1() {
            console.log(this.name, this.age);
        }
        myfun1();//对象是Windows
        myfun1.call(person1);//对象改变为person1

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

7.箭头函数中的this

箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。

箭头函数中的this指向是它所定义（声明）的位置，可以简单理解成，定义箭头函数中的作用域的this指向谁，它就指向谁。

        const obj = { name: '张三' }
        function fn() {
            console.log(this);//this 指向 是obj对象
            return () => {
                console.log(this);//this 指向 的是箭头函数定义的位置，那么这个箭头函数定义在fn里面，而这个fn指向是的obj对象，所以这个this也指向是obj对象
            }
        }

        const resFn = fn.call(obj); //{ name: '张三'} 
        resFn();//{ name: '张三'}

小练习

单击按钮2s后改变按钮文字：按钮被点击，在单击按钮改变文字：点击被取消。

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
</head>


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

	<script>

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

		btnObj.addEventListener("click", function () {
			flag = !flag;

			if (flag) {
				setTimeout(() => {
					console.log(this);
					this.innerText = "按钮被点击了";
				}, 2000)
			} else {
				this.innerText = "点击被取消";
			}

		})

	</script>
</body>

</html>

ES6语法（解构赋值、箭头函数）