ES6和JS的关系
- ES6:
- ECMAScript6
- js:
- 组成部分:ECMA DOM BOM
什么是ECMA?
ECMA是标准,JS是实现,换句话来说也有可能有其他xxxScript来实现ECMA
ECMAScript:简写ECMA或者ES
- 目前版本:
- 低级浏览器:主要支持ES3.1
- 高级浏览器:正在从ES5过渡到ES6
- 历史:
- 1996 ES1.0 js稳定 Netscape将js提交给ECMA组织,ES正式出现
- 1998 ES2.0 ES2.0正式发布
- 1999 ES3.0 ES3被浏览器广泛支持
- 2007 ES4.0 ES4过于激进,被废除了
- 2008 ES3.1 ES4.0退化为严重缩水版的3.1 Harmony(和谐)
- 2009 ES5.0 ES5.0正式发布,同时公布了JavaScript.next也就是后来6.0
- 2011 ES5.1 ES5.1成为ISO国际标准
- 2013.03 ES6.0 ES6.0定制草案
- 2013.12 ES6.0 ES6.0草案发布
- 2015.06 ES6.0 ES6.0预计发布正式版,同时JavaScript.next指向ES7.0
ES6兼容性
- 目前为止ES5,ES6支持情况,凑合
- 09年,NodeJS用的就是chrome内核,在node中可以使用ES5,ES6很多新特性
- ES5和ES6已经逐渐沦为后台语言
在浏览器里面如何使用?
- 需要用到编译工具
- babel
- traceur —— 由Google出的编译器,把ES6语法编译为ES5
- bootstrap —— 引导程序,跟css里面认识的bootstrap不同
在网页上使用:
- 用法一:
<script src="traceur.js"></script>
<script src="bootstrap"></script>
<script type="module"></script>
- 用法二:
- 直接在线编译 —— 主要用于测试
http://bebaljs.io/repl
http://google.github.io/traceur-compiler/demo/repl.html
- 用法三:
- 直接在node里面使用
- a)直接用,需要添加’user strict’
- b)node –harmony 1.js
定义let变量
var a = 12; //es5
let a = 12; //es6
- 代码块: {}包起来的代码
- 特点:智能在代码块里面使用
- var只有函数作用域
a)let具备块级作用域
b)不允许重复声明
let a = 12;
let a = 5; //错的
总结:其实let才接近其他语言的变量
用处:
- ES5封闭空间:
(function(){
var a = 12;
})();
- ES6现在:
{
let a = 12;
}
i问题:
//使用ES5
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);
}
};
//使用ES6
window.onload = function(){
var aBtn = document.getElementsByTagName('input');
for(let i=0;i<aBtn.length;i++) {
aBtn[i].onclick = function(){
alert(i);
}
}
};
定义const变量
- 特性:一旦赋值,以后再也修改不了了
const a = 12;
a = 15; //报错
- 注意:const必须给初始值,不能重复声明;因为以后再也没法赋值了,所以声明的时候一定得有值。
- 用途:为了防止意外修改变量
- 比如引入库名,组件名
字符串连接
- 之前
var a = 'abc' + 变量 + 'ef';
- 现在
- var a = `abc${变量}\ef`;
解构赋值:
- 模式匹配:左侧的样子,需要和右侧的一样
var [a, b, c] = [3, 4, 5];
console.info(a, b, c);
- json解构赋值和顺序无关
var {a,b,c} = {b:5,a:12,c:101};
console.info(a, b, c);
- 深层解构赋值
//案例一
var [d,[e,f],g] = [12,[1,2],5];
console.info(d,e,f,g);
//案例二
var [{a,e},[b,c],d] = [{e:'eeee',a:'aaaaaa'},[1,2],5];
console.info(a,b,c,d,e);
- 对方法返回值进行解构
function getPos() {
return {left:100,stop:1000};
}
var {left,stop} = getPos();
- 解构赋值给定默认值
var {time=12,id=0} = {};
console.info(time,id);
- 用途
//用途:案例一
var json = {
"statuses": [
{
"created_at": "Tue May 31 17:46:55 +0800 2011",
"id": 11488058246
}
],
"ad": [
{
"id": 3366614911586452,
"mark": "AB21312XDFJJK"
}
]
};
var {statuses,ad} = json;
console.info(statuses);
//用途:案例二
var arr = [{title:'abc',href:'kkkk',img:'img1'}];
var [{title,href,img}] = arr;
console.info(title, href, img);
//用途:案例三
function move(obj,json,{time=300,dom}={}){
console.info(obj,json,time,dom); //测试 {a: 123} 200 body
}
move('测试',{a:123},{time:200,dom:'body'})