袁磊老师的课，ES6（四）

一、set
类似于数组，但是成员的值都是唯一的，没有重复的值

const s = new Set();
[2,3,5,4,5,2,2].forEach(x=>s.add(x));
//第二个5、最后两个2都是加不进去的，因为set里的成员不可以重复的
for(let i of s){
console.log(i);
}
//set没有下标，key就是value，不能呢通过下标进行访问
//数组和set之间可以进行互换，set的参数可以直接是一个数组//例1
const set= new Set([1,2,3,4,,4,4]);
//数组去重
[...set]
//获得set的所有成员//例2
const items = new Set([1,2,3,4,5,5,5,5,5,5]);
items.size;  //set没有length属性，需要用.size来进行长度的判断

set的主要方法：
add(value)：添加某个值，返回Set结构本身。
delete（value）：删除某个值，返回一个布尔值，表示删除是否成功。
has（value）：返回一个布尔值，表示该值是否为Set的成员。
clear（）：清除所有成员，没有返回值。

set如何使用filter

let set = new Set([1，2，3，4，5]);
set = new Set([...set].filter(x=>(x%2)==0));//返回Set结构：{2，4}
//filter是数组专用的，set需要先转换为数组

二、WeakSet
WeakSet结构与Set类似，也是不重复的集合，但是有个区别：WeakSet的成员只能是对象，而不能是其他类型的值。
三、Map
类似于对象，也是键值对的集合，但是“键”的范围不仅限于字符串，各种类型的值（包括对象）都可以当做。也就是说Object结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的Hash结构实现。

const m = new Map();
const o = {p:'Hello World'};m.set(o, 'content');//给o赋值
m.get(o);//获取o，是‘content’m.has(o);//判断是否有o的存在，返回true
m.delete(o);//删除o，返回true，删除成功
m.has(o);//再次判断是否有o，返回false，没有。

练习1

  <script>let s = new Set();s.add("yuan"); //给s增加一个成员s.add("lei");s.add("lei");console.log(s);console.log(s[0]); //无法输出 Set不具备数组的一些属性，没有下标和长度length的属性console.log(s.length); //无法输出console.log(s.size);//   如何操作Set的成员呢？// 不能用for in来输出，for in 是用来找到key的，Set没有key，只能用let of来输出//   方法一for (let i of s) {console.log(i);}//  方法二//   s.forEach(v => v + 8); //每个成员都加8s.forEach(v => {console.log(v);});// ***************************MAp*******************************////   用map//   let ns = s.map(v => v + 8); //set是用不了map的，会报错//   如果想用map，需要将Set转换为数组let ns = [...s].map(v => v + 8);console.log(ns);// ***************************数组去重*******************************//var arr = [2, 3, 4, 4, 4, 5, 5, 6, 7, 7, 7, 7, 8, 8, 8, 8, 8, 8];new Set(arr); //去重方法1console.log([...new Set(arr)]); //转换为数组//   去重的方法2function quchong(arr) {return Array.from(new Set(arr));}console.log(quchong(arr));// ***************************对Set进行过滤---filter*******************************//var fs = [...s].filter(v => isNaN(v)); //isNaN判断是不是数字，所有不是数字的都会被留下,如果想留下数字的话，加一个！//到这一步，fs是一个数组//转换的话，要写成：//   var fs = new Set([...s].filter(v => isNaN(v)));console.log(fs);// ***************************delete等操作*******************************//s.delete("yuan");s.add("yuan1111");console.log(s.has("yuan"));</script>

四、Promise
Promise，简单说就是一个容器，里面保存着某个未来才会结束的时间（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。
异步就是：好几件事情可以同时进行
同步就是：先做完一件事，才能做另外一件事
主要解决问题：
异步操作一定要有回调。主要解决了回调地域问题，我在一个地域中还要调用另一个地域，我在一个异步里要调用另外一个异步（例如我需要获取你的信息，那么一定要先知道你在哪一个学校，获得你的学校后，在这个获取学校的回调里（在这个异步操作中）再获取你的专业（必须先知道你的学校才能知道你的专业），之后在获取专业的异步操作中才能获取你的班级。）

Promise的作用：
其实promise啥也没干，只不过是将复杂的异步操作变得更好看。就是提供了一种写法，让复杂的异步代码变得更清晰，像是同步写的一样，更符合我们的编程思维，嗯，非常好。
1.对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是‘承诺’，表示其他手段无法改变。
2.一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会在改变了，会一直保存这个结果，这时就成为resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

const promise = new Promise(function(resolve, reject){
if(/*异步操作成功*/){resolve(value);//成功了的话，用resolve函数往外传，传给回调函数，就是成功之后需要做的事情。
}else{reject(error);//失败了用reject函数往外传，传给回调函数，传给失败后要干的事情
}
});

resolve 函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从pending变为resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从pending变为rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
练习2—简单版

  <script>let p = new Promise(function (resolve, reject) {// Promise里方法固定有两个参数，一个是resolve，一个是reject，resolve代表成功后的操作，reject用来代表失败后的操作console.log("promise!!!");resolve("success in promise！"); //在现实中，成功了更可能是用来传json数据// resolve是传给下面then()函数中的第一个resrejected("fail!!");// rejected是传给下面then()函数中的第二个参数error});//then就是上面成功或失败的后续操作// then()有两个参数，第一个参数就是成功后的操作，第二个操作是失败后的操作p.then(res => {console.log(res);}, error => {// 参数的名字一般用res和error，自己想用什么都可以，但是为了提高可读性，更推荐前者console.log(res);});</script>

练习2—复杂版

    <script>let p = new Promise(function (resolve, reject) {console.log("promise!!!");resolve("success in promise！");rejected("fail!!");});p.then(res => {console.log(res);return "hello yuan!";// 需要返回一个res！才能进行下一步的链式操作}, error => {// 参数的名字一般用res和error，自己想用什么都可以，但是为了提高可读性，更推荐前者console.log(res);}).then(res => { //强大的链式操作！！！！console.log(res);});;</script>

练习2—复杂2

 <script>let p = new Promise(function (resolve, reject) {console.log("promise!!!");resolve("success in promise！");rejected("fail!!");});let p1 = new Promise(function (resolve, reject) {setTimeout(resolve, 2000, "p1 in promise!"); //当2000毫秒后成功});// all场景，当p和p1的场景都完成之后Promise.all([p, p1]).then(res => {console.log(res)});//结果是一个数组，第一个是p的结果，第二个是p1的结果// race场景，当p和p1获得的可能是相同的内容，那个先完成就可以先进性下一步，另外一个也会继续执行Promise.race([p, p1]).then(res => {console.log(res);});//p比p1快一些</script>

今天的笔记就倒这啦，拜拜~

袁磊老师的课，ES6（四）相关推荐

袁磊老师的课，VUE（三）
今天来做两个联系,来领悟一下vue的主要思想第一个练习,自己拿去玩 <!DOCTYPE html> <html lang="en"><head> ...
JavaScript学习第四课（四）
JavaScript学习第四课(四) 学习内容一.JavaScript的构成二.浏览器对象模型(Browser Object Model) 三.window对象包含的方法四.window对象的 ...
【机器学习-学习笔记】吴恩达老师机器学习课的笔记（黄海广博士）
吴恩达老师机器学习课的笔记github地址:https://github.com/fengdu78/Coursera-ML-AndrewNg-Notes,黄海广博士原创,黄海广博士也是这门课的最初翻译 ...
陈老师排课软件12A（正式版）
陈老师排课软件12A版是12.0的加强版,输入人事安排表更加简单方便,适合于小学.初中.普高.职高.大中专院校的教务排课. 一．新课表排课流程 1．将<原始分布>中的各科目与对应的任课教 ...
新高考全走班（4选2、6选3、7选3）陈老师排课原理及方案
全走班排课流程: 1.收集选课信息及统计选课人数. 2.确定走班班级个数及走班班级上课顺序. 3.自动走班班级分班. 4.配备走班班级教室与走班班级的任课教师. 5.自动生成每位学生的走班班级.走班教 ...
使用陈老师排课12.0（正式版）进行新高考（3+1+2）排课
一．行政班按组合套餐分班,不走班,直接使用陈老师排课12.0(正式版)排课. 1．在课时分布工作内设置好高二原始课表和人事表,每个组合的课程节数可以任意设置,同种组合套餐的班级的课表相同. 2．按 ...
鲁祥老师吉他课学习笔记
鲁祥老师吉他课学习笔记导语参考教材: <吉他入门经典教程>李国标 <弹指之间>潘尚文 <吉他教本>好连得出版社 <吉他教程>杰瑞吉他学校 <伯 ...
一款没有排课算法的《陈老师排课软件》
一．当前流行的排课软件都是采用排课算法进行排课有排课算法的软件大致排课流程: 1．设置每天上午.下午的排课节数,一个周期的上课的天数,一般是分别是五.六.七天. 2．设置开课的班级号.班级数.学校名 ...
【阿里云总监课第四期】时髦的云原生应用怎么写？
为什么80%的码农都做不了架构师?>>> 概述应用已经跨入了云原生的时代.要写一个时髦的云原生应用,首先当然要了解什么是云原生.CNCF,也就是云原生计算基金会,作为目前人气 ...

袁磊老师的课，ES6（四）

袁磊老师的课，ES6（四）相关推荐

最新文章

热门文章