ES6语法的简单示例

一、let声明变量
<script>
    {
        var a  = 10
        let b  = 11
    }
    //var 声明的变量没有局部作用域
    //let 声明的变量  有局部作用域
    console.log(a)//10  
    console.log(b)//ReferenceError: b is not defined
 
    //var 可以声明多次
    //let 只能声明一次
    var m = 1
    var m = 2
    let n = 3 
    let n = 4
    console.log(m)//2
    console.log(n)//Identifier 'n' has already been declared
</script>
二、const声明常量(只读变量)
<script>
    //const 1、声明之后不允许改变    
    const PI = 3.1415926
    console.log(PI)// 3.1415926
    PI = 3.14//Assignment to constant variable.
    //2、一但声明必须初始化,否则会报错
    const Max;//Missing initializer in const declaration 未付初始值
</script>
三、解构赋值
解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。
在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。
<script>
    //1.数组  传统赋值方式
    let a = 1 ,b =2 ,c = 3 ;
    console.log(a,b,c);//1 2 3
    //ES6 赋值方式
    let[e,f,g]=[4,5,6];
    console.log(e,f,g);//4 5 6
 
    //2.对象 传统方式
    let user={name:"Jack",age:15};
    let userNmae = user.name;
    let userAge = user.age;
    console.log(userNmae);//Jack
    console.log(userAge);//15
    //Es6赋值方式
    let {name,age} = user;////注意:结构的变量必须是user中的属性
    console.log(name);//Jack
    console.log(age);//15
</script>
 
四、模板字符串
模板字符串相当于加强版的字符串,用反引号 `,除了作为普通字符串,还可以用来定义多行字符串,还可以在字符串中加入变量和表达式。
<script>
    //1、多行字符串
    let str1 = `Hey,
    What is your name?`;
    console.log(str1);
        //Hey,
        //What is your name?
    //2、字符串插入变量和表达式。变量名写在 ${} 中,${} 中可以放入 JavaScript 表达式。
    let name = `Tom`
    let age = 18
    let str2  = `Bro,My Name is ${name},I am ${age+1} years old next year!`
    console.log(str2);//Bro,My Name is Tom,I am 19 years old next year!
    // 3、字符串中调用函数
    function f1(){
        return "Just do it!"
    }
    let str3 = `Belive yourself,${f1()}`;
    console.log(str3);//Belive yourself,Just do it!
</script>
五、声明对象简写
<script>
    // 传统方式声明对象
    let name  = "Jay"
    let age  = 18
    let Person = {name:name,age:age}
    console.log(Person);//{name: "Jay", age: 18}
 
    //Es6
    let Person1 = {name,age}
    console.log(Person1);//{name: "Jay", age: 18}
</script>
六、定义方法简写
<script>
    // 传统
    const person ={
        sayHi:function () {
         console.log("Hi"); 
        }
    }
    person.sayHi()//Hi  
    //Es6
    const person1 = {
        sayHi(){//省略了:function
            console.log("Hi");
        }
    }
    person1.sayHi();//Hi
</script>
七、对象拓展运算符
拓展运算符(...)用于取出参数对象所有可遍历属性然后拷贝到当前对象。
<script>
    //拓展运算符(...)用于取出参数对象所有可遍历属性然后拷贝到当前对象。
   // 1、复制对象
    let person = {name:"Jay",age:34}
    let otherOne = {...person }
    console.log(otherOne);// Object { name: "Jay", age: 34 }
    // 2、合并对象
    let name = {name:"Lucy"}
    let age = {age:34}
    let person1  = {...name,...age}
    console.log(person)//{name: "Jay",age: 34}
</script>
八、箭头函数
<script>
    //箭头函数提供了一种更加简洁的函数书写方式。基本语法是:
    //参数 => 函数体
    //传统
   var f1= function (a) {
        return a;
    }
    console.log(f1(1));//1
    //ES6
    var f2 = a=>a
    console.log(f2(3));//3
    // 当箭头函数没有参数或者有多个参数,要用 () 括起来。
    // 当箭头函数函数体有多行语句,用 {} 包裹起来,表示代码块,
    // 当只有一行语句,并且需要返回结果时,可以省略 {} , 结果会自动返回。
    var f3 = (a,b)=>{
        let result = a+b;
        return result;
    }
    console.log(f3(5,5));//10
    var f4 = (a,b)=>a+b;
    console.log(f4(5,5));//10
</script>
 

原文地址:https://www.cnblogs.com/lifengSkt/p/14219834.html