ES6 筆記

ES6:
ECMAScript6

js:
組成部分: ECMA DOM BOM

javaScript
actionScript
-------------------------------------------
什麼是ECMA?
ECMA是標準， js是實現
相似 HTML5是標準，IE10， chrome、FF都是實現
換句話說, 未來也有可能其餘 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 4.0退化爲嚴重縮水版的 3.1, 代號 Harmony（和諧）
2009 ES5.0 ES5正式發佈了，同時公佈JavScript.next 也就後來 6.0
2011 ES5.1 ES5.1 成爲了ISO國際標準
2013.3 ES6.0 ES6.0 制定草案
2013.12 ES6.0 ES6.0 草案發布
2015.6 ES6.0 ES6.0預計發佈正式版， 同時Javascript.next指向 ES7.0
------------------------------------------
兼容性:
目前爲止 ES5 ES6 支持狀況，湊合

nodeJs用的就是chrome內核， 在node中可使用ES5 ES6不少特性

ES5和ES6已經逐漸淪爲後臺語言
------------------------------------------
在瀏覽器裏面如何使用？
須要用到編譯工具

babel 不說了
------------------------------------------
traceur ——由Google出的編譯器，把ES6語法編譯爲ES5

bootstrap 引導程序，跟css裏面認識bootstrap不同

在網頁上使用:
用法一: √
<script src="traceur.js"></script>
<script src="bootstrap.js"></script>
<script type="module">

</script>
用法二:
直接在線編譯——主要用於測試
http://babeljs.io/repl/
https://google.github.io/traceur-compiler/demo/repl.html
用法三:
直接在node裏面使用

a). 直接用，須要添加 'use strict'
b). node --harmony_desctructuring xxx.js
------------------------------------------------------------------------
玩ES6時候:
先不用任何引入東西，測試，若是失敗了，引入traceur
------------------------------------------------------------------------
1. 定義變量 ,let ——已經被瀏覽器實現了
var a=12;

let——用來定義變量

let a=12;

代碼塊: {} 包起來的代碼， 造成了一個做用域，塊級做用域
好比: if for while

特色: 只能在代碼塊裏面使用

var 只有函數做用域

a). let具有塊級做用域
b). 不容許重複聲明
let a=12;
let a=5; //錯的
總結: 其實let才接近其餘語言的變量

用處：
封閉空間：
(function(){
var a=12;
})()
如今：
{
let a=12;
}

i問題:

總結: 塊級做用域，其實就是 匿名函數當即調用
------------------------------------------------------------------------
const——用來定義 常量
一旦賦值，之後再也修改不了了

const a-=12;
a=15 //報錯

注意: const必須給初始值， 不能重複聲明
由於之後再也無法賦值了，因此聲明的時候必定得有值

用途: 爲了防止意外修改變量
好比引入庫名，組件名
------------------------------------------------------------------------
字符串鏈接:
以前:
var str='';
var str=""

反單引號: var str= `` 字符串模板

以前: 'abc'+變量名+'ef'
如今: `abc${變量名}ef`
------------------------------------------------------------------------
解構賦值:
var [a,b,c]=[12,5,101];

var {a,b,c}={b:5,a:12,c:101}; 跟順序無關

模式匹配：——左側的樣子，須要和右側同樣
var [a,[b,c],d]=[12,[1,2],5];

var [{a,e},[b,c],d]=[{e:'eeee', a:'aaaa'},[1,2],5];

交互——數據解析:
[{title:'', href:'', img:""}]

解構賦值還能夠給默認值:
var json={};

var a=json.a || 12

語法:
var {time=12,id=0}={};

運動框架:
function move(obj,json,options){
options=options || {};
options.time=options.time || 300;
}

function move(obj,json,{time=300}={}){

}
-----------------------------------------------
複製數組:
a). 循環
b). Array.from(arr)
c). var arr2=[...arr];

function show(...args){
args.push(5);
console.log(args);
}
show(1,2,3,4);
-----------------------------------------------
循環：
普通for
for in

for of 循環, 能夠循環數組，不能循環json
真正目的爲了循環 map對象

遍歷(迭代、循環)整個對象， 表現 相似 for in

var arr=['apple','banana','orange','pear'];

Map對象:
和json類似，也是一種key-value形式
Map對象爲了和for of循環配合而生的

var map=new Map();

設置:
map.set(name,value);

獲取：
map.get(name)

刪除：
map.delete(name)

遍歷map:
不能使用for in，沒有效果

for(var name of map){
console.log(name); // a,apple b,banana
}
for(var [key,value] of map){
console.log(key, value); // key value
}

for(var name of map.entries()){
console.log(name);
}

for(var [key,value] of map.entries()){
console.log(name);
}

for(var key of map.keys()){ //只是循環key
console.log(key);
}

for(var val of map.values()){ //只是循環value
console.log(val);
}

for.. of也能夠循環數組:
只循環值:
for(var value of arr){}
只循環索引:
for(var key of arr.keys()){}
索引和值都循環：
for(var some of arr.entries()){}
--------------------------------------------------------------
函數:
以前:
function show(){
alert(1);
}
show();
----------------------
function show(a){
return a;
}
show(12);
----------------------
function show(a,b){
return a+b;
}
show(12,5);
箭頭函數：
=>

var show=a=>a; function show(a){return a};

var show=(a,b)=>a+b; function show(a,b){return a+b};

var show=()=>'welcome'; function show(){return 'welcome'}

var show=() => { function show(){
alert(1); alert(1);
} }

注意：
this問題， this指向了window
arguments， 不能使用了
--------------------------------------------------
對象:
對象語法簡潔化

單體模式:
json
var name='abb';
var age=101;
var preson={
name,
age,
showName(){
return this.name;
},
showAge(){
return this.age;
}
}
面向對象:
以前：
人類 工人類
function Person(name,age){ //類、構造函數
this.name=name;
this.age=age;
}
Person.prototype.showName=function(){
return this.name;
};
Person.prototype.showAge=function(){
return this.age;
};

ES6:
類 class
構造函數 constructor 生成完實例之後，本身就執行的

class Person{ //類
constructor(name,age){
this.name=name;
this.age=age;
}
showName(){
return this.name;
}
showAge(){
return this.age;
}
}

繼承:
以前: 子類.prototype=new 父類();

ES6:
class Worker extends Person{
constructor(){
super() //調用父級構造
}
}

隊列類:
[1,2,3,4]

var q=new Queue([1,2,3,4]);

q.shift();

q._queue
-----------------------------------
--------------------------------------------------------
模塊化：——必須引入traceur 和bootstrap， type必須寫成 module
seajs requireJs

ES6自帶模塊化

如何定義(導出)模塊:
const a=12;

export default a;
---------------------------
const a=5;
const b=12;

export default {a,b};
如何使用(引用):
import modA from './a.js';
--------------------------------------------------------
異步: 多個操做能夠同時進行
ajax

ajax(url,function(){
//1
},fnFail);
//2
--------------------------------------------------------
Promise:——承諾

就是一個對象，用來傳遞異步操做的數據(消息)

pending（等待、處理中）—> Resolve(完成、fullFilled)
—> Rejected(拒絕、失敗)
使用：
var p1=new Promise(function(resolve,reject){
//resolve 成功了
//reject 失敗了
});

var p1=new Promise(function(resolve,reject){
if(異步處理成功了){
resolve(成功數據)
}else{
reject(失敗緣由)
}
});

p1.then(成功(resolve),失敗(reject)) √
--------------------------------------------

p1.catch——用來捕獲錯誤

--------------------------------------------
Promise.all——所有，用於將多個promise對象，組合，包裝成一個全新的promise實例
Promise.all([p1,p2,p3...]);

全部的promise對象，都正確，才走成功
不然，只要有一個錯誤，是失敗了
--------------------------------------------
Promise.race——返回也是一個promise對象
最早能執行的promise結果， 哪一個最快，用哪一個
--------------------------------------------
Promise.reject() ——生成錯誤的一個promise

--------------------------------------------
Promise.resolve() ——生成一個成功的promise對象
語法：
Promise.resolve(value)
Promise.resolve(promise)
-------------------------------------------------------
Generrator——生成器
是一個函數

能夠遍歷， Generrator就是一個狀態機

語法:
function show(){ //普通函數

}

function* show(){ //generator函數
yield xxx
}

形式上:
a). 函數名字前面有 *
b). 函數內部使用 yield語句

function* show(){
yield 'Hello';
yield 'World';
yield 'Es6';
}
var res=show();

res.next() {value:'Hello', done:false}
res.next() {value:'World', done:false}
res.next() {value:'Es6', done:false}
res.next() {value:'undefined', done:true}

總結： 每次返回一個value和done結果
value，每次yield後面值
done是一個布爾值，表明是否遍歷結束

yield是否有返回值？
yield語句自己沒有返回值，或者每次返回undefined

next能夠帶參數？
給上一個yield值

for....of循環: 循環generator函數

generator函數放到對象裏面： var json={ *show(){ yield ‘xx’ yield ‘xx’ } }