ECMAScript6-基本语法

ECMAScript6基本语法

01-定义变量

<script>
        //var没有作用域 let有作用域
        {
            var a =1;
            let b =2;
        }
        // console.log(a);
        // console.log(b);//b is not defined

        //var可以定义多次  let只能定义一次
        var m=1;
        var m=2;
        let n=10;
        let n=20;
        console.log(m);
        console.log(n);//'n' has already been declared

    </script>

02-定义常量

<script>
        //const定义常量
        //1、定义后不能被改变
        //2、一旦定义，必须初始化
        const PI ="3.1415"

    </script>

03-解构赋值

<script>
        //1、数组解构
        let a = 1, b = 2, c = 3
        console.log(a, b, c)
        // ES6
        let [x, y, z] = [1, 2, 3]
        console.log(x, y, z)

        //2、对象解构
        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>

04-模板字符串

<script>
        //字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
        let name = "lucy"
        let age = 20
        let info = `My name is ${name} ,I am ${age+1}`
        console.log(info)

    </script>

05-定义对象

<script>
        //传统方式定义对象
        const name = "lucy"
        const age = 20
        const user1 = {name:name,age:age}
        console.log(user1)
        //es6
        const user2 = {name,age}
        console.log(user2)

    </script>

06-对象拓展运算符

<script>
        //对象复制
        let person1 = {name: "Amy", age: 15}
        let someone1 = { ...person1}
        //console.log(someone1)

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

    </script>

07-箭头函数

<script>
        //传统方式定义函数
        var f1 = function(a) {
            return a
        }
        console.log(f1(3))

        //es6使用箭头函数定义
        //参数 => 函数体
        var f2 = a => a
        console.log(f2(4))

        //传统方式定义函数
        var f3 = function(m,n){
            return m+n
        }
        console.log(f3(1,2))
        //es6
        var f4 = (m,n) => m+n
        console.log(f3(3,4))
    </script>