2019-6-27 seo達人
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
這周萌芽決定好好學習一下ES6，感興趣的小伙伴們來一起學習吧~
ES6(ES2015)——IE10+、Chrome、FireFox、移動端、Node.js
編譯轉換
1.在線轉換（browser.js）
2.提前編譯
ES6新特性
1.變量
2.函數
3.數組
4.字符串
5.面向對象
6.promise（串行化異步交互）
7.generator（把同步拆分為異步）
8.模塊化（ES6自帶模塊化）
變量
var
1.可以重復聲明
2.無法限制修改
3.沒有塊級作用域（沒有語法塊！）
let 不能重復聲明(變量，可以修改)
const 不能重復聲明(常量，不能修改)
塊級作用域，let在外部無法調用
函數
箭頭函數 =>
function show(){
//這是我們平常的函數
}
let show=()=>{
//箭頭函數
}
//區別不大，把function省略掉換成箭頭，主要就是為了方便，可傳參
1.如果只有一個參數，（）可以省去。
let show=a=>{
return a*2
}
2.如果只有一個return，{}可以省略
let show=a=>a*2;
let arr = [15,2,37,11,67,4,6]; //排序
arr.sort((n1,n2)=>{
return n1-n2;
})
arr.sort((n1,n2)=> n1-n2 );
console.log(arr)
函數的參數
1.參數擴展/展開
2.默認參數
參數的擴展
1.收集參數
function arrData(a,b,...args) {
alert(a);
alert(b);
alert(args);
}
*注意：Rest Parameter必須是最后一個(除其他語言)
1
2.展開數組
arrData(...arr); //等價于 arrData(1,2,3);
1
這仨點兒【…】代表把數組內容掏出來放這。
默認參數
//jQuery中的默認參數
$('#div1').animate({width:'200px'});
$('#div1').animate({width:'200px'},1000);
//ES6默認傳參
function showOne(a,b=10,c=5) {
console.log(a,b,c)
}
解構賦值
1.左右兩邊解構必須一樣
2.右邊必須是個合法的東西
3.聲明和賦值不能分開(必須在一句話里完成)
let [one,two,three] = [10,20,30];
let {one1,two2,three3} = {a:10,b:20,c:30};
數組
map 映射（一個對一個。傳幾個返回幾個）
let result = arr.map(function (item) {
return item*2;
});//簡寫一下
let result = arr.map(item=>item*2 );
//判斷考試成績
let score = [19,18,78,65,100];
let result = score.map(item=>item>=60?'及格':'不及格');
reduce 匯總（算個總數，算個平均數）
//tmp：上次求和總和，為兩兩相加，如果之前沒有結果則為傳進來的數組的第一個數。
//itme：當前的數。
//index：執行的次數。
let result = arr.reduce(function (tmp, item, index) {
return tmp + item;
});
//簡寫
arr.reduce((tmp, item, index)=>tmp + item);
filter 過濾器(篩選掉不需要的)
let result = arr.filter(item=>{
if (item%2 == 0){
return true;
} else {
return false;
}
});
//簡寫
let result = arr.filter(item=>item%2 == 0);
//***萌芽在這里提一下！json和之前的item都不是固定的，可以隨便命名。意思都是當前的值！
let arrProce = [
{title:'男士襯衫',price:75},
{title:'女士包包',price:5000},
{title:'男士包包',price:20},
{title:'女士鞋',price:2500}
];
let result = arrProce.filter(jsom=>json.price >= 2000);
console.log(result);
forEach循環(迭代)
arr.forEach((item,index)=>{
alert(index+":"+item)
})
字符串
1.多了倆新方法
startsWith()； //判斷開頭，返回布爾類型
endWith()； //判斷結尾，返回布爾類型
let str='hello,world!'
str.startsWith('h')
str.endWith('!') //返回true
2.字符串模板
字符串連接
2.1直接把東西塞進字符串里面 ${東西}
2.2可以折行
<h1>${title}</h1>
<p>${content}</p>
ES6的面向對象
1.class關鍵字，構造器和類分開啦。
2.class里面直接加方法。
class User{
constructor(name,password){ //構造器
this.name = name;
this.password = password;
}
showName(){
alert(this.name);
}
showPass(){
alert(this.password);
}
}
var user = new User('萌芽子','123456');
user.showName();
user.showPass();
繼承
class VipUser extends User{
constructor(name,password,age){
super(name,password); //super 超類
this.age = age;
}
showAge(){
alert(this.age)
}
}
var user = new VipUser('萌芽子','123456','18歲');
user.showName();
user.showPass();
user.showAge();
不得不說作為一只JAVA汪，這種寫法真得勁！
面向對象的應用
React
1.組件化（class）
2.JSX（JSXbabelbrowser.js）
JSX屬于JS的擴展版
class Test extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <li>{this.props.str}</li> //props:屬性
}
}
window.onload = function(){
let oDiv = document.getElementById('div1');
ReactDOM.render(
<ul>
<Item str="你好"></Item>
<Item str="世界！"></Item>
</ul>
oDiv
);
};
打卡，下次就學這個了！===============
json
1.JSON對象
JSON.stringify() json轉字符串
let json = {a:10, b:20};//JSON.stringify 字符串化
let str = 'http://www.baidu.com/path/user?data='+JSON.stringify(json);
str = 'http://www.baidu.com/path/user?data='+encodeURIComponent(JSON.stringify(json));
alert(str)
1
2
3
4
JSON.parse() 字符串轉json
let str = '{"a":12,"b":20,"c":"可樂"}';
let json = JSON.parse(str);
console.log(json);
2.簡寫
在新版的ES6當中名字一樣的鍵（key）和值（value）可以只寫一個。
let a = 12;
let b = 5;
let json = {a,b,c:21};
簡化了JSON中的方法。
let json ={
a:12,
showJson(){
alert(this.a);
}
};
json.showJson();
json的標準寫法：
1.只能用雙引號
2.所有的名字都必須用引號包起來（所有的key都必須是雙引號）
{a:12,b:5} × 錯誤的寫法
{"a":"萌萌萌","b":"芽子"} √ 正確的寫法
1
2
Promise(承諾)
異步：操作之間沒啥關系，同時進行多個操作
同步：同時只能做一件事
優缺點：
異步：代碼更復雜
同步：代碼簡單
Promise——消除異步操作
*用同步一樣的方式來書寫異步代碼；
let p = new Promise(function (resolve,reject) {
//異步代碼
//resolve——成功
//reject——失敗
})
-----------------------------------------訪問我們的arr.txt文件，這里用到了jQuery的ajax就不詳細介紹了。
let p = new Promise(function (resolve, reject) {
//異步代碼
//resolve——成功
//reject——失敗
$.ajax({
url: 'arr.txt',
dataType: 'json',
success(arr) {
resolve(arr);
}, error(err) {
reject(err);
}
})
});
//結果
p.then(function (arr) {
alert('成功啦' + arr)
}, function (err) {
alert('失敗了' + err)
console.log(err)
});
-----------------------------------------------多個請求地址
Promise.all([p1,p2]).then(function (arr){
let [res1,res2] = arr;
alert('全部成功啦');
console.log(res1);
console.log(res2);
},function (){
alert('至少有一個失敗了');
});
----------------------------再簡化
function createPromise(url){
return new Promise(function (resolve, reject) {
$.ajax({
url,
dataType: 'json',
success(arr) {
resolve(arr);
}, error(err) {
reject(err);
}
})
});
}
Promise.all([
createPromise('arr.txt'),
createPromise('json.txt')
]).then(function (arr){
let [res1,res2] = arr;
alert('全部成功啦');
console.log(res1);
console.log(res2);
},function (){
alert('至少有一個失敗了');
});
----------------------完美寫法
Promise.all([
$.ajax({url:'arr.txt',dataType:'json'}),
$.ajax({url:'json.txt',dataType:'json'})
]).then(function (results) {
let [arr,json] = results;
alert("成功了");
console.log(arr,json)
},function () {
alert("失敗了")
})
我們有了promise之后的異步：
Promise.all([ $.ajax(),$.ajax() ]).then( results=>{
//對了
},err=> {
//錯了
})
Promise.all （必須全部成功）
Promise.race（同事讀多個數據，即使失敗也沒關系）
generator(生成器)
普通函數 - 一路到底執行不可中斷
generator函數 - 可中斷
function * show() {
alert('a');
yield;//暫時放棄執行
alert('b');
}
let genObj = show();
genObj.next();
genObj.next();
yield
yield傳參
function * show(num1,num2) {
alert(`${num1},${num2}`);//es6
alert('a');
let a = yield;//暫時放棄執行
console.log(a);
alert('b');
}
let genObj = show(99,88);
genObj.next(12);//第一個next無法給yield傳參的，廢的
genObj.next(5);
yield返回
function *show() {
alert('a');
yield 12;
alert('b');
return 55;
}
let gen = show();
let res1 = gen.next();
console.log(res1); //{value: 12, done: false}
let res2 = gen.next();
console.log(res2);//{value: undefined, done: true} 加了return {value: 55, done: true}
還沒做的菜叫函數參數，過程是yield之前函數里面的東西，干凈的菜，切好的菜是中間過程也就是yield，最終我們將它返回出去！不得不說這圖很生動。
異步操作
1.回調
$.ajax({
url:'url',
dataType:'json',
success(data){
$.ajax({
url:'xxx',
dataType: 'json',
success(data) {
//完事兒了
},error(err) {
alert('錯了')
}
})
},error(){
alert('失敗')
}
})
2.Promise
Promise.all([
$.ajax({url:xxx,dataType:'json'}),
$.ajax({url:xxx,dataType:'json'}),
$.ajax({url:xxx,dataType:'json'})
]).then(results=>{
//完事兒
},err=>{
//錯誤的
})
3.generator
runner（function *（）{
let data1 = yield $.ajax({ulr:xxx,dataType:'json'});
let data2 = yield $.ajax({ulr:xxx,dataType:'json'});
let data3 = yield $.ajax({ulr:xxx,dataType:'json'});
}）
1
2
3
4
5
generator（不能用=>函數）
邏輯判斷下非常好用。
Promise：一次讀一堆。
generator：邏輯性。
runner（function *（）{
let userData = yield $.ajax({url:'getUserData',dataType:'json'});
if(userData.type == 'VIP'){
let items = yield $.ajax({url:'getVIPItems',dataTyoe:'jsom'});
}else{
let items = yield $.ajax({url:'getItems',dataTyoe:'jsom'});
}
//生成...
}
}）
總結
1.變量：
var：能重復聲明、函數級
let： 嚴格的，不能重復聲明，塊級，變量
const：嚴格的，不能重復聲明，塊級，常量
2.箭頭函數
2.1方便
i.如果只有一個參數，（）可以省
ii.如果只有一個return，{}可以省
2.2修正了this
this相對正常點
3.參數擴展
…能收集
…能擴展
默認參數
4.數組方法
map 映射
reduce 匯總
filter 過濾
forEach 循環
5.字符串
starsWith/endWith
字符串模板:${a}xxx{b}
6.Promise
封裝異步操作
Promise.all([]);
7.generator
function *show(){
yield
}
8.JSON
JSON.stringify({ a :12,b :5}) => {“a”:12,“b”:5}
JSON.parse(’{“a”:12,“b”:5}’) =>{a:12,b:5}//字符串
9.解構賦值
let [a,b,c] = [12,5,8]；
左右結構一樣，右邊是個合法的東西，連生命帶賦值一次完成。
10.面向對象
class Test(){
constructor(xxx){
this = xxx
}
方法1(){
}
方法2(){
}
}
繼承
class Test2 extends Test(){
constructor(){
super();
}
}
談談ES7和ES8
1.數組includes
數組是否包含某個東西
2.數組 keys/values/entries
for…in(循環數組)
對于數組來講循環的是下標
對于json循環的是key
for…of(循環迭代器)
對于數組循環的是值
不能用于JSON，json并不是迭代器
keys = >所有的key拿出來 0,1,2,3…
values =>所有的values拿出來 23,5,8,1…
entries =>所有的鍵值對拿出來 {key:0,value:a}
let arr = [12,5,8,99];
for(let [key,value] of arr.entries()){
alert(`${key} = ${value}`);
預覽版，目前極大多數瀏覽器都不支持，以后可能會支持，了解一下就好。
藍藍設計( www.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。