ES6学习小结

ES6（ES2015）--IE10+、Chrome、FireFox、移动端、NodeJS

 

编译、转换

1.在线转换

2.提早编译

 

babel = browser.js

 

ES6:

1.变量

 

var 重复声明、函数级

let 不能重复声明、块级、变量

const 不能重复声明、块级、常量

 

 

var

1.能够重复声明 (C#,java里不能够)

2.没法限制修改

PI=3.1415926

3.没有块级做用域

4.var的做用域是函数

{

var a= 1;

}

在外面能够用a

 

let 不能重复声明，变量-能够修改,有块级做用域

const 不能重复声明，常量-能够修改,有块级做用域

 

 

2.函数

 

箭头函数

 

a.方便

i.若是只有一个参数，()能够省

ii.若是只有一个return，{}也能够省

b.修正this

this相对正常点

 

 

function 名字(){

 

}

 

()=>{

 

}

1).若是只有一个参数，()能够省

2).若是只有一个return,{}能够省

----------------------------

()—只有一个参数（能够省略）

{}—只有一个return（能够省略）

 

let arr = new Array();

let arr = [];

----------------------------

函数的参数

1).参数扩展/数组展开

2).默认参数

 

参数扩展

收集

扩展

 

默认参数

function show(a, b=5){

 

}

 

1).收集参数

show(a,b,...args){} //args能够任意命名

 

*Rest Parameter必须是最后一个（ Rest parameter must be last formal parameter）

2).展开数组

...arr => 1,2,3

*展开后的效果，跟直接把数组的内容写在这儿同样

 

let arr1 = [1,2,3];

let arr2 = [5,6,7];

 

let arr = [...arr1,...arr2] <=> let arr = [1,2,3,5,6,7]

 

 

function show(...args){ //...args为数组

fn(...args); //<=> fn(12,5)

}

 

function fn(a,b){

alert(a+b);

}

 

show(12,5);//17

-------------------------------------------------------

默认参数

$('#div1').animate({width:'200px'});//有默认的时间

$('#div1').animate({width:'200px'},1000);

 

function show(a,b=5,c=12){

console.log(a,b,c);

}

show(99);//a=99,b=5,c=12

show(99,19,88);//a=99,b=19,c=88

 

 

3.解构赋值：

1).左右两边结构必须同样

 

let [a,b] = {a:12,b:5};

console.log(a,b);//报错

2).右边必须是个东西

 

let {a,b} = {12,5};//出不来，右边不是一个东西，不是数组，也不是json

console.log(a,b);

3).声明和赋值不能分开（必须在一句话里完成）

let [a,b];

[a,b] = [12,5];

console.log(a,b);//出错

 

 

let [a,b,c] = [1,2,3];

let {a,c,d} = {a:12,c:5,d:6};

 

let [{a,b},[n1,n2,n3],num,str] = [{a:12,b:5},[12,5,8],8,'test'];

console.log(a,b,n1,n2,n3,num,str);

 

//粒度

let [json,arr,num,str] = [{a:12,b:5},[12,5,8],8,'test'];

console.log(json,arr,num,str);

 

4.数组

 

map 映射

reduce 汇总：一堆->一个

filter 过滤：一堆->剩下的

forEach 循环

 

 

map 映射 一个对一个

[12,58,99,86,45,91]

[不及格,不及格,及格,及格,不及格,及格]

 

[45,57,135,28]

[

{name:'blue',level:0,role:0},

{name:'zhangsan',level:99,role:3},

{name:'aaa',level:0,role:0},

{name:'blue',level:0,role:0}

]

 

let score = [19,85,99,25,90];

let result = score.map(item=> item >=60 ?'及格':'不及格');

alert(score);//19,85,99,25,90

alert(result);//不及格,及格,及格,不及格,及格

 

比方说：时间，不显示今天显示

 

reduce 汇总（本意是减小） 一堆出来一个

算个总数

[12,8000000,59999] => 8060011

 

let arr = [12,69,180,8763];

//tmp是中间结果,item是项，index是下指标 1,2,3

let result = arr.reduce(function(tmp,item,index){

//alert(tmp+','+item+','+index); //12,69,1 undefined,180,2 undefined,8763,3

return tmp+item;

})

alert(result);//9024

 

算个平均数

[12,59,99] => 56.67

 

let arr = [12,69,180,8763];

 

/* //tmp是中间结果,item是项，index是下指标 1,2,3

let result = arr.reduce(function(tmp,item,index){

return tmp+item;

})

//alert(result/arr.length);// */

//tmp是中间结果,item是项，index是下指标 1,2,3

let result = arr.reduce(function(tmp,item,index){

if(index != arr.length-1){ //不是最后一次

return tmp+item;

}

else{ //最后一次

return (tmp+item)/arr.length;

}

})

alert(result);//2256 算平均值

 

filter 过滤器

 

let arr = [12,5,8,99,27,36,75,11];

let result = arr.filter(item=>item%3==0);

alert(result);//12,5,8,99,27,36,75

 

 

let arr = [

{title:'男士寸衫',price:75},

{title:'女士包',price:57842},

{title:'男士包',price:65},

{title:'女士鞋',price:27531},

];

let result = arr.filter(json=> json.price >=10000);

console.log(result);

 

forEach 循环（迭代）

 

let arr = [12,5,8,9];

 

/* arr.forEach(item=>{

alert(item);

}); */

arr.forEach((item,index)=>{

alert(index+':'+item);

});

 

5.字符串

 

startsWith/endsWith

字符串模板：`${a}xxx${b}`

 

1).多了两个新方法

 

startsWith

 

endsWith

 

2).字符串模板

字符串链接

 

i.直接把东西塞到字符串里面 ${东西}

ii.能够折行

 

6.面向对象

 

ES6面向对象

1.class 关键字、构造器和类分开了

2.calss 里面直接加方法

 

/* 老的写法，类和构造函数都是User

function User(name,pass){

this.name = name;

this.pass = pass;

}

 

User.prototype.showName = function(){

alert(this.name);

};

 

User.prototype.showPass = function(){

alert(this.pass);

};

 

var u1 = new User('blue','123456');

u1.showName();

u1.showPass(); */

 

//新的写法 构造器和类分开了

class User{

//构造器

constructor(name,pass){

this.name = name;

this.pass = pass;

}

showName(){

alert(this.name);

}

showPass(){

alert(this.pass);

}

}

 

var u1 = new User('blue','123456');

u1.showName();

u1.showPass();

 

继承:

 

super--超类 = 父类

 

ES6（ES2015）--IE10+、Chrome、FireFox、移动端、NodeJS

 

编译、转换

1.在线转换

2.提早编译

 

babel = browser.js

 

ES6:

1.变量

var

1.能够重复声明 (C#,java里不能够)

2.没法限制修改

PI=3.1415926

3.没有块级做用域

4.var的做用域是函数

{

var a= 1;

}

在外面能够用a

 

let 不能重复声明，变量-能够修改,有块级做用域

const 不能重复声明，常量-能够修改,有块级做用域

 

 

2.函数

 

箭头函数

function 名字(){

 

}

 

()=>{

 

}

1).若是只有一个参数，()能够省

2).若是只有一个return,{}能够省

----------------------------

()—只有一个参数（能够省略）

{}—只有一个return（能够省略）

 

let arr = new Array();

let arr = [];

----------------------------

函数的参数

1).参数扩展/数组展开

2).默认参数

 

参数扩展

1).收集参数

show(a,b,...args){} //args能够任意命名

 

*Rest Parameter必须是最后一个（ Rest parameter must be last formal parameter）

2).展开数组

...arr => 1,2,3

*展开后的效果，跟直接把数组的内容写在这儿同样

 

let arr1 = [1,2,3];

let arr2 = [5,6,7];

 

let arr = [...arr1,...arr2] <=> let arr = [1,2,3,5,6,7]

 

 

function show(...args){ //...args为数组

fn(...args); //<=> fn(12,5)

}

 

function fn(a,b){

alert(a+b);

}

 

show(12,5);//17

-------------------------------------------------------

默认参数

$('#div1').animate({width:'200px'});//有默认的时间

$('#div1').animate({width:'200px'},1000);

 

function show(a,b=5,c=12){

console.log(a,b,c);

}

show(99);//a=99,b=5,c=12

show(99,19,88);//a=99,b=19,c=88

 

 

3.解构赋值：

 

let [a,b,c]=[12,5,8];

 

左右结构同样

右边是个合法的东西

声明、赋值一次完成

 

1).左右两边结构必须同样

 

let [a,b] = {a:12,b:5};

console.log(a,b);//报错

2).右边必须是个东西

 

let {a,b} = {12,5};//出不来，右边不是一个东西，不是数组，也不是json

console.log(a,b);

3).声明和赋值不能分开（必须在一句话里完成）

let [a,b];

[a,b] = [12,5];

console.log(a,b);//出错

 

 

let [a,b,c] = [1,2,3];

let {a,c,d} = {a:12,c:5,d:6};

 

let [{a,b},[n1,n2,n3],num,str] = [{a:12,b:5},[12,5,8],8,'test'];

console.log(a,b,n1,n2,n3,num,str);

 

//粒度

let [json,arr,num,str] = [{a:12,b:5},[12,5,8],8,'test'];

console.log(json,arr,num,str);

 

4.数组

 

map 映射 一个对一个

 

let aItems = [];

for (let i = 0; i < this.props.arr.length; i++) {

aItems.push(<Item str={this.props.arr[i]}></Item>);

 

}

<==>

let aItems = this.props.arr.map(a=><Item str={a}></Item>)

 

 

 

[12,58,99,86,45,91]

[不及格,不及格,及格,及格,不及格,及格]

 

[45,57,135,28]

[

{name:'blue',level:0,role:0},

{name:'zhangsan',level:99,role:3},

{name:'aaa',level:0,role:0},

{name:'blue',level:0,role:0}

]

 

let score = [19,85,99,25,90];

let result = score.map(item=> item >=60 ?'及格':'不及格');

alert(score);//19,85,99,25,90

alert(result);//不及格,及格,及格,不及格,及格

 

比方说：时间，不显示今天显示

 

reduce 汇总（本意是减小） 一堆出来一个

算个总数

[12,8000000,59999] => 8060011

 

let arr = [12,69,180,8763];

//tmp是中间结果,item是项，index是下指标 1,2,3

let result = arr.reduce(function(tmp,item,index){

//alert(tmp+','+item+','+index); //12,69,1 undefined,180,2 undefined,8763,3

return tmp+item;

})

alert(result);//9024

 

算个平均数

[12,59,99] => 56.67

 

let arr = [12,69,180,8763];

 

/* //tmp是中间结果,item是项，index是下指标 1,2,3

let result = arr.reduce(function(tmp,item,index){

return tmp+item;

})

//alert(result/arr.length);// */

//tmp是中间结果,item是项，index是下指标 1,2,3

let result = arr.reduce(function(tmp,item,index){

if(index != arr.length-1){ //不是最后一次

return tmp+item;

}

else{ //最后一次

return (tmp+item)/arr.length;

}

})

alert(result);//2256 算平均值

 

filter 过滤器

 

let arr = [12,5,8,99,27,36,75,11];

let result = arr.filter(item=>item%3==0);

alert(result);//12,5,8,99,27,36,75

 

 

let arr = [

{title:'男士寸衫',price:75},

{title:'女士包',price:57842},

{title:'男士包',price:65},

{title:'女士鞋',price:27531},

];

let result = arr.filter(json=> json.price >=10000);

console.log(result);

 

forEach 循环（迭代）

 

let arr = [12,5,8,9];

 

/* arr.forEach(item=>{

alert(item);

}); */

arr.forEach((item,index)=>{

alert(index+':'+item);

});

 

5.字符串

 

1).多了两个新方法

 

startsWith

 

endsWith

 

2).字符串模板

字符串链接

 

i.直接把东西塞到字符串里面 ${东西}

ii.能够折行

 

6.面向对象

 

class Test{

constructor(){

this.xxx=

}

 

方法1(){

 

}

方法2(){

 

}

}

 

class Cls2 extends Cls1{

constructor(){

super();

}

}

 

 

 

 

ES6面向对象

1.class 关键字、构造器和类分开了

2.calss 里面直接加方法

 

/* 老的写法，类和构造函数都是User

function User(name,pass){

this.name = name;

this.pass = pass;

}

 

User.prototype.showName = function(){

alert(this.name);

};

 

User.prototype.showPass = function(){

alert(this.pass);

};

 

var u1 = new User('blue','123456');

u1.showName();

u1.showPass(); */

 

//新的写法 构造器和类分开了

class User{

//构造器

constructor(name,pass){

this.name = name;

this.pass = pass;

}

showName(){

alert(this.name);

}

showPass(){

alert(this.pass);

}

}

 

var u1 = new User('blue','123456');

u1.showName();

u1.showPass();

 

继承:

 

super--超类 = 父类

 

//老的写法，继承

/* function User(name,pass){

this.name = name;

this.pass = pass;

}

 

User.prototype.showName = function(){

alert(this.name);

};

 

User.prototype.showPass = function(){

alert(this.pass);

};

 

function VipUser(name,pass,level){

User.call(this,name,pass);

this.level = level;

}

 

VipUser.prototype = new User();

VipUser.prototype.constructor = VipUser;

 

VipUser.prototype.showLevel = function(){

alert(this.level);

}

 

var v1 = new VipUser('blue','123456',3);

v1.showName();

v1.showPass();

v1.showLevel(); */

 

//新的写法 构造器和类分开了

class User{

//构造器

constructor(name,pass){

this.name = name;

this.pass = pass;

}

showName(){

alert(this.name);

}

showPass(){

alert(this.pass);

}

}

 

class VipUser extends User{

//构造器

constructor(name,pass,level){

super(name,pass);//执行父类的构造函数

this.level = level;

}

 

showLevel(){

alert(this.level);

}

}

 

var v1 = new VipUser('blue','123456',3);

v1.showName();

v1.showPass();

v1.showLevel();

 

面向对象的应用-React

 

React:

1.组件化-class

2.强依赖JSX(==babel==browser.js)

 

JSX -JS的扩展版

---------------------------------

 

7.JSON

 

JSON.stringify({a:12,b:5}) => '{"a":12,"b":5}'

JSON.parse('{"a":12,"b":5}')=> {a:12,b:5}

 

1.JSON对象

JSON.stringify stringify:字符串化,变成字符串

JSON.parse;//解析

 

2.简写

名字和值(key和value)同样，留一个就行

let a = 12;

let b = 5;

 

//let json = {a:a,b:b,c:55};//key和value同样

let json = {a,b,c:55};//key和value同样

 

console.log(json);

 

 

方法 :function 一块删除

let json = {

a:12,

/* show:function(){

alert(this.a);

} */

show(){ //去掉:function

alert(this.a);

}

};

json.show();

 

 

json的标准写法：

1.只能用双引号

2.全部的名字都必须用引号包起来

 

{a:12,b:5} 错

{"a":12,"b":5} 对

 

{a:'abc',b:5} 错

{"a":"abc","b":5} 对

 

8.Promise---------承诺

 

封装异步操做

Promise.all([]);

 

 

异步:操做之间没啥关系，同时进行多个操做。

同步:同时只能作一件事

 

异步:代码更复杂

同步:代码简单

 

异步：

ajax('/banners',function(banner_data){

ajax('/hotItems',function(/hotitem_data){

},function(){

alert('读取失败');

});

 

},function(){

alert('读取失败');

});

 

同步：

let banner_data = ajax_async('/banners');

let hotitem_data = ajax_async('/hotItems');

 

Promise--------- 消除异步操做

* 用同步同样的方式，来书写异步代码

 

Promise到底怎么用

 

<script src="jquery.js"></script>

<script>

//reslolve:解决,reject：拒绝

let p = new Promise(function(reslolve,reject){

//异步代码

//reslolve---成功了

//reject ----失败了

 

alert(reslolve);

 

$.ajax({

url:'data/arr.txt',// [12,5,8,9,22,33,44]

dataType:'json',

success(arr){

reslolve(arr);

},

error(err){

//alert('错了');

reject(err);

}

});

});

//then而后，p执行有结果，而后

p.then(function(arr){

alert('成功'+arr);

},

function(err){

console.log(err);

alert('失败了'+err);

});

</script>

 

有了Promise以后的异步：

Promise.all([$.ajax(),$.ajax()]).then(results=> {

//对了

},error=>{

//错了

});

race(竞赛，赛车，)

Promise.all 都，一个都不能少，&的含义

Promise.race 竞速 同时读五个资源，谁先来就用谁的

 

 

9.generator --生成器

 

function *show(){

yield

}

 

 

generat --生成

 

普通函数 ---一路到底

generator函数 ---中间能停，踹一脚走一步

 

function *show(){

alert('a');

 

yield;//放弃，暂时放弃执行

 

alert('b');

}

let genObj = show();

 

//console.log(genObj);

genObj.next();

genObj.next();

 

yield传参

 

yield返回

 

 

10.模块化