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