掰玉米基地

ES6中的80%

发表于 | 分类于 | | 阅读次数

ES6 常用的那80%

编译工具

  1. babel

  2. traceur 编译工具

  3. bootstrap 引导程序

定义变量

let定义变量

  1. let具备块级作用域

  2. 不允许重复声明 

1
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()){}

1
2
3
4
5
6
7
8
9
var arr = ['aa','bb','cc','dd']
for(let i in arr){//索引
    console.log(i)
}
for(let i of arr){//值
    console.log(i)
}

JSON的循环

1
2
3
4
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的使用

js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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)
}

函数

之前

js
1
2
3
4
function show(){
    
}
show();

箭头函数 =>

js
1
2
3
4
5
6
7
// 如果箭头函数 无参数 , 必须使用 ()圆括号或者 _下划线:
() => { statements; } 
或
_ => { statements; }
//返回一个对象时，函数体外要加圆括号
params => ({foo: bar})

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

对象的定义

单例模式

js
1
2
3
4
5
6
7
8
9
10
11
var person = {
    name: 'aa',
    age: 12,
    showName: function(){
        alert(this.name);
    },
    showAge: function(){
        alert(this.age);
    }
}
person.showName();

面向对象

js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
ES6面向对象
```apple js
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();

用面向对象来模拟队列

js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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);

面向对象的选项卡

js
1
2

模块化

导出模块

export default a

引用模块

important modeA form ‘./a.js’

Promise

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

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

js
1
2
3
4
5
6
7
8
9
10
11
12
13
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);
});