ES6学习——解构赋值、箭头函数

目录

          一、解构赋值

1、数组解构

2、对象结构

3、解构应用

          二、箭头函数

1.基础语法

2.省略写法

3.this全局函数

5.构造函数对象的this

6.apply/call调用时的this

7.箭头函数中的this

 三、练习

---

一、解构赋值

1、数组解构

       ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

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

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

（2）二维数组：依然一一对应

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

（3）省略变量：用逗号隔开中间省略

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

（4）合并数组的值：合并运算符可以展开数组也可合并数组

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

（5）默认值，如果是undefined，默认值生效。

     let [a, b = '2'] = [1, undefined];
     // let [a, b = '2'] = [1, null]; //不生效
     console.log(b); // 2

2、对象结构

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

3、解构应用

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

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

(2)结构函数

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

 二、箭头函数

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);  // 3

2.省略写法

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

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

(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);  // {realname: '张三', age: 19, say: ƒ}
            }
        }
        Person1.say(); 
 
 
//实例2：
        const Person2 = {
            realname: "张三", age: 19,
            say: () => {
                console.log(this);
            }
        }
        Person2.say();

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

5.构造函数对象的this

   箭头函数的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后改变按钮文字：按钮被点击，在单击按钮改变文字：点击被取消。

           未点击