美文网首页
第1章ES6初步

第1章ES6初步

作者: C_Z_Q_ | 来源:发表于2020-03-08 20:13 被阅读0次

    目标

    • ES6简介
    • ECMAScript 和 JavaScript 的关系
    • let命令
    • 块级作用域
    • const命令
    • 字符串的扩展-模板字符串

    ES6简介

    ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

    ECMAScript 和 JavaScript 的关系

    类似接口和实现类的关系

    ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 Jscript 和 ActionScript)。日常场合,这两个词是可以互换的。

    let命令

    特点:1、在块级作用域内有效 2、不存在变量提升 3、不可被重复定义

    1、在块级作用域内有效的例子

           <script type="text/javascript">
            {
                var a = 1;
                let b = 2;
            }
            console.log(a);
            console.log(b);
        </script>
    
    
    image

    2、不存在变量提升

        <script type="text/javascript">
            console.log(a);
            var a=10;
            console.log(b);
            let b=20;
        </script>
    
    
    image

    3、不可以被重复定义

        <script type="text/javascript">
                    let username="a";
                    let username="b";
                    console.log(username);
        </script>
    
    
    image

    上面代码中的LET改成var是允许的

    块级作用域

    为什么需要块级作用域?
    ES5只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。
    一种场景,内层变量可能会覆盖外层变量。

        <script type="text/javascript">
            var tmp = new Date();
            function f() {
              console.log(tmp);
               if (false) {//此处如果是true是没问题的
                var tmp = "hello world";
              } 
            }
            f(); // undefined
        </script>
    
    

    上面代码中,函数f执行后,输出结果为undefined,原因在于变量提升,导致内层的tmp变量覆盖了外层的tmp变量。

    const命令

        <script type="text/javascript">
            const i=120;
            i=123;
            console.log(i);
        </script>
    
    
    image

    字符串的扩展-模板字符串

    作用:简化字符串拼接,
    写法:变量的写法类似el表达式 ${},最外面不用单引或者双引,用`(tab键上面的字符)

        <script type="text/javascript">
            let obj={username:"张三",age:18};
            let str=`我的名字叫${obj.username},我今年${obj.age}岁`;
            console.log(str);
        </script>
    

    相关文章

      网友评论

          本文标题:第1章ES6初步

          本文链接:https://www.haomeiwen.com/subject/zbvjdhtx.html