05-ES6
数据解构
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