ES6中常用80%

ES6 常用的那80%

编译工具

1. babel
2. traceur 编译工具
3. bootstrap 引导程序

定义变量

let定义变量

1. let具备块级作用域
2. 不允许重复声明

let a = 15 ; 
let a = 5;//报错

1. var 具备函数作用域
2. 用处(i问题):let拥有 块级作用域 = 匿名函数自执行

const定义变量

1. 定义常量 赋值之后不能被修改 //const必须给初始值 不能被重复定义
2. 用途:防止变量被意外修改，比如 引入库或者组件名

字符串连接

字符串模板
var a = haha 使用方式 ${a}

以前字符串拼接 'abc '+变量名+'efg'

现在 'abc${变量名}def'

解构赋值

解构 左边解构和右边解构一样

var [a,b,c] = [12,3,101]
console.log(a,b,c);

和JSON配合使用

var {a,b,c} = {b:12,a:5,c:101} //跟顺序无关

模式匹配 左边的样子和右边一样

var [a,[b,c],d] = [1,[2,3],4]
console.log(a,b,c,d)

var [{e,f},[b,c],d] = [{f:'bbb',e:'aaa'},[2,3],4]
console.log(b,c,d,e,f)

数组循环

for for in

for of //能够循环数组，但是不能循环JSON，真正的目的是为了循环map对象

只循环值

for(var value of arr){}

只循环索引
for(var key of arr.keys()){}

循环索引和值
for(var some of arr.entries()){}

var arr = ['aa','bb','cc','dd']

for(let i in arr){//索引
    console.log(i)
}

for(let i of arr){//值
    console.log(i)
}

JSON的循环

var json = {'a':'aa','b':'bb','c':'cc','d':'dd'}
for(let i of json){//报错
    console.log(i)
}

map对象

和JSON相似，也是一种key-value的形式
Map对象为了和for of 循环配合而生的

Map的使用

var map = new Map();
//map.set(name,value);
//map.get(name);
//map.delete(name);

map.set('a','aa');
map.set('b','bb');

console.log(map)

for(var name of map){//不仅有key还有value
    console.log(name)
}

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

//单独循环map其中的某一个
for(var key of map.keys()){
    console.log(key);
}

for(var value of map.values()){
    console.log(value)
}

函数

之前

function show(){
    
}
show();

箭头函数 =>

// 如果箭头函数 无参数 , 必须使用 ()圆括号或者 _下划线:
() => { statements; } 
或
_ => { statements; }

//返回一个对象时，函数体外要加圆括号
params => ({foo: bar})

箭头函数需要注意
（1）this指向window
（2）arguments不能使用了

对象的定义

单例模式

var person = {
    name: 'aa',
    age: 12,
    showName: function(){
        alert(this.name);
    },
    showAge: function(){
        alert(this.age);
    }
}
person.showName();

面向对象

function Person(name,age){ //类 构造函数
    this.name = name;
    this.age = age;
}
Person.prototype.showName = function(){
    return this.name;
}
Person.prototype.showAge = function(){
    return this.age;
}
person1 = new Person('aa',12);
alert(person1.showName());

//原型继承

function Worker(name,age){
    Person.apply(this,arguments);
}
Worker.prototype = new Person();

函数给默认值

function aa(obj='对象是必须的',json={},options={'time':300,'width':400}){

console.log(obj,json,options);

}
aa();

ES6面向对象

class Person{
constructor(name='default',age=0){

this.name = name;
this.age = age;

}
showName(){

return this.name;

}
showAge(){

return this.age;

}
}

pe = new Person('shen',24);
pe.showName();

//继承

class Worker extends Person{

constructor(name,age,job){
    super(name,age);//调用父类的构造函数
    this.job = job;
}

}
w1 = new Worker('shenyuanyuan',90);
w1.showName();

用面向对象来模拟队列

class Queue {

constructor(para = []){
    this._queue = para;
}
shift(){
    var value = this._queue[0];
    this._queue.shift();
    return value;
}
push(n){
    this._queue.push(n);
    return this._queue
}

}

q = new Queue([1,2,3,4]);
console.log(q);
q.push(5);
console.log(q);
q.shift();
console.log(q);

面向对象的选项卡

#### 模块化

导出模块

export default a

引用模块

important modeA form './a.js'

### Promise

就是一个对象，用来实现传递异步操作的数据（消息）

pending（等待、处理中）-> resolve（完成 fullfilled）
                    -> Rejected(拒绝 失败)
                    

var p1 = new Promise(function(resolve,reject) {
resolve(1);
});
p1.then(function(value){

//alert('成功了：'+ value)
console.log(value);
return value + 1;

},function(value){

alert('失败了：'+ value)

}).then(function(value){

console.log(value);

});