【前端基础一】----ES6基础

一、基本知识：
    1.基本概念：全称ECMAScript6.0是JavaScript的一套标准语言
    2.ES6{优点：代码简洁，缺点：浏览器兼容性较差}

二、基本使用：

        1.es6定义变量

<script>
    //es6定义变量
    //js定义变量 var a=1;
    let a=1;
    {//创建代码块定义变量
        var b=10;
        let c=3;//由于使用let有作用范围要求所以在代码块内定义的变量再代码块外无法使用
    }
    console.log(a);
    console.log(b);
    console.log(c);//Uncaught ReferenceError: c is not defined


=============================分割线======================================


    //es6定义变量
    var a=1;
    var a=2;

    let m=10;//使用var可以定义多个相同名称变量，但使用let时不行
    // let m=3;

    console.log(a);
    console.log(m);//redeclaration of let m

</script>

        2.常量定义：

<script>
    //定义常量必须有初始化值，一旦常量被初始化，那么包含再改变
    const PI="3.1415926";
    // PI=3;//报错invalid assignment to const 'PI'

    // const a;//SyntaxError: missing = in const declaration
</script>

        3.解构：

//数组解构=========================================================
<script>
    //传统写法
    let a=3,b=4,c=5;
    console.log(a,b,c);

    //es6写法
    let [x,y,z]=[1,2,3];
    console.log(x,y,z);
</script>

//对象解构========================================================
<script>
    let user={"name":"lixxkv","age":18};

    //传统从对象中获取相应属性值
    let personalname=user.name;
    let personalage=user.age;
    console.log(personalname+"的年龄是"+personalage);

    //es6获取对象中的值
    let {name,age}=user;
    console.log(name+"的年龄是"+age);
</script>

        4.模板字符串：

<script>
    //1.换行
    let str1=`hello
     es6 demo up!!!`;
     //console.log(str1);

    //2.使用表达式获取变量值
    let name="lixxkv";
    let age=18;

    let str2=`hello,${name},age is ${age+1};`;
    console.log(str2);

    //3.方法的调用
    function mymethod(){
        return "mymethod方法已经调用!!!";
    }

    let str3=`demo,${mymethod()}`;
    console.log(str3);

</script>

        5.声明对象：

<script>
    const name="Any";
    const age=18;

    //传统方式定义对象

    const p1={name:name,age:age};
    // console.log(p1);

    //es6写法
    const p2={name,age};
    console.log(p2);
</script>

        6.定义方法：

<script>
    //传统方法
    const personOne={
        sayHi:function(){
            console.log("Hi");
        }
    }

    //调用
    personOne.sayHi();

    //es6写法
    const personTwo={
        sayHi(){
            console.log("Hi,personTwo");
        }
    }
    personTwo.sayHi();


</script>

        7.对象扩展运算：

<script>
    //1.对象的复制
    let personOne={"name":"lixxkv","age":20};
    let personTwo={...personOne};//对象复制
    // console.log(personTwo);//低版本浏览器可能报错

    //2.合并对象
    let nameOne={name:"Anly"};
    let ageOne={age:19};
    let personThree={...nameOne,...ageOne};
    console.log(personThree);

</script>

        8.箭头函数：

<script>
    //传统
    var funOne=function(a){
        return a+1;
    }

    console.log(funOne(1));

    //使用箭头函数
    var funTwo=a=>a+1;
    console.log(funTwo(5));

    var funThree=function(a,b){
        let result=a+b;
        return result;
    }
    
    console.log(funThree(70,7));

    var funFive=(k,v)=>(k+v);
    console.log(funFive(90,9));

</script>