ES6详细讲解(二)
今天接着学习ES6!!!接着上次来学习
第五个知识点:(...)拓展运算符
es5中赋值数组的方法:
a)通过for循环
通过数组方法pop()方法来验证复制的数组时候受影响
b)数组中的方法:Array.from();
c) es6中拓展运输符复制数组的方法
var arr2 = [...arr];拓展运输符还可以配合数组使用:如下:
。。。args相关于arguments,但是arguments不能复制数组第六个知识点:es6中的for of循环
for of循环: 可以循环数组,不能循环json
真正的目的为了循环map对象
遍历(迭代,循环)整个对象,表现类似for in
第七个知识点: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()){ //entries()就是map的整体
console.log(name); // a,apple b,banana
}
只是循环key
for(var key of map.keys()){ //只是循环key
console.log(key);
}
for(var value of map.values()){ //只是循环value
console.log(value);
}
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 person={
name,
age,
showName(){
return this.name;
},
showAge(){
return this.age;
}
}
Alert(person.showName());
es5中的面向对象
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());
ES6类class
构造函数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);
var p2 = new Person(‘bbb’,20)
Alert(p2.showName==p1.showName); //true
Alert(p1.name); //aaa
Alert(p1.showName()); //aaa
第十个知识点:继承
之前:子类.prototype = new父类();
ES6 :
class Worker extends Person{
constructor(){
super() //调用父级构造
}
showJob(){
return‘你的工作是暂无的’;
}
}
var w1 = new Worker(‘mmm’,56)
Alert(w1.showJob());
es6之二,到这里就结束了,还有最有一期的叙述,喜欢的朋友可以继续关注!!!