【前端基础一】----ES6基础_前端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>