如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

這周萌芽決定好好學習一下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}`);

預覽版，目前極大多數瀏覽器都不支持，以后可能會支持，了解一下就好。
藍藍設計( m.shtzxx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。