查看更多精彩前端资源

---

Set

---

---

• 新增的构造函数, 可创建新的数据结构, 结构类似与数组, 特点是值唯一
  
  

预览

名称		宿主		类型		作用
size		Set		property		集合成员数量
add		Set.prototype		method		添加某个值
delete		Set.prototype		method		删除某个值
has		Set.prototype		method		是否存在某个值
clear		Set.prototype		method		清空所有值
forEach		Set.prototype		method		遍历值

演示

• size
  
  

[JavaScript] 纯文本查看 复制代码

let numSet = new Set([2, 4, 6, 2, 4, 6]);  // { 2, 4, 5 }
numSet.size  // 3

• add
  

[JavaScript] 纯文本查看 复制代码

let numSet = new Set([2, 4, 6]);
numSet.add(4);  // { 2, 4, 6 }
numSet.add(8)   // { 2, 4, 6, 8 }

• delete
  

[JavaScript] 纯文本查看 复制代码

let numSet = new Set([10, 20, 30]);
numSet.delete(10);  // { 20, 30 }

• has
  

[JavaScript] 纯文本查看 复制代码

let numSet = new Set([10, 20, 30]);
numSet.has(20);  // true
numSet.has(50);  // false

• clear
  

[JavaScript] 纯文本查看 复制代码

let numSet = new Set([10, 20, 30]);
numSet.clear();  // {}

• forEach
  

• 用来接收值的回调 { function }
• 回调中的this指向  { any }
  

[JavaScript] 纯文本查看 复制代码

let numSet = new Set([10, 20, 30]);
numSet.forEach(v => console.log(v));

• 支持for of
  

[JavaScript] 纯文本查看 复制代码

let numSet = new Set([10, 20, 30]);

for(let v of numSet) {
        console.log(v);          // 10, 20, 30
}

• 合并数据并去重
  

[JavaScript] 纯文本查看 复制代码

let arr1 = [ 1, 3, 5 ];
let arr2 = [ 5, 7, 9 ];
new Set([ ...arr1, ...arr2 ]);  // { 1, 3, 5, 7, 9 }

• 下标取值
  

[JavaScript] 纯文本查看 复制代码

let set = new Set([1, 3, 5, 1, 3, 5]);
let arr = [...set];    // 先转为数组, 再按照下标取值
let set = new Set([1, 3, 5, 1, 3, 5]);
let arr = Array.from(set)    // 也可以通过数组from方法转数组

Map

---

• 新增的构造函数, 可创建新的数据结构, 结构类似与对象, 特点是key值可以为对象
  
  

预览

名称		宿主		类型		作用
size		Map		property		集合成员数量
set		Set.prototype		method		通过key,value形式添加新值
get		Set.prototype		method		通过key取值
delete		Set.prototype		method		通过key删除值
has		Set.prototype		method		是否存在某个key
clear		Set.prototype		method		清空所有值
forEach		Set.prototype		method		遍历值

演示

• size
  [JavaScript] 纯文本查看 复制代码

  let numMap = new Map([
          [new Date(), 100],
          [{}, 200]
  ]);
  numMap.size  // 2

• set和get
  [JavaScript] 纯文本查看 复制代码

  let obj = { name: '张三', age: 21 };
  
  let map = new Map();
  map.set(obj, '我不认识李四');
  map.get(obj)   // '我不认识李四'

• delete
  [JavaScript] 纯文本查看 复制代码

  let fibs = [1, 1, 2, 3, 5, 8];
  
  let map = new Map();
  map.set(fibs, '这是');
  map.delete([1, 1, 2, 3, 5, 8]);  // false
  map.delete(fibs);                  // true

• has
  [JavaScript] 纯文本查看 复制代码

  let date = new Date();
  
  let map = new Map();
  numSet.has(date);  // false
  numSet.set(date, '明月几时有,把酒问青天');
  numSet.has(date);  // true

• clear
  [JavaScript] 纯文本查看 复制代码

  let numMap = new Map([
          [new Date(), 100],
          [{}, 200]
  ]);
  numMap.clear()  // {}

• forEach
  

• 用来接收值的回调 { function }
• 回调中的this指向  { any }
  [JavaScript] 纯文本查看 复制代码

  let numMap = new Map([
          [new Date(), 100],
          [{}, 200]
  ]);
  numMap.forEach((v, k) => console.log(v, k));

  
  

• 支持for of
  

[JavaScript] 纯文本查看 复制代码

let numMap = new Map([
        [new Date(), 100],
        [{}, 200]
]);

for(let v of numMap) {
        console.log(v);          // 100, 200
}

Promise

---

• Promise：承诺、约定的意思，主要用于异步执行流程的管理
• 它可以解决传统异步解决方案中，回调嵌套过深不利于维护的问题
  
  

演示

• 假定我们有这样一个需求：某人和青梅竹马的芳芳约定，如果十年后她还没嫁，就嫁给我
• 这个需求中就含有异步逻辑的处理，芳芳要不要嫁给我需要等待10年后才会知晓
• 这里我们通过Promise来尝试实现这个需求：
  
  
  • 使用promise管理一个10年约定
  • 添加10年后的处理逻辑
    
    
  
  

第一步

• Promise自身是一个构造函数，我们可以new它创建实例
• 然后传入一个函数，里面编写异步操作的代码

  [JavaScript] 纯文本查看 复制代码

  let engagement = new Promise(function(yes, no) {        // 定义10年期限，期限到后芳芳没嫁，就调yes，否则调no
          // 这里的yes与no方法是Promise实例提供给我们的
          setTimeout(function() {
                  yes();
          }, 1000 * 10);
  });

  
  

第二步

• 上面的代码在10年期限到来时，并没有写处理逻辑，而是通过调用Promise实例提供的方法告知最终结果
• 因为Promise实例知道最终的结果，所以它专门提供了一个then方法让我们来添加处理逻辑

  [JavaScript] 纯文本查看 复制代码

  // then接收两个回调，第一个是成功回调，第二个是失败回调(可选)engagement.then(
    () => console.log('太开心了，芳芳终于嫁给了我'),
    () => console.log('我最终还是错过了芳芳')
  );

  
  

后续处理

• 使用Promise后你会发现我们异步操作与后续的处理逻辑是分开编写的
• 而且我们可以通过then方法多次添加后续的处理逻辑
• 即时异步操作结束了，我们还是可以调用then

  [JavaScript] 纯文本查看 复制代码

  // then第一个回调固定为成功回调engagement.then(
          () => console.log('芳芳终于嫁给我了，我要带她环游世界！')
  );
  // 如果只想指定失败回调，可以通过catch方法来添加
  engagement.catch(
          () => console.log('我的世界开始变得暗淡无光')
  );

  
  

小结

• 创建promise实例时传入的回调作用是为了接收yes与no方法
• then方法用来添加成功回调与失败回调,失败回调可选
• catch方法用来添加失败回调
• Promise管理异步操作的特点是实现逻辑的解耦, 让程序更好维护
• then方法后续仍可以调用，是因为每个Promise实例都有一个状态记录异步操作执行的进度，即时异步操作结束了，这个记录仍然存在
  
  
  • pending状态，代表正在执行异步操作，实例刚创建时的状态
  • resolved状态，代表异步代码执行完毕，调用yes方法后的状态
  • rejected状态，代表异步代码执行完毕，调用no方法后的状态