JavaScript基础（五）——ES2015（ES6）基础语法

一、变量（let）

1、块级作用域

    <script>
        {
            var str = "hello world var";
        }

        console.log(str);
    </script>

    <script>
        {
            let str = "hello world let";
        }

        console.log(str);
    </script>

输出如下：

分析：

let的作用域，只在代码块内。 

2、不存在变量提升

    <script>
        console.log(str);
        var str = "hello world var";
    </script>

    <script>
        console.log(str);
        let str = "hello world let";
    </script>

输出如下： 

分析：

使用var定义的变量，显示的结果为：undefined。 

使用let定义的变量，则直接提示未定义。即不存在变量提升。

3、不允许重复声明

可以看到，在写代码的时候，编译都无法通过。

但是，var可以重复声明。

    <script>
        var str1 = "hello";
        var str1 = "hello world";
        console.log(str1);
    </script>

输出如下：

 二、常量

1、使用const定义常量

2、定义之后不可以更改

    <script>
        const a = 10;
        a = 100;
        console.log(a);
    </script>

输出信息如下：

三、 模板字符串

1、支持换行

使用双引号的字符串，不支持在编辑器内换行输入。（会报错）

如图：

使用模板字符串，就不会报错：

    <script>
        let str = `hello
        world`;
        console.log(str);
    </script>

 输出如下：

2、支持嵌入变量

    <script>
        let d = new Date();
        let year = d.getFullYear();
        let month = d.getMonth();
        let date = d.getDate();
        let result = `${year}年${month}月${date}日`;
        console.log(result);
    </script>

输出如下：

  

四、解构赋值

1、数组的解构赋值

    <script>
        let [n, m] = [10, 20];
        console.log(`n:${n},m:${m}`);

        [n, m] = [m, n];
        console.log(`n:${n},m:${m}`);
    </script>

输出如下：

  

2、对象的解构赋值

    <script>
        let {
            name,
            age
        } = {
            name: "xiaoming",
            age: 18
        };

        console.log(`name:${name},age:${age}`);
    </script>

输出如下：

3、通过解构赋值传递参数（对象解构赋值的变种）

    <script>
        let xm = {
            name: "xiaoming",
            age: 18
        };

        function getName1(obj) {
            return obj.name;
        }

        function getName2({name}){
            return name;
        }

        console.log(getName1(xm));
        console.log(getName2(xm));
    </script>

输出如下： 

 分析：

getName2()这个方法，就是通过解构赋值来传递参数的。可以跟getName1()做个对比。

一个是传对象，一个是传需要用到的参数。