ES6-03

发表于

es6 的一些特性学习

复制数组

复制数组-循环

1
2
3
4
5
6
7
var arr=[1,2,3];
var arr2=[];
for(var i=0; i<arr.length; i++){
    arr2[i]=arr[i];
}
arr2.pop();
console.log(arr, arr2);

复制数组-Array.from(arr)

1
2
3
4
var arr=[1,2,3];
var arr2=Array.from(arr);
arr2.pop();
console.log(arr, arr2)

复制数组-var arr2=[…arr]; (… 超引用)

1
2
3
4
var arr=[1,2,3];
var arr2=[...arr];
arr2.pop();
console.log(arr, arr2);

赋值数组-…示例 (… 超引用)

1
2
3
4
5
6
function show(){
    console.log(arguments);
    arguments.push(5); // Uncaught TypeError: arguments.push is not a function
    console.log(arguments);
}
show(1,2,3,4);
1
2
3
4
5
function show(...args){
    args.push(5);
    console.log(args);
}
show(1,2,3,4); // Array(5)

循环

for in (可以循环数组,json)

1
2
3
4
var arr=['apple','banana','orange','pear'];
for(var i in arr){ 
    console.log(i); // 0 1 2 3  索引值
}
1
2
3
4
var json={'a':'apple','b':'banan','c':'pear','d':'orange'};
for(var name in json){
    console.log(name); // a b c d 
}

for of (可以循环数组,不能循环json)

1
2
3
4
var arr=['apple','banana','orange','pear'];
for(var i of arr){  
    console.log(i); // apple banana orange pear  值
}
1
2
3
4
var json={'a':'apple','b':'banan','c':'pear','d':'orange'};
for(var name of json){
   console.log(name);  // Uncaught TypeError: json[Symbol.iterator] is not a function
}

Map对象

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

new Map();

1
2
3
4
5
6
7
8
9
var map=new Map();
//map.set(name,value);     // 设置Map
map.set('a','apple');
map.set('b','banana');
console.log(map);          // Map(2)
console.log(map['a']);     // undefined
console.log(map.get('b')); // banana
map.delete('a');           // 删除Map
console.log(map);          // Map(2)

遍历map (不能使用for in,没有效果)

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
var map=new Map();
map.set('a','apple');
map.set('b','banana');
map.set('c','orange');
map.set('d','pear');
for(var name of map){
    console.log(name); 
    // a,apple  
    // b,banana  
    // ...
}
for(var [key,value] of map){
    console.log(key, value);
    // a apple
    // b banana
    // ......
}
for(var [a,b] of map.entries()){
    console.log(a,b);
    // a apple
    // b banana
    // ......
}
for(var key of map.keys()){      //只是循环key
    console.log(key);
}

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

for… of也可以循环数组

1
2
3
4
5
6
只循环值:
    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
10
原来写法                    箭头函数 =>
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);
}                           }

箭头函数-应用

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box{
            width:100px;
            height:100px;
            background: #ccc;
        }
    </style>
    <script>
        window.onload=()=>{
            var oBox=document.getElementById('box');

            oBox.onclick=()=>{
                oBox.style.background='red';
            };
        };
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>

箭头函数-注意

this问题,this指向了window.
arguments,不能使用了.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
        var a=101;
        var json={
            a:1,
            b:2,
            show:()=>{
               console.log(this.a);  // 101
            }
        };
        json.show();
    </script>
</head>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
        function show(){
            console.log(arguments); // Arguments(3)
        }
        show(1,2,3);
        var show=()=>{
            console.log(arguments); //Uncaught ReferenceError: arguments is not defined
        };
        show(1,2,3);
    </script>
</head>
<body>
</body>
</html>

对象

对象语法简洁化
单体模式

面向对象

之前类的写法

1
2
3
4
5
6
7
8
9
10
11
12
function Person(name,age){  //类、构造函数
    this.name=name;
    this.age=age;
}
Person.prototype.showName=function(){
    return this.name;
};
Person.prototype.showAge=function(){
    return this.age;
};
var p1=new Person('abc',10);
alert(p1.showName()); //abc

ES6写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//构造函数    constructor 生成完实例以后，自己就执行的
class Person{   //类
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    showName(){
        return this.name;
    }
    showAge(){
        return this.age;
    }
}
var p1=new Person('aaa',10);
alert(p1.name);    // aaa

面向对象-函数给默认值

1
2
3
4
5
6
function move(obj='对象必须要填写的',json={},options){
    console.log(obj);     // 对象必须要填写的
    console.log(json);    // Object {}
    console.log(options); // undefined
}
move();

面向对象-继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 之前写法: 子类.prototype=new 父类();
//Person
function Person(name,age){
    this.name=name;
    this.age=age;
}
Person.prototype.showName=function(){
    return this.name;
};
Person.prototype.showAge=function(){
    return this.age;
};

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

var p1=new Person('abc',10);
var w1=new Person('ddd',20);
alert(p1.showName()); //abc
alert(w1.showName()); //ddd
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
//ES6写法: 
 class Person{ //类
    constructor(name='default',age=0){
        this.name=name;
        this.age=age;
    }
    showName(){
        return this.name;
    }
    showAge(){
        return this.age;
    }
}
//继承
class Worker extends Person{
    constructor(name,age,job='Worker -> 撸码的...'){
        super(name,age); //调用父级构造
        this.job=job;
    }
    showJob(){
        return this.job;
    }
}
var p1=new Person();
var w1=new Worker('mmm',56);
alert(p1.showAge());   // 0
alert(w1.showName());  // mmm
alert(w1.job);         // Worker -> 撸码的...

面向对象-队列类

1
2
3
4
5
6
7
class Queue{
    constructor(content=[]){
        this._queue=[...content];
    }
}
var q=new Queue([1,2,3,4]);
console.log(q._queue);  // 1 2 3 4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
class Queue{
    constructor(content=[]){
        this._queue=[...content];
    }
    shift(){
        // 删除数组的第一个元素
        const value=this._queue[0];
        this._queue.shift();
        return value;
    }
    push(n){
        this._queue.push(n);
        return this._queue.length;
    }
}
var q=new Queue([1,2,3,4]);
var s = q.shift();  
console.log(s);          // 1
q.push(9);
console.log(q._queue);   // 2 3 4 9
q.shift();
console.log(q._queue);   // 3 4 9
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .on{ background: #f60; color: #fff}
        .box div{
            width:200px;
            height:200px;
            border: 1px solid #000;
            display: none;
        }
    </style>
    <script>
        //选项卡
        class Tab{
            constructor(id){
                this.oBox=document.getElementById(id);
                this.aBtn=this.oBox.getElementsByTagName('input');
                this.aDiv=this.oBox.getElementsByTagName('div');
                this.iNow=0;
                this.init();
            }
            init(){
                for(let i=0; i<this.aBtn.length; i++){
                    this.aBtn[i].onclick=function(){
                        this.iNow=i;
                        this.hide();
                        this.show(i);
                        document.title=this.iNow;
                    }.bind(this); // bind 矫正this的指向
                }
            }
            hide(){
                for(let i=0; i<this.aBtn.length; i++){
                    this.aBtn[i].className='';
                    this.aDiv[i].style.display='none';
                }
            }
            show(index){
                this.aBtn[index].className='on';
                this.aDiv[index].style.display='block';
            }
        }
        //继承
        class AutoTab extends Tab{
            next(){
                this.iNow++;
                if(this.iNow==this.aBtn.length)this.iNow=0;
                this.hide();
                this.show(this.iNow);
            }
        }
        window.onload=function(){
            new Tab('box');
            var at=new AutoTab('box2');

            document.onclick=function(){
                at.next();
            };
        };
    </script>
</head>
<body>
    <div id="box" class="box">
        <input class="on" type="button" value="aaa">
        <input type="button" value="bbb">
        <input type="button" value="ccc">
        <div style="display: block;">1111</div>
        <div>2222</div>
        <div>3333</div>
    </div>
    <div id="box2" class="box">
        <input class="on" type="button" value="aaa">
        <input type="button" value="bbb">
        <input type="button" value="ccc">
        <div style="display: block;">1111</div>
        <div>2222</div>
        <div>3333</div>
    </div>
</body>
</html>

模块化(ES6自带模块化)

如何定义(导出)模块

a.js

1
2
const a=12;
export default a;

b.js

1
2
const a=5;
export default a;

导出多个模块

1
2
3
const a=5;
const b=12;
export default {a,b};

如何使用(引用))

demo.js

1
2
3
import modA from './a.js';
import modB from './b.js';
console.log(modA+modB);  // 17

Promise -> 承诺

就是一个对象,用来传递异步操作的数据(消息).
pending(等待、处理中) ―> Resolve(完成、fullFilled) ―> Rejected(拒绝、失败).

初识 Promise()

1
2
3
4
5
6
7
8
var p1 = new Promise(function(resolve, reject) {
    resolve(1);
});
p1.then(function(value) {
    alert('成功了:' + value);
}, function() {
    alert('失败了');
});

Promise() 可以连续返回结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
    var p1 = new Promise(function(resolve, reject) {
        resolve(5)
    });
    p1.then(function(value) {
        console.log(value);    // 5
        return value + 1;
    }, function(value) {
        alert('失败了:' + value);
    }).then(function(value) {
        // 这里的 value 是上一次then中成功return的结果.
        console.log(value);    // 6
    });
    </script>
</head>
<body>
</body>
</html>

Promise 异步数据的传递

promise.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const fs=require('fs');
fs.readFile('let.html',function(err,data){
    var p1=new Promise(function(resolve,reject){
        if(err){
            reject(err);
        }else{
            resolve(data);
        }
    });
    p1.then(function(value){
        console.log(value.toString());
    },function(value){
        console.log(value);
    });
});

终端输入命令,如果读取到了数据:

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
leo@lenovo MINGW64 /e/BaiduNetdiskDownload/ES6/ES6课件
$ node promise.js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximu
m-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="traceur.js"></script>
    <script src="bootstrap.js"></script>
    <script type="module">
        let a=12;
        alert(a);
        console.log(a);
    </script>
</head>
<body>
</body>
</html>

终端输入命令,没有读取到数据:

1
2
3
4
5
6
7
8
leo@lenovo MINGW64 /e/BaiduNetdiskDownload/ES6/ES6课件
$ node promise2.js
{ Error: ENOENT: no such file or directory, open 'E:\BaiduNetdiskDownload\ES6\ES6课件\let123.html'
    at Error (native)
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: 'E:\\BaiduNetdiskDownload\\ES6\\ES6课件\\let123.html' }

Promise.catch ――> 用来捕获错误

1
2
3
4
5
6
7
8
9
10
var p1=new Promise(function(resolve,reject){
    resolve('成功了');
});

p1.then(function(value){
    console.log(value);
    throw '发生错误了';
}).catch(function(e){
    console.log(e);
});

输出结果:

1
2
成功了
发生错误了

Promise.all

全部，用于将多个promise对象，组合，包装成一个全新的promise实例
Promise.all([p1,p2,p3…]);
所有的promise对象，都正确，才走成功
否则，只要有一个错误，是失败了

1
2
3
4
5
6
7
8
var p1=Promise.resolve(3);

Promise.all([true,p1]).then(function(value){
    console.log('成功了,'+value);
},function(value){
    console.log('错误了,'+ value);
});
// 输出结果为:  成功了,true,3
1
2
3
4
5
6
7
8
9
var p1=Promise.resolve(3);
var p2=Promise.reject(5);
Promise.all([true,false,p1,p2]).then(function(value){
    console.log('成功了,'+value);
},function(value){
    console.log('错误了,'+ value);
});
// 输出结果为: 错误了,5 
// 只返回错误的 promise

Promise.race

返回也是一个promise对象
最先能执行的promise结果，哪个最快，用哪个

1
2
3
4
5
6
7
8
9
10
var p1=new Promise(function(resolve,reject){
    setTimeout(resolve,50,'one');
});
var p2=new Promise(function(resolve,reject){
    setTimeout(resolve,100,'two');
});
Promise.race([p1,p2]).then(function(value){
    console.log(value);
});
// 输出: one

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';
        }
    }

Generrator -> demo1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
    function* show() {
        yield 'Hello';
        yield 'World';
        yield 'Es6';
    }
    var res = show();
    console.log(res.next()); //{value:'Hello', done:false}
    console.log(res.next()); //{value:'World', done:false}
    console.log(res.next()); //{value:'Es5', done:false}
    console.log(res.next()); //{value:'undefined', done:true}
    </script>
</head>
<body>
</body>
</html>

输出结果:
css盒子模型

Generrator -> demo2

1
2
3
4
5
6
7
8
9
10
11
function* show(){
    yield 'Hello';
    yield 'World';
    yield 'Es6';
    return 'well';
}
var res=show();
console.log(res.next()); //{value:'Hello', done:false}
console.log(res.next()); //{value:'World', done:false}
console.log(res.next()); //{value:'Es5', done:false}
console.log(res.next()); //{value:'well', done:true}

Generrator -> yield 是否有返回值

yield语句本身没有返回值, 或者每次返回undefined

1
2
3
4
5
6
7
function* show(){
    var a=yield 'Hello';
    return a;
}
var res=show();
console.log(res.next());  // {value:'Hello', done:false}
console.log(res.next());  // {value:'undefined', done:true}

坚持原创技术分享，您的支持将鼓励我继续创作！