深入解读ES6系列(一)

2019/04/10 10:10
阅读数 4

ECMAScript 6(ES6)简介

前言:

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

目录:

  1. 变量
  2. 函数
  3. 数组
  4. 字符串
  5. 面向对象
  6. Promise
  7. generator
  8. 模块化

简介:

  • 在开张之前我觉得有必要要知道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<br/>因为吵得太厉害,所以ES 3.1代号为Harmony(和谐)
2009.12 ES 5.0 ES 5.0正式发布<br/>同时公布了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预计发布正式版<br/>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>

a

  • 第二点就不解释了你想想π=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>

到这里,变量完事儿~ ———————————————————————分割线—————— 下节说函数之后的内容

放上我的总博客CSDNGitHub,主要博客博客园pipe

原文出处:https://www.cnblogs.com/Three-Z/p/QQ--269571627.html

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部