ES6语法

一、let 和const

块级作用域：被{}包围的部分，块级作用域里声明的变量，外部访问不到

let和const会产生块级作用域，推荐使用，在作用域里面（当写两个for循环，可以都用 let i做循环条件，因为let会产生块级作用域，不会互相影响，）

//越域
{
var a =1;  //var--全局
let b = 2;    //let--局部
}
console.log(a)
console.log(b)  //报错 在作用域外访问不到

//重复声明
var a = 1;
var a = 2;
var a = 'sss';
let b = 1;
let b = 2;    //报错 b已经声明，不能再次声明


//变量提升
console.log(a)   //变量提升 打印出undefind
var a = 1; 
console.log(b)    //报错，b未定义
let b = 1;    

二、解构

//数组解构
let arr = [1,2,3]
let [x,y,z] = arr
console.log(y) //2
//对象解构
let person = {
    name:"张三"，
    age:18,
    email:"1928015321@qq.com"
}
let {name,age} =  person
console.log(name) //张三

三、参数默认值

function add(a,c,b = 5) {
    return a+b+c
}

四、模块化

//user.js
const user = {
    username:"张三"，
    age:18 
}
const isAdult = (age) => {
    if(age >18){
        console.log('成年人')
    } else {
        console.log('未成年人')
    }
}
//export 批量导出
export {user,isAdult}

//main.js
//批量导入
import {user,isAdult} from 'user.js'
...

五、class类

ES6的class类可以看作只是一个语法糖，他的绝大部分功能ES5都可以做到，新的class写法只是让对象原型的写法更加清晰。

1、构造方法

• 按照ES5的方式，用构造函数来实例化一个对象

    <script>
        //手机
        function Phone(brand,price){
            this.brand = brand,
            this.price = price
        }
        //添加方法
        Phone.prototype.call = function(){
            console.log("我可以打电话");
        }
        let Huawei = new Phone('华为',5999)
        console.log(Huawei);   //{brand:"华为",price:5999}
        Huawei.call() //我可以打电话
    </script>

• 用ES6的class方式实例化一个对象

   <script>
        class Phone {
            //使用构造方法添加属性，当使用new关键字的时候，会自动执行constructor方法
            constructor(brand,price){
                this.brand = brand,
                this.price = price
            }
            //使用call添加方法
            call(){
                console.log("我可以打电话");
            }
        }
        let IPhone = new Phone('IPhone',6999)
        console.log(IPhone);   //{brand:"IPhone",price:6999}
        IPhone.call() //我可以打电话
    </script>

2、class静态成员

• ES5静态属性和静态方法写法

      <script>
          function Phone(){
          }
          Phone.name = '手机'
          Phone.change = function(){
              console.log("我可以改变世界");
          }
          let nokia = new Phone()
          console.log(nokia.name); //undefined
          nokia.change() //nokia.change is not a function
      </script>

• ES6静态属性和静态方法写法

  <script>
      class Phone {
          //静态属性
          static name = '手机'
          static change(){
              console.log("我可以改变世界");
          }
      }
      let nokia = new Phone()
      console.log(nokia.name); //undefined
      nokia.change() //nokia.change is not a function
      </script>

  结论：静态方法是属于类的，不是属于实例对象的

3、构造函数继承

• ES5构造函数继承写法

• ES6类继承写法

4、子类对父类方法重写

<script>
      class Phone{
        //构造方法
        constructor(brand,price){
            this.brand = brand
            this.price = price
        }
        //成员方法
        call(){
            console.log('打电话');
        }
      }
      class SmartPhone extends Phone {
        //构造方法
        constructor(brand,price,color,size){
            super(brand,price)
            this.color = color
            this.size = size
        }

        photo(){
            console.log("拍照");
        }
        playGame(){
            console.log("玩游戏");
        }
        call(){
            console.log("视频通话"); 
        }
      }
      const xiaomi = new SmartPhone('小米',799,'黑色','4.7inch')
      xiaomi.call() //视频通话
    </script>