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}

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