成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

es6:常用命令(2)

wua_wua2012 / 3057人閱讀

摘要:本身是一個(gè)構(gòu)造函數(shù),用來(lái)生成數(shù)據(jù)結(jié)構(gòu)。結(jié)構(gòu)具有的屬性構(gòu)造函數(shù),默認(rèn)是函數(shù)。舉例鏈?zhǔn)絼h除某個(gè)鍵清空對(duì)象是一個(gè)構(gòu)造函數(shù),用來(lái)生成實(shí)例,是異步編程的一種解決方案。構(gòu)造函數(shù)接受一個(gè)函數(shù)作為參數(shù),該函數(shù)的兩個(gè)參數(shù)分別是函數(shù)和。

1、 Set 和 Map數(shù)據(jù)結(jié)構(gòu) Set 數(shù)據(jù)結(jié)構(gòu)

Set 類(lèi)似數(shù)組,但是成員是唯一的,不存在重復(fù)值。
Set本身是一個(gè)構(gòu)造函數(shù),用來(lái)生成Set數(shù)據(jù)結(jié)構(gòu)。
Set結(jié)構(gòu)具有的屬性:

   - Set.prototype.constructor:構(gòu)造函數(shù),默認(rèn)是Set函數(shù)。
   - Set.prototype.size:返回Set的成員個(gè)數(shù)。

Set結(jié)構(gòu)具有的方法

   - add(value):添加值;
   - delete(value):刪除值
   - has(value):返回一個(gè)布爾值,
   - clear(): 清空所有成員

    舉例:
        var s = new Set();
        
        //通過(guò)add方法向Set結(jié)構(gòu)中加入成員
        [1,2,3,3,4].map(x => s.add(x))
        //Set結(jié)構(gòu)不會(huì)添加重復(fù)值
        
        console.log(s) //{1,2,3,4}
        console.log(s.size)    //4
        console.log(s.has(1))  //true
        
        s.delete(2)            //刪除某個(gè)值
        console.log(s.has(2))  //false 
        
        Array.from方法可以將Set結(jié)構(gòu)轉(zhuǎn)為數(shù)組。
        const arr1 = [1,2,3,4];
        const items = new Set(arr1);    //{1,2,3,4}
        const array = Array.from(items) //[1,2,3,4]
        
        Set數(shù)組去重的方法:
        function dedupe(array){
            return Array.from(new Set(array));
        } 
        dedupe([1,1,2,3])    //[1,2,3]
Map 數(shù)據(jù)結(jié)構(gòu)

Map 類(lèi)似對(duì)象,也是鍵值對(duì)的集合,但是"鍵"的范圍不限于字符串,各種類(lèi)型的值(包括對(duì)象)都可以當(dāng)作鍵。
Map本身也是構(gòu)造函數(shù),也可以接受一個(gè)數(shù)組作為參數(shù)
Map實(shí)例具有的屬性:

    - size屬性:返回Map結(jié)構(gòu)的成員總數(shù)

Map實(shí)例具有的方法:
     - set(key, value):設(shè)置鍵名key對(duì)應(yīng)的鍵值value,然后返回整個(gè)Map結(jié)構(gòu),如果key已經(jīng)存在,則鍵值更新;
     - get(key):讀取key對(duì)應(yīng)的鍵值,如果找不到key,返回undefined;
     
     - has(key):返回一個(gè)布爾值;
     - delete(key):刪除某個(gè)鍵,返回布爾值;
     - clear(): 清除所有成員,沒(méi)有返回值。
 舉例:
     let map = new Map();
     map.set("name","liyong").set("age",10);
     
     console.log(map); //鏈?zhǔn)絳"name" => "liyong","age"=>10}
     console.log(map.size);         // 2
     console.log(map.has("name"))   // true
     console.log(map.get("name"))   // "liyong"
     
     map.delete("name");            // 刪除某個(gè)鍵
     console.log(map.has("name"))   // false
     console.log(map.get("name"))   // undefined
     console.log(map.size)          // 1
     
     map.clear();                   // 清空
     console.log(map.size)          // 0
2、 Promise 對(duì)象

Promise是一個(gè)構(gòu)造函數(shù),用來(lái)生成Promise實(shí)例,是異步編程的一種解決方案。
Promise構(gòu)造函數(shù)接受一個(gè)函數(shù)作為參數(shù),該函數(shù)的兩個(gè)參數(shù)分別是函數(shù)resolve 和 rejected。
resolve函數(shù)作用是,異步操作成功后調(diào)用,并將異步操作結(jié)果作為參數(shù)傳遞出去;
reject函數(shù)的作用是,異步操作失敗時(shí)調(diào)用,并將異步操作結(jié)果作為參數(shù)傳遞出去。
Promise的基本用法:

//方法1
let promise = new Promise((resolve, reject)=>{
    if(success){
        resolve(data)
    }else{
        reject(err)
    }
})

//方法2
function promise (){
    return new Promise((resolve, reject)=>{
        if(success){
            resolve(a)
        }else{
            reject(err)
        }
    })
}
實(shí)例化的Promise對(duì)象會(huì)立即執(zhí)行。
2.1 Promise.prototype.then()方法

Promise實(shí)例具有then方法,then方法是定義在原型對(duì)象Promise.prototype上的。then方法的第一個(gè)參數(shù)是resolved狀態(tài)的回調(diào)函數(shù),第二個(gè)參數(shù)(可選)是rejected狀態(tài)的回調(diào)函數(shù)。
鏈?zhǔn)讲僮鞯挠梅?

    //第一個(gè)函數(shù)runAsync1()
    function runAsync1(){
        let p = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve("第一個(gè)回調(diào)成功")
            },1000)
        });
        return p;
    }
     //第二個(gè)函數(shù)runAsync2()
    function runAsync2(){
        let p = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                reject("第二個(gè)回調(diào)失敗")
            },2000)
        });
        return p;
    }
     //第三個(gè)函數(shù)runAsync3()
    function runAsync3(){
        let p = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                reject("第三個(gè)回調(diào)成功")
            },3000)
        });
        return p;
    }
    runAsync1()
    .then((data)=>{
        console.log(data);
        return runAsync2();
    },(error)=>{
        console.log(err);
        return runAsync2();
    })
    .then((data)=>{
        console.log(data);
        return runAsync3();
    },(error)=>{
        console.log(error);
        return runAsync3();
    }).then((data)=>{
        console.log(data)
    },(error)=>{
        console.log(error)
    })
    // 第一個(gè)回調(diào)成功
    // 第二個(gè)回調(diào)失敗
    // 第三個(gè)回調(diào)成功
2.2 Promise.prototype.catch()方法

Promise.prototype.catch方法是.then(null,()=>{})的別名,用于指定發(fā)生錯(cuò)誤時(shí)的回調(diào)函數(shù)。
舉例:

用Promise對(duì)象實(shí)現(xiàn)Ajax操作的例子
const getJSON = function(type,url){
    const promise = new Promise((resolve, reject)=>{
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = handler;
        xhr.open(type,url,true);
        xhr.responseType = "json";
        xhr.setRequestHeader("Accept", "application/json");
        xhr.send();
        function handler(){
            if(this.readyState !== 4){
                return;
            }
            if(this.status == 200){
                resolve(this.response)
            }else{
                reject(new Error(this.statusText))
            }
        }
    });
    return promise;
}
//測(cè)試
getJSON("get","data/cartData.json")
    .then((response)=>{
        console.log(response)
    })
    .catch((error)=>{
        console.log(error)
    })
getJSON是對(duì)XMLHttpRequest 對(duì)象的封裝,用于發(fā)出一個(gè)針對(duì)JSON數(shù)據(jù)的HTPP請(qǐng)求,并且返回一個(gè)Promise對(duì)象
2.3 Promise.prototype.all()方法

Promise的all用法提供并行執(zhí)行異步操作,并且在所有的異步操作執(zhí)行完成后執(zhí)行回調(diào)。
使用場(chǎng)景:

一些游戲素材比較多的應(yīng)用,打開(kāi)網(wǎng)頁(yè)時(shí),預(yù)先加載需要用到的各種資源,
所有的都加載完后,我們?cè)谶M(jìn)行頁(yè)面的初始化。all方法的實(shí)際效果是,誰(shuí)跑的慢就以誰(shuí)為執(zhí)行回調(diào)
舉例:
還是上面的三個(gè)函數(shù)runAsync1()、runAsync2()、runAsync3()。
Promise
    .all([runAsync1(), runAsync2(), runAsync3()])
    .then((result)=>{
        console.log(result)
    })
    .catch((error)=>{
        console.log(error)
    })
    //第二個(gè)回調(diào)失敗
2.4 Promise.prototype.race()方法

Promise.race方法同樣是將多個(gè)Promise實(shí)例,包裝成一個(gè)新的Promise實(shí)例。
用法:

 const p = Promise.race([p1,p2,p3]);    
上面代碼中,只要p1、p2、p3之中的一個(gè)實(shí)例先改變狀態(tài),p的狀態(tài)就跟著改變。那個(gè)先改變的Promise實(shí)例的返回值,就傳遞給p的回調(diào)函數(shù)。

舉例:

//加載圖片超時(shí)的處理
function request(url){
    let p = new Promise((resolve, reject)=>{
        let img = new Image();
        img.onload = resolve;
        img.src = url;
    });
    return p;
}
//延遲函數(shù),用于給請(qǐng)求計(jì)時(shí)
function timeout(){
    let p = new Promise((resolve, reject)=>{
        setTimeout(()=>{
            reject("圖片超時(shí)")
        },5000)
    });
    return p;
}
Promise
    .race([requestImg("../../img/1.1.jpg"), timeout()])
    .then((result)=>{
        console.log(result)
    })
    .catch((reason)=>{
        console.log(reason)
    })

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/107348.html

相關(guān)文章

  • 前端常用4種模塊化方案總結(jié).md

    摘要:最后衍生出面向各種使用場(chǎng)景的模塊標(biāo)準(zhǔn)。定義模塊返回對(duì)象的匿名模塊調(diào)用模塊應(yīng)用由模塊組成,采用模塊規(guī)范。其模塊功能主要由兩個(gè)命令構(gòu)成和。命令用于規(guī)定模塊的對(duì)外接口,導(dǎo)出模塊暴露的命令用于輸入其他模塊提供的功能引入其他模塊。 JS誕生之初面向簡(jiǎn)單頁(yè)面開(kāi)發(fā), 沒(méi)有模塊的概念。后來(lái)頁(yè)面逐漸復(fù)雜, 人類(lèi)構(gòu)造到 IIFE 立即執(zhí)行函數(shù)來(lái)模擬 模塊;之前也有雅虎的實(shí)踐,使用命名空間 作為模塊名。最后...

    lookSomeone 評(píng)論0 收藏0
  • ES6常用新特性——讀《Understanding ECMAScript 6》總結(jié)

    摘要:對(duì)象解構(gòu)對(duì)象解構(gòu)語(yǔ)法在賦值語(yǔ)句的左側(cè)使用了對(duì)象字面量,例如代碼中,的值被存儲(chǔ)到本地變量中,的值則存儲(chǔ)到變量中。當(dāng)使用解構(gòu)賦值語(yǔ)句時(shí),如果所指定的本地變量在對(duì)象中沒(méi)有找到同名屬性,那么該變量會(huì)被賦值為。 現(xiàn)在ES6在很多項(xiàng)目中大量使用。最近我也花時(shí)間看了一下《Understanding ECMAScript6》的中文電子書(shū)。在這里總結(jié)了一些在實(shí)際開(kāi)發(fā)中常用的新特性。 塊級(jí)作用域 在ES6...

    jsliang 評(píng)論0 收藏0
  • es6常用的使用

    摘要:使用定義常量應(yīng)該注意,的作用域與命令相同只在聲明所在的塊級(jí)作用域內(nèi)有效。,命令聲明的常量也是不提升,同樣存在暫時(shí)性死區(qū),只能在聲明的位置后面使用。使用的時(shí)候,也是直接對(duì)類(lèi)使用命令,跟構(gòu)造函數(shù)的用法完全一致。執(zhí)行父級(jí)的構(gòu)造函數(shù)。 一,let塊級(jí)作用域 由于js的歷史原因。javascript里的es6規(guī)范之前,只要函數(shù)作用域。當(dāng)寫(xiě)一些大型的項(xiàng)目代碼中,很容易產(chǎn)生全局變量,例如: ...

    wuyangnju 評(píng)論0 收藏0
  • ES6 編寫(xiě) Webpack 的配置文件

    摘要:在執(zhí)行時(shí)會(huì)先用把配置文件轉(zhuǎn)成代碼再繼續(xù)處理。只要你把配置文件命名成,就會(huì)用相應(yīng)的去轉(zhuǎn)換一遍配置文件。它沒(méi)改的文件名,但配置文件和各種腳本都是完全的語(yǔ)法。這是提供的一個(gè)命令行工具,你可以用它代替去執(zhí)行文件。總結(jié)得益于,幾乎已經(jīng)是現(xiàn)在的標(biāo)配了。 概述 我最近在整理一個(gè) Ionic + Webpack 的項(xiàng)目模板,因?yàn)轫?xiàng)目代碼都是 ES6 的,所以我也想在其他地方也用 ES6 。其中一個(gè)地方...

    Rocture 評(píng)論0 收藏0
  • Javascript ES6學(xué)習(xí)

    摘要:以下簡(jiǎn)稱是語(yǔ)言的下一代標(biāo)準(zhǔn)。因?yàn)楫?dāng)前版本的是在年發(fā)布的,所以又稱。命令用于規(guī)定模塊的對(duì)外接口,命令用于輸入其他模塊提供的功能。需要特別注意的是,命令規(guī)定的是對(duì)外的接口,必須與模塊內(nèi)部的變量建立一一對(duì)應(yīng)關(guān)系。 ECMAScript 6(以下簡(jiǎn)稱ES6)是JavaScript語(yǔ)言的下一代標(biāo)準(zhǔn)。因?yàn)楫?dāng)前版本的ES6是在2015年發(fā)布的,所以又稱ECMAScript 2015。 最常用的ES6...

    gclove 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

wua_wua2012

|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<