目录
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页面即可。
代码语言：javascript复制<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（）来调试代码。初学者的时候没关系，不过随着学习的深入，这两种方法就不适合了。实际上这两种方法还是有很多弊端的，我们先来看一个简单的例子。
举例
代码语言：javascript复制<!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()
代码语言：javascript复制<!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（）进行调试。
