ES6中的语法

ES6语法

• • • let定义变量有作用范围，var定义变量无作用范围
    • var可以声明多次，let只能声明一次
    • const定义常量
    • 数组解构
    • 对象解构
    • 模板字符串
    • 声明对象简写
    • 定义方法的简写方式
    • 对象拓展运算符
    • 箭头函数

let定义变量有作用范围，var定义变量无作用范围

<script>
    //es6如何定义变量，定义变量特点
    //js定义：var a = 1;
    //es6写法定义变量，使用关键字 let let a = 10;
    //let定义变量有作用范围
    //var定义变量无作用范围
    //1.创建代码块，定义变量
    {
        var a = 10
        let b = 20//Uncaught ReferenceError: b is not defined
    }
    //2.在代码块，外面输出
    console.log(a)
    console.log(b)
</script>

输出结果

var可以声明多次，let只能声明一次

<script>
    var a = 1
    var a = 2

    let m = 10
    let m = 20

    console.log(a)//2
    console.log(m)//Identifier 'm' has already been declared
</script>

输出结果：

const定义常量

声明后不许改变并且一旦定义必须要初始化

<script>
    //定义常量
    //1.声明后不许改变
    const PI = "3.1415"
    PI = 3//Assignment to constant variable.
    //2.一旦定义必须要初始化
    const AA//Missing initializer in const declaration
</script>

数组解构

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

对象解构

<script>
    //定义对象
    let user = {name : 'Helen', age : 18}
    //传统从对象里面获取值
    let name1 = user.name
    let age1 = user.age
    console.log(name1,age1)

    //ES6获取对象值
    let {name,age} = user //注意结构中的变量必须是user中的
    console.log(name,age)
</script>

模板字符串

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

</script>

	//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>
    const age = 12
    const name = "lucy"

    //传统方式定义对象
    const p1 = {name : name,age : age}
    console.log(p1)

    //es6定义变量
    const p2 = {name,age}
    console.log(p2)
</script>

定义方法的简写方式

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

    //调用
    person1.sayHi()//"Hi"

    //ES6
    const person2 = {
        sayHi(){
            console.log("Hi")
        }
    } 

    //调用
    person2.sayHi()//"Hi"
</script>

对象拓展运算符

拓展运算符(…)用于取出参数对象所有可遍历属性然后拷贝到当前对象

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

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

箭头函数

基本语法：参数=>函数体

箭头函数多用于匿名函数的定义

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

    //ES6
    var f2 = a => a
    console.log(f2(1))

    //当箭头函数没有参数或者有多个参数，要用()括起来
    //当箭头函数有多行语句，用{}包裹起来，表示代码块
    //当只有一行语句，并且需要返回结果时，可以省略{}，结果会自动返回
    var f3 = (a,b) => {
        let result = a + b
        return result
    }
    console.log(f3(6,2))//8

    //前面代码相当于：
    var f4 = (a,b) => a+b
</script>