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