ES6常见用法

ES6格式

01-let的作用范围

<script>
    //es6如何定义变量，定义变量特点
    //js的定义： var a = 10;
    //es6的定义:let a=10;
    //1创建代码块
    {
        var a=10
        let b=20
    }
//2代码块里设置，外面输出
console.log(a)
console.log(b) //Uncaught ReferenceError: b is not defined
//let 定义变量有作用范围，代码块内定义，外面不可用，var都可以用

</script>

02-let定义变量的特点

<script>    
    var a =1
    var a =2 

    let m=10
    let m=20
    console.log(a)
    console.log(m)
//Uncaught SyntaxError: Identifier 'm' has already been declared
//let不能多次定义相同变量，var可以

</script>

03-const声明常量

<script>
    //定义常量
    const PI="3.1415"

    //常量值一旦进行定义，则不可以改变
    PI=3
    //Uncaught TypeError: Assignment to constant variable.
    

    //定义常量必须初始化
    const AA
    //Uncaught SyntaxError: Missing initializer in const declaration

</script>

04-数组结构

<script>
    //传统写法
    let a =1,b=2,c=3
    console.log(a,b,c)

    //es6写法
    let [x,y,z]=[10,20,30]
    console.log(x,y,z)

</script>

05-对象结构

<script>
    //定义对象
    let user={"name":"lucy","age":20}

    //传统从对象获取里面的值
    let name1=user.name
    let age1=user.age
    console.log(name1+"=="+age1)

    //es6获取对象
    let{naem,age}=user
    console.log(name+"**"+age) 

</script>

06-模板字符串

<script>

    //1使用`符号实现换行
    let str1=`hello,
    es6 demo up!`
    console.log(str1)

    //2在`符号里面使用表达式获取变量值
    let name="Mike"
    let age=20
    let str2=`hello,${name},age is ${age+1}`
    console.log(str2)

    //3在`符号调用方法
    function f1(){
        return "hello f1"
    }

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

</script>

07-声明对象

<script>

    const age=12
    const name="lucy"

    //传统方式定义对象
    const p1={name:name,age:age}
    console.log(p1);
    
    //es6定义变量
    const p2={name,age}
    console.log(p2)
</script>

08-定义方法简写方式

script>

    //c传统方式定义方法
    const person1={
        sayHi:function(){
            console.log("Hi")
        }
    }

    //调用
    person1.sayHi()


    //Es6
    const person1={
        sayHi(){
            console.log("Hi")
        }
    }
</script>

09-对象拓展运算符

<script>
   //1对象复制
   let person1={"name":"lucy","age":20}

   let person2={...person1}
   
   console.log(person2)

   //2合并对象
   let name={name:'mary'}
   let age={age:20}

   let p2={...name,...age}
   console.log(p2)
</script>

10-箭头函数

<script>

    //1,传统方式创建方法
    var f1 =function(m){
        return m
    }
    console.log(f1(2))

    //使用箭头函数
    var f2 =m => m
    console.log(f2(8))



    //2复杂一点方法
    var f3 =function(a,b){
        return a+b
    }
    console.log(f3(1,2))

    var f4=(a,b)=>a+b
    console.log(f4(3,5))
</script>