数据解构

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