ES6复习（3）

ES6复习（3）

一、rest运算符与spread运算符（...）

1 、rest（剩余参数运算符...）

出现在函数声明的形参处，作用是收集剩余（全部）实参并转换为数组

// rest 剩余参数运算符，用于在函数形参声明处的最后一位，作用收集剩余（全部）参数并转换为数组
  // 可用来代替arguments对象
  function fn(a,...b){
    console.log( arguments );
    console.log( b ); //[2,3,4]
  }
  fn(1,2,3,4)

2、spread(扩展运算符...)

扩展运算符作用，将结构化的数据拆分为逗号分隔的参数列表，类似于剩余参数运算符的逆运算

// spread 扩展运算符，作用是将结构数据（数组，对象）转换为单个的逗号分隔参数列表。类似rest的逆运算。
  console.log( ...[1,2,3,4] );
  // 应用场景1：拆分、合并数组(对象)
  let arr1 = [1,2,3];
  let arr2 = [4,5,6];
  let arr3 = [...arr1,...arr2];
  console.log( arr3 );
  let obj1 = {name:"jack",age:19};
  let obj2 = {sex:"男"};
  let obj3 = {
    ...obj1,
    ...obj2
  } 
  console.log( {...obj1} );
  // 应用场景2：用于函数传参
  console.log(Math.max(...[2,3,6,9,0])); 

二、函数的扩展

1、 箭头函数

ES6为了简化函数声明的语法，允许使用箭头（=>）声明函数

1）将function关键词替换为=>
2）假如函数中只有一行代码，则可省略大括号
3）假如函数中只有一行代码，而是是return值，则return也可省略
4）假如过函数只有一个形参，圆括号也可省略。
5）特殊情况：假如函数中只有一行代码，而且是return一个对象，为了避免产生歧义，需要（）包起来

var fn = (a,b) => ({x:a,y:b});
  console.log( fn(1,2) );

箭头函数中this指向

普通函数中this指向规律：

1） 在全局函数中（定时器的处理函数中）this 指向 window

2）在事件处理函数中this指向事件源

3）在对象的方法中this指向对象本身

4）在call() /apply() 中可以改变this的指向

箭头函数中this指向规律：

1）箭头函数一旦声明完成，this指向就固定了；并且与call() / apply() 无关

2）箭头函数中this用于指向其外部环境（函数内或全局下）

// 箭头函数中this永远指向其外部环境（只有函数内或全局下可称为环境）
  function Person(){
    let fn = ()=>{
      console.log( this );
    }
    fn();
  }
// 当 Person作为普通函数调用时，Person函数内部this指向window，那么箭头函数内this也指向window
  Person();
  // 当 Person作为构造函数调用时,Person函数内部this指向实例对象，那么箭头函数内this也指向实例对象
  new Person();

let p1 = {
    title:"jack",
    op:{
      title:"rose",
      go(){
        // console.log(this);
        return {
          play:()=>{
            console.log( this.title ); // this == rose
          }
        }
      }
    }
  }

三、ES6面向对象

// ES6面向对象：
  // 使用class 关键词声明一个类
  class Person{
    // 构造函数，如果不写，js引擎也会隐式构造一个。
    // 构造函数在实例化时会自动运行。作用用来初始化对象。也可将实例化后需要自动运行的函数放在构造函数内执行。
    constructor(name,sex){
      this.name = name;
      this.sex = sex;
      this.say();
    }
    // 普通成员函数（方法）
    say(){
      console.log( `我是${this.name}`);
    }
    // 静态函数。静态函数不参与继承，实例化对象无法调用。只能使用 类名.静态方法名() 来调用。
    static go(){
      console.log("我是静态方法");
    }
  }
  // 静态方法调用, 可以为编程增加灵活性。
  Person.go();
  // Object.assign();
  // Object.keys(obj)
  // Array.of()

  let p1 = new Person("张三","男");
  let p2 = new Person("李四","女");
  console.log( p1,p2 );
  // 所有实例对象共享原型对象。
  console.log(p1.__proto__ == p2.__proto__);