ES6新增语法

【逆战班】

let 定义变量

特点：1.let 定义的变量,不会进行预解析。

           2.let 不能重复定义变量名称,一个变量名称只能定义一次。

           3.let声明的变量只有在当前作用域有效。

           4.一般使用 const 定义 基本数据类型

const 定义变量

在JavaScript中往往,管const定义的变量,称为常量。

特点：1.const定义的变量,必须赋值，且不能被重复赋值,数据一经定义,不能更改。

           2.const定义的变量名称,也不能重复。

           3.const声明的变量只有在当前作用域有效。。

           4.一般使用 const 定义 引用数据类型。

箭头函数

所谓的箭头函数，是函数的另一种语法形式

const fun = function(){}     普通函数

const fun = ()=>{}             箭头函数

将匿名函数的部分,从 function(){} 写成 ()=>{} 的形式       

 const oDiv = document.querySelector('div');

 

        // 普通函数

        oDiv.addEventListener('click' , function(){

            console.log(123)

        })

 

        // 箭头函数

        oDiv.addEventListener('click' , ()=>{

            console.log(123);

        })

 如果函数只有一个参数,可以不写()

const fun = function(e){}     普通函数

const fun = e => {}              箭头函数        

// 只有一个参数，可以不写(),直接定义一个参数

        oDiv.addEventListener('click' , e=>{

            console.log(e);

        })

特点：在箭头函数中的this指向是父级程序的this指向，如果父级程序有this指向,那么箭头函数指向的就是父级程序的this，如果父级程序没有this指向,那么指向的就是window

数组的解构语法

就是数组的另一种使用调用方法，可以不通过 []语法,不通过索引下标,来调用使用数组中的数据，用于将数组中的数据,一一对应的赋值给变量       

 const arr = ['北京','上海','广州','重庆','天津'];

        // 将 arr 中的数据,调用出来,给 左侧内容进行一一对应的赋值

        let [str1,str2,str3,str4,str5] = arr;

        console.log(str1,str2,str3,str4,str5);

 

        // 结构多层的数组

        // 二维数组

        const arr2 = ['北京','上海',['a','b','c']];

        let [s1,s2,[s3,s4,s5]] = arr2

        console.log(s1,s2,s3,s4,s5);

对象的解构语法

之前对象数据的调用,通过.语法或者[]语法,配合属性来调用操作数据，ES6中可以使用解构语法来调用操作数据        

const obj = {

            name:'张三',

            age:18,

            sex:'男',

            addr:'北京',

            phone:123456,

        }

        // 将对象中,属性是name的属性值,调用,赋值给name变量名称

        // {}中定义的属性,一定是对象中具有的属性

        // 变量名称,就是name也就是属性名称

        let {name} = obj;

        console.log(name);

 

        // 解构语法之定义其他名称

        // 在对象obj中,找name属性,将对应的数值数据,赋值给变量别名userName

        // 通过userName来调用使用数据

        // 只能一次解构一个数据,不能一次性的做一一对应的赋值

        let {phone:userName} = obj;

        console.log(userName);

 

        // 多级对象的解构

        const obj2 = {

            name1:{

                name2:'张三'

            }

        }

        let {name1 : {name2}} = obj2; 

        // 只有name2解构对应张三,name1没有内容

        console.log(name1); 

        // 如果只是 let {name1} = obj2

        // name1存储的是 对象 {name2:'张三'}

展开运算符

...数组

将数组中的数据,展开来使用，在函数的实参中使用       

 // 有多个形参

        function fun(num1,num2,num3,num4,num5){

            console.log(num1,num2,num3,num4,num5)

        }

        // 执行时就要输入多个实参

        fun(100,200,300,400,500);

 

        // 现在有一个数组,存储多个数据

        const arr = [1,2,3,4,5];

        fun(arr[0],arr[1],arr[2],arr[3],arr[4]);

        // 展开运算符,将数组中的数据展开使用

        // 将arr中的数据,展开,对形参进行一一对应的赋值

        // 通过数组,给多个形参赋值更简单

        fun(...arr);

 

合并运算符

在ES6中也是用（…）来表示合并运算符，在函数的形参中使用,作用:将赋值的所有的实参,都是以数组的形式,存储在形参中       

 // 合并运算符

        // 不管实参有几个,都以数组的形式,存储在形参中

        function fun1(...arr){

            console.log(arr);

            // 调用存储在形参arr中的实参,必须用过[]语法,索引下标

            // 或者 循环遍历 获取

        }

        // 输入的所有的实参,都会以数组的数据的形式,存储在形参arr中

        fun1('a','b','c','d','e',1,2,3,4,5);

 

        // 在 普通函数中,JavaScript定义了一个专门的变量,叫 arguments

        // 如果你没有定义形参,所有的实参都会以数组的形式存储在这个变量中

        // 作用于合并运算符相同

        // 但是 箭头函数中 没有 arguments 这个变量

        // 必须使用 ...形参 合并运算符的形式 来存储实参

 

        // 没有形参,JavaScript自动在arguments中,以数组的形式存储实参

        function fun2(){

            console.log(arguments);

        }

        Fun2(1,2,3,4,5,6,7);

 class类

ES6中,新增语法形式 class 类，是一种新的定义构造函数的语法，作用和原理与ES5语法完全相同，只是语法格式和书写方式不同。简而言之ES5用function定义类，ES6用class定义类，class的本质是function，ES6中的类只是语法，它并没有改变ES5下类实现的本质。

ES5和ES6语法对比：       

 // ES5语法

        function Fun1(name,age){

            this.name  = name;

            this.age = age;

        }

        Fun1.prototype.f1 = function(){

            console.log(this.name , this.age);

        }

 

        

 

        // ES6语法  class

        class Fun2{

            constructor(name,age){

                this.name = name;

                this.age = age;

            }

 

            f2(){

                console.log(this.name , this.age);

            }

        }

 

        const obj1 = new Fun1('张三',18);

        const obj2 = new Fun2('李四',20);

 

        console.log(obj1);

        console.log(obj2);