ECMAScript 6(ES6)简介

前言：

哈喽小伙伴们，爱说‘废’话的Z又回来了，欢迎来到Super IT曾的博客时间，我说啦这个月要带的福利，说了更的博客肯定不能水你们，要一起进步学习嘛，今天我就把我学习最经典的Blue的ES6掌握的重点罗列出来，不足的欢迎提问留言。

简介:

在开张之前我觉得有必要要知道ES6到底是个什么东西，ES6全名是ECMAScript 6，在2015年6月正式发布，哇你不要看到2015年觉得知识老旧什么的，要从基础的学习才能去掌握它的发展，而且2015也是ES6的一个转折点，那他是用来干嘛的呢个人觉得就是把你的代码更优美了，更严谨了，更简化了，语言嘛本来就是一种工具，拿官网的话来说ECMScript和JavaScript的关系就是，前者是后者的规格，后者是前者的实现，要看ES6的成长史的建议移步阮一峰写的ES6，兼容性，总之15年的成长史让它成为了现在前端工程师的必备知识，毕竟到现在IE10+、Chrome、FireFox、移动端、NodeJS都是兼容的，不兼容怎么办呢，比如公司要求老版本的IE也要能使用，那你就有两个办法：1.在线转换（个人不推荐），2.提前编译。

// 引入browser.js文件，要我觉得babel==browser.js

<script src="browser.js" charset="utf-8"></script>

<script type="text/bable">

//代码

</script>

总结： ECMAScript和JavaScript
- ECMA是标准，JS是实现
  - 类似于HTML5是标准，IE10、Chrome、FF都是实现
  - 换句话说，将来也能有其他XXXScript来实现ECMA
- ECMAScript简称ECMA或ES

历史版本

时间	ECMA	JS	解释
1996.11	ES 1.0	JS稳定	Netscape将JS提交给ECMA组织，ES正式出现
1998.06	ES 2.0		ES2正式发布
1999.12	ES 3.0		ES3被广泛支持
2007.10	ES 4.0		ES4过于激进，被废了
2008.07	ES 3.1		4.0退化为严重缩水版的3.1 因为吵得太厉害，所以ES 3.1代号为Harmony(和谐)
2009.12	ES 5.0		ES 5.0正式发布同时公布了JavaScript.next也就是后来的ES 6.0
2011.06	ES 5.1		ES 5.1成为了ISO国际标准
2013.03	ES 6.0		ES 6.0草案定稿
2013.12	ES 6.0		ES 6.0草案发布
2015.06	ES 6.0		ES 6.0预计发布正式版 JavaScript.next开始指向ES 7.0

ES6变量

var与let、const对比：

var大家不陌生吧，声明变量用的，既然这么熟了直接对比它的缺点吧：
- var典型三大不足
  - 可以重复声明
  - 无法限制修改
  - 没有块级作用域
- let和const的优点
  - 不能重复声明
  - const常量能限制修改
  - 有块级作用域

var与let、const示例：

前两点应该很好理解，比如我在公司写一个大型项目，那么多变量，如果用var，万一重复声明了是不是就会直接给我覆盖掉呢？答案肯定啊，这就很坑爹了是不是，let重复声明就直接给你报错，多好简单粗暴。

<script type="text/javascript">

			var a = 1;

			var a = 10;

			alert(a)

		</script>

第二点就不解释了你想想π=3.1415926...你就懂了，主要来说第三个，什么叫块级作用域呢？{...}，这种大括号括起来的就是了，来一个经典的例子，三个按钮点击输出下标。

	<body>

		<script>

			window.onload = function(){

				var abtn = document.getElementsByTagName("input");

				for (var a = 0; a < abtn.length; a++) {

					console.log(a)

					abtn[a].onclick=function(){

						console.log(a)

						alert(a);

					}

				}

			};

		</script>

		<input type="button" value="1" />

		<input type="button" value="2" />

		<input type="button" value="3" />

	</body>

你说输出什么？

对，页面加载a就0,1，2了，然后点击都是3。为啥呢？

闭包

原因是赋值给 onclick 的是闭包，哇，你要问我闭包是个啥？哈，个人建议补一下JS知识，这里附上闭包链接，自己要好好理解哟，闭包也是重要的JS知识掌握点。

然后继续说，这三个闭包在循环中被创建，但他们共享了同一个词法作用域，在这个作用域中存在一个变量a。这是因为变量a使用var进行声明，所以具有函数作用域。当onclick的回调执行时，a的值被决定。由于循环在事件触发之前早已执行完毕,如图打印的0，1，2，变量对象a（被三个闭包所共享）已经指向了abtn的最后一项。所以都是3。

以前怎么解决？用闭包把他包裹起来就是，或者用函数工厂这样就OK了，然后你就会神奇的发现最开始a也打印的0，1，2，但是按钮正常了，原因就是，所有的回调不再共享同一个环境，闭包为每一个回调创建一个新的词法环境。在这些环境中，a 就不再恒定都为3了。

for (var a = 0; a < abtn.length; a++) {

	(function(a){

		console.log(a);

		abtn[a].onclick=function(){

			alert(a);

		}

	})(a) // 马上把当前循环项的a与事件回调相关联起来

}

现在呢？不用这么麻烦，直接最开始的var a = 0; 改成let = 0;就啥事儿没有，你就发现0,1，2很自然的就出来了。这里就相到于开辟了三个代码块，理由也很简单粗暴，因为let是块级作用域。

<script>

	window.onload = function(){

		var abtn = document.getElementsByTagName("input");

		for (let a = 0; a < abtn.length; a++) {

			abtn[a].onclick=function(){

				alert(a);

			}

		}

	};

</script>

到这里，变量完事儿~

———————————————————————分割线——————

都看到这里了，只能说明一点，咱俩真的真的真的很有缘分啊！不点个赞再走嘛，

深入解读ES6系列（一）的更多相关文章

深入解读ES6系列（三）
ES6字符串哈喽小伙伴们,爱说'废'话的Z又回来了,欢迎来到Super IT曾的博客时间,上一节说了函数,解构赋值和数组的五大将,这一节我们继续我们知识的海洋,一起奋斗不秃头!不足的欢迎提问留言. ...
深入解读ES6系列（四）
来自老曾es6的前言: 哈喽小伙伴们,爱说'废'话的Z又回来了,欢迎来到Super IT曾的博客时间,上一节说了字符串,面向对象以及json的知识,这一节我们继续我们知识的海洋,一起奋斗不秃头!不足的 ...
深入解读ES6系列（二）
ES6函数哈喽小伙伴们,爱说'废'话的Z又回来了,欢迎来到Super IT曾的博客时间,上一节说了es6的历史,变量,以及闭包,这一节我们继续我们知识的海洋,一起奋斗不秃头!不足的欢迎提问留言. 今 ...
[js高手之路] es6系列教程 - 对象功能扩展详解
第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...
[js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解
接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般 ...
ES6 系列之 Babel 是如何编译 Class 的(下)
前言 ES5 寄生组合式继承 function Parent (name) { this.name = name; } Parent.prototype.getName = function () { ...
大白话，讲编程之《ES6系列连载》汇总
如果你经历过2,3年前的前端开发,你一定感受过兼容IE6,7的痛苦,一定用过网页三剑客的dreamweaver编写html,面试的时候面试官一定会问你:会用PS切图吗? 刚开始的时候你发现,web前端 ...
es6系列-变量声明
es6系列所有文章都是阅读阮一峰老师的<ES6标准入门>(第2版)所做的读书笔记.方便日后查阅相关基础知识. git地址: https://github.com/rainnaZR/es6- ...
ES6 系列之异步处理实战
前言我们以查找指定目录下的最大文件为例,感受从回调函数 -> Promise -> Generator -> Async 异步处理方式的改变. API 介绍为了实现这个功能,我 ...

随机推荐

微信APP生命周期、页面生命周期
目录小程序的启动流程 app生命周期页面的生命周期页面的生命周期(图) 小程序的启动流程我们画一个图来表示一下,整个小程序的启动流程,我们就知道了: app生命周期执行App()函数也就是注 ...
阿里云Tomcat配置
阿里云Tomcat配置并开放本文可对以下问题提供参考服务器如何配置 Tomcat 配置端口在监听,但是外网无法访问怎么办注意事项: 对于阿里云服务器相对较为特殊,因为阿里云服务器除了需要在系 ...
IOS 7 UITableView cell lines不能靠左解决方法
添加一句:[UITableViewappearance].separatorInset=UIEdgeInsetsZero; 就可以解决啦.
c++ 中的单例类模板的实现方法
1.什么是单例模式在架构设计时,某些类在整个系统生命周期中最多只能有一个对象存在 ( Single Instance ).如超市收银系统,其外观主要由显示器(1个).扫描枪(1个).收款箱(1个)组 ...
用 jQuery 实现表单验证（摘抄）——选自《锋利的jQuery》（第2版）第5章的例题 5.1.5 表单验证
5.1.5 表单验证表单(form)作为 HTML 最重要的一个组成部分,几乎在每个网页上都有体现,例如用户提交信息.用户反馈信息和用户查询信息等,因此它是网站管理者与浏览者之间沟通的桥梁.在表单中 ...
Day1T3小w的魔术扑克——图论
为什么不搞\(T2\)??? 因为我太菜了,那题我是真的搞不出来题目描述链接:https://ac.nowcoder.com/acm/contest/1100/C 来源:牛客网小\(w\)喜欢打 ...
java实现QQ、微信、轰炸机，撩妹，抖图功能，轻松自如
今天交大家一个很牛的功能,让你朋友服你,他不扶你你来找我. 打游戏被骂,骂不过你来找我,我们有神器,直到他怕了为止. 废话少说,代码如下,动手,干就完了乞丐版如下参考连接:Java实现QQ微信轰炸 ...
是的，GitHub APP 终于上线了
是的,全球最大程序员社交网站的 App 今天正式上线了,早在 GitHub 2019 开发者大会说要出的客户端,那会儿还需要申请. 兴致勃勃去申请了,然后就是等,这一等就是四五月,黄花菜都凉了,今天终 ...
angular 项目中遇到rxjs error TS1005:';'
因为rxjs的版本问题,只需要在package.json 中将依赖的 rxjs:'^6.00' 改为 rxjs'6.00', 然后执行 npm update 更新下rxjs的依赖版本即可解决
Celery框架的基本使用方法
一. Celery简介 Celery是一个简单.灵活且可靠的,处理大量消息的分布式系统,专注于实时处理的异步任务队列,同时也支持任务调度. Celery的架构由三部分组成,消息中间件(message ...

深入解读ES6系列（一）