摘要:本身是一個構(gòu)造函數(shù),用來生成數(shù)據(jù)結(jié)構(gòu)。結(jié)構(gòu)具有的屬性構(gòu)造函數(shù),默認(rèn)是函數(shù)。舉例鏈?zhǔn)絼h除某個鍵清空對象是一個構(gòu)造函數(shù),用來生成實例,是異步編程的一種解決方案。構(gòu)造函數(shù)接受一個函數(shù)作為參數(shù),該函數(shù)的兩個參數(shù)分別是函數(shù)和。
1、 Set 和 Map數(shù)據(jù)結(jié)構(gòu) Set 數(shù)據(jù)結(jié)構(gòu)
Set 類似數(shù)組,但是成員是唯一的,不存在重復(fù)值。
Set本身是一個構(gòu)造函數(shù),用來生成Set數(shù)據(jù)結(jié)構(gòu)。
Set結(jié)構(gòu)具有的屬性:
- Set.prototype.constructor:構(gòu)造函數(shù),默認(rèn)是Set函數(shù)。 - Set.prototype.size:返回Set的成員個數(shù)。
Set結(jié)構(gòu)具有的方法
- add(value):添加值; - delete(value):刪除值 - has(value):返回一個布爾值, - clear(): 清空所有成員
舉例: var s = new Set(); //通過add方法向Set結(jié)構(gòu)中加入成員 [1,2,3,3,4].map(x => s.add(x)) //Set結(jié)構(gòu)不會添加重復(fù)值 console.log(s) //{1,2,3,4} console.log(s.size) //4 console.log(s.has(1)) //true s.delete(2) //刪除某個值 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 類似對象,也是鍵值對的集合,但是"鍵"的范圍不限于字符串,各種類型的值(包括對象)都可以當(dāng)作鍵。
Map本身也是構(gòu)造函數(shù),也可以接受一個數(shù)組作為參數(shù)
Map實例具有的屬性:
- size屬性:返回Map結(jié)構(gòu)的成員總數(shù)
Map實例具有的方法: - set(key, value):設(shè)置鍵名key對應(yīng)的鍵值value,然后返回整個Map結(jié)構(gòu),如果key已經(jīng)存在,則鍵值更新; - get(key):讀取key對應(yīng)的鍵值,如果找不到key,返回undefined; - has(key):返回一個布爾值; - delete(key):刪除某個鍵,返回布爾值; - clear(): 清除所有成員,沒有返回值。 舉例: 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"); // 刪除某個鍵 console.log(map.has("name")) // false console.log(map.get("name")) // undefined console.log(map.size) // 1 map.clear(); // 清空 console.log(map.size) // 02、 Promise 對象
Promise是一個構(gòu)造函數(shù),用來生成Promise實例,是異步編程的一種解決方案。
Promise構(gòu)造函數(shù)接受一個函數(shù)作為參數(shù),該函數(shù)的兩個參數(shù)分別是函數(shù)resolve 和 rejected。
resolve函數(shù)作用是,異步操作成功后調(diào)用,并將異步操作結(jié)果作為參數(shù)傳遞出去;
reject函數(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) } }) } 實例化的Promise對象會立即執(zhí)行。2.1 Promise.prototype.then()方法
Promise實例具有then方法,then方法是定義在原型對象Promise.prototype上的。then方法的第一個參數(shù)是resolved狀態(tài)的回調(diào)函數(shù),第二個參數(shù)(可選)是rejected狀態(tài)的回調(diào)函數(shù)。
鏈?zhǔn)讲僮鞯挠梅?
//第一個函數(shù)runAsync1() function runAsync1(){ let p = new Promise((resolve, reject)=>{ setTimeout(()=>{ resolve("第一個回調(diào)成功") },1000) }); return p; } //第二個函數(shù)runAsync2() function runAsync2(){ let p = new Promise((resolve, reject)=>{ setTimeout(()=>{ reject("第二個回調(diào)失敗") },2000) }); return p; } //第三個函數(shù)runAsync3() function runAsync3(){ let p = new Promise((resolve, reject)=>{ setTimeout(()=>{ reject("第三個回調(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) }) // 第一個回調(diào)成功 // 第二個回調(diào)失敗 // 第三個回調(diào)成功2.2 Promise.prototype.catch()方法
Promise.prototype.catch方法是.then(null,()=>{})的別名,用于指定發(fā)生錯誤時的回調(diào)函數(shù)。
舉例:
用Promise對象實現(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; } //測試 getJSON("get","data/cartData.json") .then((response)=>{ console.log(response) }) .catch((error)=>{ console.log(error) }) getJSON是對XMLHttpRequest 對象的封裝,用于發(fā)出一個針對JSON數(shù)據(jù)的HTPP請求,并且返回一個Promise對象2.3 Promise.prototype.all()方法
Promise的all用法提供并行執(zhí)行異步操作,并且在所有的異步操作執(zhí)行完成后執(zhí)行回調(diào)。
使用場景:
一些游戲素材比較多的應(yīng)用,打開網(wǎng)頁時,預(yù)先加載需要用到的各種資源, 所有的都加載完后,我們在進(jìn)行頁面的初始化。all方法的實際效果是,誰跑的慢就以誰為執(zhí)行回調(diào) 舉例: 還是上面的三個函數(shù)runAsync1()、runAsync2()、runAsync3()。 Promise .all([runAsync1(), runAsync2(), runAsync3()]) .then((result)=>{ console.log(result) }) .catch((error)=>{ console.log(error) }) //第二個回調(diào)失敗2.4 Promise.prototype.race()方法
Promise.race方法同樣是將多個Promise實例,包裝成一個新的Promise實例。
用法:
const p = Promise.race([p1,p2,p3]); 上面代碼中,只要p1、p2、p3之中的一個實例先改變狀態(tài),p的狀態(tài)就跟著改變。那個先改變的Promise實例的返回值,就傳遞給p的回調(diào)函數(shù)。
舉例:
//加載圖片超時的處理 function request(url){ let p = new Promise((resolve, reject)=>{ let img = new Image(); img.onload = resolve; img.src = url; }); return p; } //延遲函數(shù),用于給請求計時 function timeout(){ let p = new Promise((resolve, reject)=>{ setTimeout(()=>{ reject("圖片超時") },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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/107348.html
摘要:最后衍生出面向各種使用場景的模塊標(biāo)準(zhǔn)。定義模塊返回對象的匿名模塊調(diào)用模塊應(yīng)用由模塊組成,采用模塊規(guī)范。其模塊功能主要由兩個命令構(gòu)成和。命令用于規(guī)定模塊的對外接口,導(dǎo)出模塊暴露的命令用于輸入其他模塊提供的功能引入其他模塊。 JS誕生之初面向簡單頁面開發(fā), 沒有模塊的概念。后來頁面逐漸復(fù)雜, 人類構(gòu)造到 IIFE 立即執(zhí)行函數(shù)來模擬 模塊;之前也有雅虎的實踐,使用命名空間 作為模塊名。最后...
摘要:對象解構(gòu)對象解構(gòu)語法在賦值語句的左側(cè)使用了對象字面量,例如代碼中,的值被存儲到本地變量中,的值則存儲到變量中。當(dāng)使用解構(gòu)賦值語句時,如果所指定的本地變量在對象中沒有找到同名屬性,那么該變量會被賦值為。 現(xiàn)在ES6在很多項目中大量使用。最近我也花時間看了一下《Understanding ECMAScript6》的中文電子書。在這里總結(jié)了一些在實際開發(fā)中常用的新特性。 塊級作用域 在ES6...
摘要:在執(zhí)行時會先用把配置文件轉(zhuǎn)成代碼再繼續(xù)處理。只要你把配置文件命名成,就會用相應(yīng)的去轉(zhuǎn)換一遍配置文件。它沒改的文件名,但配置文件和各種腳本都是完全的語法。這是提供的一個命令行工具,你可以用它代替去執(zhí)行文件。總結(jié)得益于,幾乎已經(jīng)是現(xiàn)在的標(biāo)配了。 概述 我最近在整理一個 Ionic + Webpack 的項目模板,因為項目代碼都是 ES6 的,所以我也想在其他地方也用 ES6 。其中一個地方...
摘要:以下簡稱是語言的下一代標(biāo)準(zhǔn)。因為當(dāng)前版本的是在年發(fā)布的,所以又稱。命令用于規(guī)定模塊的對外接口,命令用于輸入其他模塊提供的功能。需要特別注意的是,命令規(guī)定的是對外的接口,必須與模塊內(nèi)部的變量建立一一對應(yīng)關(guān)系。 ECMAScript 6(以下簡稱ES6)是JavaScript語言的下一代標(biāo)準(zhǔn)。因為當(dāng)前版本的ES6是在2015年發(fā)布的,所以又稱ECMAScript 2015。 最常用的ES6...
閱讀 848·2023-04-25 23:59
閱讀 3738·2021-10-08 10:04
閱讀 1679·2019-08-30 14:05
閱讀 1015·2019-08-30 13:58
閱讀 489·2019-08-29 18:41
閱讀 1125·2019-08-29 17:15
閱讀 2318·2019-08-29 14:13
閱讀 2744·2019-08-29 13:27