學(xué)習(xí)ES6

canger 發(fā)布于2019-08-23 11:37 / 1897人閱讀

摘要：第二章學(xué)習(xí)函數(shù)的參數(shù)和擴(kuò)展點(diǎn)為鍵上面那個(gè)參數(shù)箭頭函數(shù)數(shù)組合并解構(gòu)使用解決回調(diào)地獄問(wèn)題，使結(jié)構(gòu)更加清晰。概念是在推廣過(guò)程中對(duì)模塊定義的規(guī)范化產(chǎn)出。通過(guò)引入依賴規(guī)范服務(wù)端使用的規(guī)范。帶名字的輸出默認(rèn)輸出概念上面有講注意事項(xiàng)，需掌握的東西

(第二章)學(xué)習(xí)ES6 函數(shù)的Rest參數(shù)和擴(kuò)展

//ES5
function sum(x,y,z){
    let total = 0;
    if(x)total+=x;
    if(y)total+=y;
    if(z)total+=z;
    //`點(diǎn)為tab鍵上面那個(gè)
    console.log(`tatal:${total}`);
};
sum(3,4,6);

//ES6 rest參數(shù)
function sum2(...m){
    let total = 0;
    for(i of m){
        total+=i;
    };
    console.log(total)
};
sum2(2,4,6);


//ES6 箭頭函數(shù)
let = sum3 = (...m)=>{
    let total = 0;
    for(i of m){
        total+=i;
    };
    console.log(total)
};
sum3(1,3,5,7)；

//數(shù)組合并(解構(gòu))
//ES5
let arr1 = [1,3],arr2 = [5,7];
console.log("concat:"+arr1.concat(arr2));
//ES6
console.log(...arr1,...arr2);

Promise使用

//解決回調(diào)地獄問(wèn)題，使結(jié)構(gòu)更加清晰。
let checkLogin = ()=>{
    return new Promise((resolve,reject)=>{
        let flag = document.cookie.indexOf("userId")>-1?true:false;
        if(flag = true){
            resolve({
                status:0,
                result:true
            })
        }else{
            reject("error")
        };
    });
};
checkLogin().then((res)=>{
    if(res.status == 0){
        console.log("login success");
    }
}).catch((err)=>{
    console.log(`error:${err}`);
});

//多個(gè)請(qǐng)求
Promise.all([checkLogin(),getTest()]).then(([res1,res2]))=>{
    console.log(res1.result,res2.result);
}

module.exports和ES6 import/export的使用

//導(dǎo)出出有名字的  引用就需要加{};
import {sum} from "./util";
//使用
console.log(sum(1,2));
export let = sum = (x,y){
    return x+y;
};
//另一只方式也可以這樣引用
import * as util from "./util";
//使用
console.log(util.sum(1,2));

AMD/CMD.commonJs和E6對(duì)比




- AMD概念：是RequireJs在推廣過(guò)程中的模板定義的規(guī)范化產(chǎn)出。

    define(["package/lib],function(lib){
        finction foo(){
            lib.log("hello word!");
        };
        return {
            foo:foo
        }
    });
    
    cmd概念：是SeaJs在推廣過(guò)程中對(duì)模塊定義的規(guī)范化產(chǎn)出。
    define(function(require,exports,module){
        //通過(guò) require 引入依賴
        var $ = require("jquery");
    })
    
    commonJs規(guī)范 - module.exports(nodejs服務(wù)端使用的規(guī)范)。
    //帶名字的輸出
    exports.area = function(r){
        return Math.PI*r*r;
    };
    //默認(rèn)輸出
    module.export= {};
    
    ES6概念：export/import(上面有講注意事項(xiàng)，需掌握的東西)