數據解構

Set

ES6 提供了新的數據結構 Set。它類似于數組，但是成員的值都是唯一的，沒有重復的值

Set 本身是一個構造函數，用來生成 Set 數據結構

  //set集合，成員是唯一的,添加過程中會替換相同的元素。這里相同的標準是===const s = new Set();s.add(1);s.add("2");s.add(3);s.add(4).add(5);console.log(s); //{ 1, '2', 3, 4, 5 }/***************==和===的區別****************************** */var a = 1;var b = "1";console.log(a == b); //true,只比較值，不比較類型console.log(a === b); //false，值和類型都比較//set類型的刪除,返回的是一個bool值s.delete(1);console.log(s);//清除所有的成員s.clear();//判斷是否存在s.has(2);//獲取成員數量s.size();//與數組結構類型轉換const set = new Set([1, 2, 3, 4, 5, 6]); //Array-->Setlet arr = Array.from(set); //Set-->Array//擴展運算符let arr2 = [...set];console.log(arr2);

  //并集、交集、差集const list1 = [1, 2, 3, 4, 5];const list2 = [2, 4, 5];var listall = list1.concat(list2);const set1 = new Set(listall);console.log([...set1]); //并集const set2 = [...new Set([...list1, ...list2])]; //并集var listjiao = list1.filter((v) => list2.includes(v));console.log(listjiao); //交集var listchaji = list1.filter((v) => !list2.includes(v));console.log(listchaji); //差集

Map

JavaScript 的對象（Object），本質上是鍵值對的集合，但是傳統上只能用字符串當作鍵。這給它的使 用帶來了很大的限制

ES6 提供了 Map 數據結構。它類似于對象，也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類 型的值（包括對象）都可以當作鍵

  const m1 = new Map();m1.set("id", 1).set("name", "jack");//console.log(m1); //Map { 'id' => 1, 'name' => 'jack' }//定義其他類型,任何類型都可以作為鍵let arr = [1, 2, 3];m1.set(arr, 100);console.log(m1); //Map { 'id' => 1, 'name' => 'jack', [ 1, 2, 3 ] => 100 }//map長度console.log(m1.size);//通過鍵獲取數據console.log(m1.get("id"));//has(key) 返回一個布爾值，表示某個鍵是否在當前 Map 對象之中console.log(m1.has("id"));//delete(key) 刪除某個鍵，返回 true 。如果刪除失敗，返回 falseconsole.log(m1.delete("id"));//clear() 清除所有成員，沒有返回值m1.clear();//map的循環遍歷---使用for...of進行循環遍歷//另一種定義方式,二維數組const m2 = new Map([["a", 1],["b", 2],["c", 3],]);console.log(m2); //Map { 'a' => 1, 'b' => 2, 'c' => 3 }

for..of循環

for...of 循環可以使用的范圍包括數組、Set 和 Map 結構、某些類似數組的對象（比如 arguments 對 象、DOM NodeList 對象）、后文的 Generator 對象，以及字符串

能夠使用for...of循環的對象內部需要有Symbol方法

普通對象不能使用for...of進行循環

  const arr = ["red", "green", "gray"];for (let v of arr) {console.log(v); //輸出數組內的元素}const s = new Set(arr);for (let v of s) {console.log(v); //"red", "green", "gray"}for (let [i, v] of arr.entries()) {console.log(i); //索引console.log(v); //元素}const m1 = new Map();m1.set("id", 1).set("name", "jack");for (let v of m1) {console.log(v); //[ 'id', 1 ] [ 'name', 'jack' ]}//數組解構for (let [k, v] of m1) {console.log(k); //鍵console.log(v); //值}//普通對象使用for...ofvar o1 = { id: 1, name: "jack" };for (let v of o1) {console.log(v); //異常：TypeError: o1 is not iterable}//解決方法var o2 = { id: 1, name: "jack" };for (let v of Object.entries(o2)) {console.log(v); //數組結構，[ 'id', 1 ]}for (let [k, v] of Object.entries(o2)) {console.log(k);console.log(v);}

for...of與其它遍歷的比較

/*********************各種for循環的比較***************************** *///1、最原始的寫法就是for循環var arr1 = [1, 2, 3, 4, 5];for (var i = 0; i < arr1.length; i++) {console.log(arr1[i]);}//2、forEach方法:這種寫法的問題在于，無法中途跳出forEach循環，break命令或return命令都不能奏效arr1.forEach(function (item, index) {console.log(item);});//3、for...infor (let i in arr) {console.log(i); // 0 1 2 3 4獲取索引console.log(arr[i]);}for (let i in arr) {if (i == 3) {break;}console.log(i); //0 1 2 索引}//4、for...ofconst arr2 = ["a", "b", "c", "d", "e"];for (let v of arr2) {if (v == 3) {break; //用于跳出循環，會繼續執行該循環之后的代碼（如果有的話）//continue; //如果指定了條件，中斷當前的迭代，然后繼續循環中的下一個迭代。}console.log(v); //輸出的是元素}

各種類型的轉換

  //1、對象轉換為數組const o1 = { id: 1, name: "jack" };Object.keys(o1); //['id','name']Object.values(o1); //[1,'jack']console.log(Object.entries(o1)); //[ [ 'id', 1 ], [ 'name', 'jack' ] ]//2、map轉換為數組const m1 = new Map();m1.set("a", 1).set("b", 2).set("c", 3);console.log([...m1.keys()]); //[ 'a', 'b', 'c' ]console.log([...m1.values()]); //[ 1, 2, 3 ]console.log(...m1); //[ 'a', 1 ] [ 'b', 2 ] [ 'c', 3 ]console.log(...m1.entries());for (let v of m1.entries()) {console.log(v);}for (let v of [...m1]) {console.log(v);}//3、對象轉為mapvar o2 = { id: 1, value: "v" };let m2 = new Map(Object.entries(o2));//4、map轉對象const o3 = {};for (let [k, v] of m2) {console.log(v);o3[k] = v;}console.log(o3);

symbol數據結構

ES6 引入了一種新的原始數據類型Symbol，表示獨一無二的值

解決問題：如果添加的屬性名出現重復，如何保證屬性名的唯一性，解決屬性名的沖突

  let s = Symbol();let s1 = Symbol("a"); //這的參數a是描述symbol，通過描述可以區分不同的symbol/****************************************** */const o1 = {};o1.id = 10;o1.id = 20;//正常情況下，id=10將會被id=20覆蓋掉//如果想不被覆蓋掉？？？var id = Symbol("id1"); //id1是symbol的描述o1[id] = 30;var id = Symbol("id2"); //id2是symbol的描述o1[id] = 40;console.log(o1); //{ id: 20, [Symbol(id1)]: 30, [Symbol(id2)]: 40 }//第二種定義方式var id = Symbol("id");let o2 = { id: 10, [id]: 20 };console.log(o2); //{ id: 10, [Symbol(id)]: 20 }//獲取id的值console.log(o2.id); //返回默認的屬性值10console.log(o2[id]); //20 通過[id]的方式獲取symbol的屬性值。o2[id]:這的id對應的是變量//symbol即使描述相同，symbol()的返回值也不相同let s3 = Symbol("ITI");let s4 = Symbol("ITI");s3 === s4; // false//Symbol屬性值的獲取const o3 = { id: 10, [Symbol("id1")]: 20, [Symbol("id2")]: 30 };console.log(o3[Object.getOwnPropertySymbols(o3)[0]]);//20console.log(o3[Object.getOwnPropertySymbols(o3)[1]]);//30

注意symbol作為對象屬性名，不能用擴展運算符進行解析

使用symbol作用屬性名，Object.keys(),for...in不能輸出symbol類型的屬性名

Symbol.for()

由于symbol()每次調用都會返回一個不同的值,如果希望重新使用同一個Symbol 值, Symbol.for() 方法可以做到這一點

? let s5 = Symbol.for("ITI");

? let s6 = Symbol.for("ITI");

? console.log(s5 === s6);//true

Symbol.for()與Symbol()的區別

Symbol.for()與Symbol()這兩種寫法，都會生成新的 Symbol。區別是，前者會被登記在全局環境中供搜 索，后者不會。Symbol.for()不會每次調用就返回一個新的 Symbol 類型的值，而是會先檢查給定的key 是否已經存在，如果不存在才會新建一個值。比如，如果你調用Symbol.for("cat")30 次，每次都會返回 同一個 Symbol 值，但是調用Symbol("cat")`30 次，會返回 30 個不同的 Symbol 值

Promise

所謂 Promise,簡單說就是一個容器,里面保存著某個未來才會結束的事件（通常是一個異步操作）的結果。從語法上說,Promise 是一個對象，從它可以獲取異步操作的消息。Promise 提供統一的 API， 各種異步操作都可以用同樣的方法進行處理.

  //promise是一個構造函數，可以通過new Promise()得到一個promise實例//Promise構造函數接受一個函數作為參數--相當于傳一個回調。這個函數有兩個參數，分別是：resolve和reject//resolve和reject是兩個函數。這兩個函數是由JS引擎提供的//promise有三種狀態：pending(進行中)、fulfilled(已成功)、rejected(已失敗)//resolve的作用是：是將promise的狀態從進行中變成成功//reject的作用是：將promise的狀態從進行中轉換為rejected//then方法：當promise實例一旦生成了let p = new Promise(function (resolve, reject) {if (異步操作成功) {resolve("ok");} else {reject("error");}});//通過p的then方法能夠獲取promise內部的異步操作的狀態//then方法存在于Promise的prototype原型對象上p.then(function (res) { console.log(res); //ok},function (err) {console.log(err); //error});/*******************圖片加載實例******************************* */function LoadImg() {return new Promise((resolve, reject) => {const img = new Image();img.onload = function () {resolve(img);};img.onerror = function () {reject("error");};});}LoadImg().then((res) => {},(error) => {});

Promise---all

Promise.all() 方法用于將多個 Promise 實例，包裝成一個新的 Promise 實例

 /*******************promise.all()：并發任務只有全部成功才會執行then方法******************** */let p2 = new Promise((resolve, reject) => {console.log("第一個異步任務");resolve("第一次異步結果");});let p3 = new Promise((resolve, reject) => {console.log("第二個異步任務");resolve("第二次異步結果");});let p4 = new Promise((resolve, reject) => {console.log("第三個異步任務");resolve("第三次異步結果");});Promise.all([p2, p3, p4]).then((arr) => {console.log(arr); //[ '第一次異步結果', '第二次異步結果', '第三次異步結果' ]});/************并發任務執行：這幾個任務都會執行，* 但是如果其中一個出現reject，則最后都不會執行Promise.all的then方法，而是執行Promise.all的catch方法* **************** */let p5 = new Promise((resolve, reject) => {console.log("第一個異步任務");resolve("第一次異步結果");});let p6 = new Promise((resolve, reject) => {console.log("第二個異步任務");reject("第二次異步結果失敗");});let p7 = new Promise((resolve, reject) => {console.log("第三個異步任務");resolve("第三次異步結果");});Promise.all([p5, p6, p7]).then((arr) => {console.log(arr);}).catch((err) => {console.log(err); //第二次異步結果失敗});

Promise---race

const p = Promise.race([p1, p2, p3]);

只要 p1 、 p2 、 p3 之中有一個實例率先改變狀態， p 的狀態就跟著改變。那個率先改變的 Promise 實例的返回值，就傳遞給p的回調函數

  /***************promise.race():獲取到的是最先執行異步任務的成功狀態的返回值********************** */let p8 = new Promise((resolve, reject) => {console.log("第一個異步任務");setTimeout(() => {resolve("第一次異步結果");}, 3000);});let p9 = new Promise((resolve, reject) => {console.log("第二個異步任務");setTimeout(() => {resolve("第二次異步結果");}, 2000);});let p10 = new Promise((resolve, reject) => {console.log("第三個異步任務");setTimeout(() => {resolve("第三次異步結果");}, 5000);});Promise.race([p8, p9, p10]).then((res) => {console.log(res); //第二次異步結果});/** 如果p9出現異常，則不會進行promise.race的then方法，而是需要promise.race設置一個catch方法*/

async-await

async function f () {
return 'hello world'
}
f(); //為什么沒有執行'hello world'

//執行f

f().then((res) => console.log(res));

函數前面加上async，如果執行這個函數，這個函數返回一個promise實例。相當于生成promise實例的簡單方法。

async修飾的function，默認是成功的狀態。return 'hello world'相當于resolve的返回值

await操作符用于等待一個Promise對象，它只能在異步函數async function內部使用

await 后面跟一個promise對象，但是也可以跟其他值，比如字符串、數值、普通函數

  console.log(1);async function f2() {console.log(2);await 100;//執行等待，后面的代碼變成微任務console.log(3);}f2();console.log(4);//整個代碼輸出：1 2 4 3