脚本宝典收集整理的这篇文章主要介绍了ES6常用知识学习札记,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
转载请注明出处
原文连接 http://blog.huanghanlian.com/article/5c7aa6c7bf3acc0864870f9d
es6 是什么
首先弄明白ECMA和js的关系。ECMA是标准,Javascript是ECMA的实现。因为js也是一种语言,但凡语言都有一套标准,而ECMA就是javascript的标准。 在2015年正式发布了ecmascript6.0,简称ES6,又称为ECMAscript2015。
-
历史
-
ECMAScript和Javascript
-
ECMA是标准,JS是实现
- ECMAScript简称ECMA或ES
-
目前版本
- 低级浏览器主要支持ES 3.1
- 高级浏览器正在从ES 5过度ES 6
- 历史版本
时间
ECMA
JS
解释
1996.11
EC 1.0
JS稳定
Netscript将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/>因为吵得太厉害,所以ES3.1代号为Harmony(和谐)
2009.12
ES 5.0
ES5正式发布<br/>同时公布了JavaScript.next也就是后来的ES6.0
2011.06
ES 5.1
ES5.1成为了ISO国际标准
2013.03
ES 6.0
ES6.0草案定稿
2013.12
ES 6.0
ES6.0草案发布
2015.06
ES 6.0
ES6.0预计发布正式版<br/>JavaScript.next开始指向ES 7.0
ES6兼容性和新特性
es5兼容性
http://kangax.github.io/compat-table/es5/
es6兼容性
http://kangax.github.io/compat-table/es6/
ES6(ES2015)-- IE10+,Chrome,FireFox,移动端,NodeJS。这些环境基本上都是认得,都能兼容
但是有需求兼容ie怎么办
有两种办法
比方说在移动端或者是混合开发当中,多去用用ES6,在老的版本中不用。惹不起咋躲得起。编译,转换
-
在线转换
- 简单来说就是写好了ES6了然后引用一个js库进来。我什么也不用做了。它替我去做了各种各样的事情
- 缺点,用户每次打开页面都要重新转换一遍,性能体验不是很好。
- 提前编译
ES6的到底有什么样的东西?
- 变量(对原有的变量做了修改)
- 函数(对原有的函数也做了修改)
- 数组(对数组做了一些改进)
- 字符串(改进)
- 面向对象
- Promise(串行化的异步请求方式)
- yield && generator(generator是专门把同步操作拆成异步操作,generator是对Promise的一个封装)
- 模块化
变量-let和const
回顾ES5是怎么生明变量的,有什么样的缺点
var
的缺点
- 可以重复声明
- 无法限制修改
- 没有块级作用域
可以重复声明
最大的问题
VAR a=12;
var a=5;
alert(a);//弹窗5
会发现5能出来,没有报错,没有警告,什么都没有
这在其他语言是不可出现的。
无法限制修改
在程序中,有些东西是永远不变的。
比方说常量
PI=3.1415926
是不会发生改变
在很多语言中都有常量
的概念。在js中没有
至少var
不是一个常量。
换句话说,要不要改,能不能让别人别动这个值,不要改这个值。全凭自觉。
为什么java是全世界最流行的一门语言
原因很简单,因为他非常的严谨,他非常的死板。
相信一件事,越是容易的语言,越是简单的语言。实际上是不严谨。就没法去开发大型项目
反过来他可能让你觉得很难受的语言java,对你限制很严格。但是你掌握了呀之后,开发起大型应用会非常的得心应手。
没有块级作用域
es5 只在函数中支持块级作用域
{
//这就是语法块
}
if(){
变量=xxxx
}
//变量出来就用不了了,这就是块作用域
for(){
}
体现块级作用域作用
if(true){
var a=12;
}
alert(a);
//在块级作用域内声明变量。在外部依然能够访问
在ES6中有了两种新的定义变量的方式
- 不能重复声明,let是变量,可以修改,块级作用域
- 块级作用域
- 可修改let变量的值
- 不可重复声明,const常量,不能修改,块级作用域
- 块级作用域
- 不可修改const变量的值
let 不能重复声明例子
let a=12;
let a=5;
console.LOG(a);
//报错
//Uncaught SyntaxError: Identifier 'a' has already been declared
//不能重复声明
const 不能重复声明例子
const a=12;
const a=5;
console.log(a);
//报错
//Uncaught SyntaxError: Identifier 'a' has already been declared
//不能重复声明
在大型项目中,重复声明这件事,指不定你定义了什么东西别人也定义了。还不报错,到时候定位bug很难找。
变量和常量
变量
let a=12;//声明变量赋值
a=5;//给变量a赋值
console.log(a);//你会明确的发现它变成了5
常量
const a=12;
a=5;
console.log(a);
报错,不能对常量赋值
块级作用域
var 块级作用域只在函数中体现,也就是说在函数中var
声明的变量不会在全局作用域中体现
function aa(){
var a=1;
console.log(a)
}
aa();
console.log(a)
let和const只在块级作用域,或者在语法块之内起作用
if(true){
let a=12;
}
console.log(a);//Uncaught ReferenceError: a is not defined
if(true){
const a=12;
}
console.log(a);//Uncaught ReferenceError: a is not defined
语言推出一个新的版本,一个更好的版本,他一定是要解决一些原来有的问题,ES6也不例外。
块级作用域有什么
<!DOCTYPE htML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
</body>
<script type="text/javascript">
window.onload=function(){
var aBtn=document.getElementsByTagName('input');
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].onclick=function(){
alert(i)
};
}
};
</script>
</html>
以上代码执行,不管按哪个按钮弹出都是3
由于var
声明变量只在函数作用域中扩散到全局
当for
循环执行完毕,i
这个变量暴露到全局了,等于3
所以for
循环中执行的事件绑定,是将点击事件回调函数执行。当点击按钮时候,会出发绑定回调函数,此时当前作用域中,i
等于3,所以无论点击哪个按钮弹出都是3
以前我们是通过闭包解决这个问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
</body>
<script type="text/javascript">
window.onload=function(){
var aBtn=document.getElementsByTagName('input');
for (var i = 0; i < aBtn.length; i++) {
! function(i) {
aBtn[i].onclick=function(){
alert(i)
};
}(i);
}
console.log(i)
};
</script>
</html>
在每一层循环的时候,用一个匿名函数而且是立即执行的匿名函数给他包装起来,然后将每一次遍历的1.2.3分别的值去传到这个匿名函数里,然后匿名函数接到这个参数i再放到点击事件中去引用i当我们每次点击事件输出的值i就会取每一个闭包环境下的i。所以这样就能达到效果。
使用let
来实现