ES6新特性

1.解构赋值 [ 掌握 ]

1. 数组解构赋值

   let arr = ['小明',20,'男']
   let [变量, 变量, 变量] = arr;
   

2. 对象解构赋值

   let user = {
       name: '熊熊',
       age: 20,
       fav: '跳舞'
   }
   
   let {
       name,
       fav
   } = user
   

2.扩展运算符 [ 掌握 ]

1. 语法

   ...变量
   

2. 扩展字符串

       let str = 'abcdefg';
       console.log([...str]);//将字符串转为数组
   

3. 扩展数组

   //将伪数组转为真数组 
   function foo() {
       console.log([...arguments]);
   }
   foo(45, 6, 7, 2, 34)
   //将伪数组转为真数组 
   let btn = document.querySelectorAll('button')
   console.log([...btn]);
   

4. 扩展对象

   //合并对象
   const obj3 = {
       name: '大胖',
   }
   
   const obj4 = {
       name: '大刀肉',
       age: 20,
   }
   
   const obj5 = {
       fav: 'rap'
   }
   
   const obj = { ...obj3, ...obj4, ...obj5 }
   
   
   //实现对象浅拷贝
   const obj1 = {
       name: '123',
       age: 20
   }
   
   const obj2 = { ...obj1 }
   

3. 模板字符串

//1.语法
	`${a}`

4.es6对象简洁表示法

1. ES5写法

   const obj = {
       name: name,
       age: age,
       run: function (){
           
       },
       eat: function (){
           
       }
       
   }
   

2. ES6写法

   const obj = {
       name,
       age,
       run(){
           
       },
       eat(){
           
       }
   }
   

5. ES6类

    class 类名{
        //固定的实例属性
        hands = 2;
        ears = 2;

        constructor(name, age){
            this.name = name;
            this.age = age;
        }

        //原型方法
        show(){

        }
        eat(){

        }

        //静态方法: 只能构造函数调用
        static run(){

        }
    }

6. ES6类的继承

    //父类
    class Father {
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }
        show() {

        }
    }


    //子类
    class Son extends Father {

        constructor(name, age, skill) {
            //调用父类构造函数
            super(name, age)

            this.skill = skill;
        }

        eat() {

        }
    }

7.ES6模块化 [ 重点掌握 ]

1. es6模块定义

   1. 一个js文件就是一个模块,它里面封装了一个独立的功能
   2. 模块之间可以相互依赖 (相互的导入和导出)
   

2. 导入和导出

   //方式一
   	导出:
   		export 内容(变量 函数 数组 对象);
   		(可以使用多次)
   	导入: 
   		import {变量,变量} from '模块路径'; 
   
   //方式二
   	导出: 
   		export default {}	
   		(只能使用一次)
   	导入: 
   		import 变量 from '模块路径'