• 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>
     

  • 相关阅读:
    Ruby 2
    Ruby 1
    莱布尼兹:与牛顿争吵了一生的斗士 微积分的奠基人之一―莱布尼茨
    如何实现html页面自动刷新
    css z-index的层级关系
    让网页变灰的实现_网站蒙灰CSS样式总汇
    利用CSS变量实现炫酷的悬浮效果
    离线电商数仓(十四)之系统业务数据仓库数据采集(一)电商业务简介
    离线电商数仓(十三)之用户行为数据采集(十三)采集通道启动/停止脚本
    离线电商数仓(十)之用户行为数据采集(十)组件安装(六)采集日志Flume(二)消费Kafka数据Flume
  • 原文地址:https://www.cnblogs.com/lifengSkt/p/14219834.html
Copyright © 2020-2023  润新知