teach-es6

ES6:
ECMAScript6

js:
组成部分: ECMA DOM BOM

ECMA是“European Computer Manufactures Association”的缩写，中文称欧洲计算机制造联合会。是1961年成立的旨在建立统一的电脑操作格式标准--包括程序语言和输入输出的组织。

这个组织的目标是评估，开发和认可电信和计算机标准。

这个非盈利组织的目标是发展“标准和技术报告以便促进和标准化对信息处理和电信系统的使用过程。

ECMA的总部设在日内瓦, 比方说国际标准化组织（ISO）和国际电子技术协会（IEC）。

DOM

BOM

我们都知道， javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。

1. DOM 是 W3C 的标准； [所有浏览器公共遵守的标准]
2. BOM 是 各个浏览器厂商根据 DOM
在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]
3. window 是 BOM 对象，而非 js 对象；

DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。

BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：

1 2 3 4 5 6

弹出新的浏览器窗口 移动、关闭浏览器窗口以及调整窗口大小 提供 Web 浏览器详细信息的定位对象 提供用户屏幕分辨率详细信息的屏幕对象 对 cookie 的支持 IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象

JS 浏览器BOM

1. JavaScript Window
2. JavaScript Window Screen
3. JavaScript Window Location
4. JavaScript Window History
5. JavaScript Window Navigator
6. JavaScript 弹窗
7. JavaScript 计时事件
8. JavaScript Cookies

javaScript
actionScript AS3 面向对象 组件 元件 演示
-------------------------------------------
什么是ECMA?
ECMA是标准， js是实现
类似 HTML5是标准，IE10， chrome、FF都是实现
换句话说, 将来也有可能其他 xxxScript来实现ECMA

ECMAscript 简写 ECMA 或者 ES

目前版本：
低级浏览器: 主要支持 ES3.1
高级浏览器: 正在从ES5 过渡到 ES6

------------------------------------------
兼容性:
目前为止 ES5 ES6 支持情况一般

nodeJs用的就是chrome内核， 在node中可以使用ES5 ES6很多特性

ES5和ES6已经逐渐沦为后台语言
------------------------------------------

ES6 从开始制定到最后发布，整整用了15年。

ECMAScript 1.0 是1997年发布的

2011年6月，ECMAscript 5.1 版发布，并且成为 ISO 国际标准（ISO/IEC 16262:2011）。

2013年3月，ECMAScript 6 草案冻结，不再添加新功能。新的功能设想将被放到 ECMAScript 7。

2013年12月，ECMAScript 6 草案发布。然后是12个月的讨论期，听取各方反馈。

2015年6月，ECMAScript 6 正式通过，成为国际标准。从2000年算起，这时已经过去了15年。

ES6 的第一个版本，就这样在2015年6月发布了，正式名称就是《ECMAScript 2015标准》（简称 ES2015）。

node --v8-options
babel
.babelrc

浏览器环境使用es6

Traceur 转码器 google

<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script type="module">
  import './Greeter.js';
</script>

在线转换
node环境使用

在浏览器里面如何使用？
需要用到编译工具

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
------------------------------------------------------------------------
玩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实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针，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(name,age,job){
//继承父级的构造函数
super(name,age);
this.job=job;
}
}

队列类:
[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’
}
}