2.前端技术ES6学习（基础语法）

2.前端技术ES6学习

2.1 什么是ES6？

• ECMAScript6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言
• ECMAScript6就是一套标准 是Script语言的标准

2.2 ES6语法学习

2.2.1 let作用范围学习

• let的作用是局部作用范围

<script>
    //es6如何定义变量，定义变量的特点 使用let进行定义
    //var 定义变量和let定义变量的区别 let有作用范围
    //1.测试就是在代码块里边定义变量在外面取值 测试作用域
    {
        var a=10;
        let b=20;
    }
    //2.在代码块外输出数据
    console.log(a);
    console.log(b); //Uncaught ReferenceError: b is not defined

</script>

2.2.2 let定义变量规则

• let只能定义一次变量

<script>
    var a=10;
    var a=12;

    let c=10;
    let c=20;

    console.log(a);
    console.log(c); //Uncaught SyntaxError: Identifier 'c' has already been declared

</script>

2.2.3 const常量定义规则

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

    PI=2;   //Uncaught TypeError: Assignment to constant variable.
    //常量一经定义不能改变，且定义常量需要初始化
</script>

2.2.4 解构赋值

• 数组解构

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

    //es6写法
    let [d,e,f] =[4,5,6];
    console.log(d,e,f);
</script>

• 对象解构

<script>
   //传统写法
   let user={"name":"xuan","age":18}
   let name1=user.name
   let age1=user.age
   console.log(name1+"=="+age1)

   //es6写法
   let {name,age}=user
   console.log(name+"=="+age)
</script>

2.2.5 模板字符串 `

• 使用`实现换行
• 在`符号里面使用表达式获取变量值
• 字符串中调用函数

<script>
    //1.使用`实现换行
    let str=`hello,
    es6`
    console.log(str)

    //2.在`符号里面使用表达式获取变量值
    let name="MIke"
    let age=18

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

    //3.字符串中调用函数
    function f(){
        return "have fun"
    }
    let str3=`Game start,${f()}`
    console.log(str3)
</script>

2.2.6 声明对象

<script>
     const name="xuan"
     const age=18
    //传统写法
    const user1={name:name,age:age}
    console.log(user1)

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

2.2.7 定义方法的简写方式

<script>
    //传统定义方法的方式  person1相当于类名 sayHi,sayHello相当于方法名
    const person1={
        sayHi:function(){
            console.log("Hi")
        },
        sayHello:function(){
            console.log("Hello")
        }
    }
    //调用方法
    person1.sayHi()
    person1.sayHello()

    //es6定义方法的方式
    const person2 ={
        sayHi(){
            console.log("Hi")
        },
        sayHello(){
            console.log("Hello")
        }
    }
    person2.sayHi()
    person2.sayHello()

</script>

2.2.8 对象拓展运算符

• 可以联想到java中的可变参数 但是两者不是同一个东西

<script>
   //1.拷贝对象
   let person1 ={name:"xuan",age:18}
   let someone={...person1}
   console.log(someone)

   //2.合并对象
   let age={age:18}
   let name={name:"xuan"}
   let person2={...age,...name}
   console.log(person2)
</script>

2.2.9 箭头函数

• 更java8的lambda表达式相似但是意思不一样
• 箭头相当于return 指向返回值
• 基本写法 参数=>函数体

<script>
   //箭头函数提供了一种更加简洁的函数书写方式

   //1.传统
   var f1=function(a){
      return a
   }
   console.log(f1(2))

   //2.es6写法
   var f2=a=>a
   console.log(f2(2))

   //当箭头函数没有参数或者有多个参数需要用（）括起来
   //当箭头函数有多句返回值语句时 需要加{} 大括号 如果只有一行返回值语句时 {}可省略
   var f3=(a,b)=>{
      let result=a+b
      return result
   }
   console.log(f3(2,4))

   var f4=(a,b)=>a+b
   console.log(f4(6,4))

</script>