ES6从入门到精通-day01

发布于:2022-11-09 ⋅ 阅读:(10) ⋅ 点赞:(0) ⋅ 评论:(0)

目录

1.1、ES6是什么?

1.1.1ES6简介

1.1.2本专栏的适用版本

1.2学前准备

1.2.1教程说明

1.2.2环境说明

1.3console.log

 


1.1、ES6是什么?

1.1.1ES6简介

        JavaScript这门语言是由 ECMAScript、DOM、BOM这三大部分组成的(这句话非常重要)。大多数初学者使用的都是ES5的语法。本专栏介绍的ES6( 见图),指的是ES5的下一个版本。由于ES6版本发布于2015年,所以人们也把它叫作 "ES2015”或"ECMAScript 2015”这几种叫法指的都是ES6。这几种叫法小伙伴们还是要知道的,因为很多地方使用的都是这些叫法。

        以及现在主流的前端框 架如 Vue.js、 React.jS、Anguiar.s服务端开发的Nodejs, 般使用ES6的语法来进行开发。可以这样说,如果你打算从事前端开发的话,那么ES6是你必须掌握的一门基础技能。

 

1.1.2本专栏的适用版本

        这本专栏虽然叫《 ES6从入门到精通》,但内容却不仅限于ES6。本专栏根据实际情况增了ES7-ES12(也就是ES2016-ES2021)方面的知识点。
        可能小伙伴们会问: “既然ES12都出来了,为什么很多地方还是叫它ES6, 而不是ES12呢?其实原因是这样的:ES6是一个里程碑式的版本,它相对于ES5的变化最大, 增加的内容也最多, 所以  从ES5到ES6是一次大的版本更新。而ES7-ES12是小版本更新,每次只增加了一点点内容。因此很多时候, 我们都是笼统地把ES6-ES12叫叫作ES6。
        在本专栏中, 我们不再区分哪些是ES6新增的内容, 哪些是ES7新增的内容,一律视为ES6新增的内容。实际上,区分这几个版本,没有任何实际的意义。

1.2学前准备

1.2.1教程说明

        在学习ES6之前,小伙伴们一定要对ES5的语法非常熟悉才行,不然学起来会有一定的难度。我们至少要对ES5中对象的各种操作、类的定义与继承、异步编程等有一定的了解, 因为很多ES6新语法是建立在ES5的基础上的。 如果你发现ES6有些地方很难理解, 那么很可能就是你的ES5基础不扎实, 这个时候就应该复习一下ES5的语法了。
        本专栏不是一本大而全的“字典” 而是只会介绍最常用的知识点, 讲最精华的内容分享给小伙
伴们。对于在实际开发中用得比较少的知识点, 本专栏都是一笔带过,尽量减少小伙伴们的记忆负担。
         一味追求大而全的知识, 只能称之为“字典” 并不适合真正的入门学习。因为,没有谁题意抱着
本“字典”来学习,对吧?
        对于初学ES6的小伙伴,这里有一个非常重要的建议:不要一上来就去学习三大框架。因为这些框架都是采用ES6新语法来编写的。

1.2.2环境说明

        如果小伙件们之前看过其他的ES6教程,可能会发现绝大多数救程一上来部是先配置Babel 环境,接看使用Babel来将ES6代码编#成ES5代码,最后两#编译后的ES5代码在测##中运行。这样就容#小伙伴们造成一种错搅,部就层ES6代码必须经过Babel编译成ES5代码, 才能在浏览器上运行。
        现在主流浏览器如Chrome、 Edge、Firefox等的最新版本,都已经支持绝大部分的ES6语法了。也就是说, 不需要使用Babel 编译,就可以直接在测览器中运行ES6代码。但是实际上使用Babe/还是有必要的, 主要是一些低版本浏览器并不一定支持ES6语法。不过在实际开发中,大多数德况下我们并不需要手动配置Babel环境,因为Vue或React等的期手架工具会自动帮我们配置好。

        今天就开始使用下一代的JavaScript 语法编程吧!

        对于接下来要学习的新语法,我们是可以像平常写JavaScript那样,直接在浏览器中运行的。在本专栏的例子中, 我们采用的都是下面的代码结构。如果小伙伴们需要运行本专栏例子的代码,直接把ES6代码放在script标签内, 然后在浏览器中运行这个HTML页面即可。

<IDOCTYPE html><html>
<head>
<meta charset-"utf-8" />
<title> </title>
<script>
//这里是你的ES6代码
</script>
</head >
<body></body>
</html>

        一定要记住,在这专栏中,几乎所有代码都可以直接运行,不需要经过Babel编译。对于Babel的使用,小伙伴们暂时也不需要了解,等学了webpack再深入了解也不晚。

1.3console.log

        很多初学者都喜欢用document.write()或者alert()来调试代码。初学者的时候没关系,不过随着学习的深入,这两种方法就不适合了。实际上这两种方法还是有很多弊端的,我们先来看一个简单的例子。

举例

<!DOCTYPE htn1>
 <html>
 <ead>
 <meta charset="utf-8">
 <title></title>
 <sCript>
 document.write (window);
 </script>
 </head>
 <body>
 </body>
 </html>

 浏览器效果如图所示:

       

 分析:如果将document.write(window)换成alert(write),此时弹出的对话框如图所示:

         从上文可以看出,不管是document.write()还是alert(),对于window这种复杂的对象,都只会输出一个简单的提示内容。接下来。我们再看一下使用console.log()调试代码的效果是怎样的。

举例:console.log()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
         console.log(window);
    </script>
</head>

<body>

</body>

</html>

控制台输出如图所示:

 分析: console.log()是在控制台输出内容,那么如何查看控制台输出的内容呢?我们可以使用键盘上的F12键打开开发者模式,或者单击鼠标右键,然后选择“检查”选项,如图所示:

 其中单击Window左侧的小三角,就可以看到Window对象的详细信息。如下图所示:

 在实际开发中,如果想要输出内容来进行调试,一般使用console.log(),而不是使用document.write()或者alert()。本专栏所有例子都是使用console.log()进行调试。