【ES6】 — ECMAScript6快速入门01

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);    //测
b508
试 {a: 123} 200 body
}
move('测试',{a:123},{time:200,dom:'body'})