ES6 set和map以及async函数

男娘i 2023-07-10 11:10 4阅读 0赞

## Map ##

Map 中存储的是 key-value 形式的键值对, 其中的 key 和 value 可以是任何类型的, 即对象也可以作为 key . 这比用对象来模拟的方式就灵活了很多

### Map 的创建和初始化 ###

1、可以用new Map()构造函数来创建一个空的 Map

// 创建一个空的 Map 
    let m  = new Map();

2、可以在 Map() 构造函数中传入一个数组来创建并初始化一个 Map；传入的数组是二维数组, 其中的每一个子数组都有两个元素, 前者会被作为 key, 后者会被作为 value, 这样就形成了一个 key-value 键值对. 例如:

// 用数组来创建一个 非空的 Map 
    
    let map = [					 // 定义一个二维数组,  数组中的每组都有两个元素
        ['key1' ,  'value1'],   // key 是 字符串 "key1", value 是字符串 "value1"
        [{} ,  10000] ,          // key 是个对象, value 是数值 10000
        [ 1,  {} ]              // key 是个数值类型, value 是对象
    ];
    
    let map = new Map(array);  // 将数组传入 Map 构造函数中

### Map 可用的 方法 ###

***set(key, value): 向其中加入一个键值对  
get(key): 若不存在 key 则返回 undefined  
has(key):返回布尔值  
delete(key): 删除成功则返回 true, 若key不存在或者删除失败会返回 false  
clear(): 将全部元素清除***

const m1 = new Map([['a', 111], ['b', 222]])
    console.log(m1) // {"a" ： 111, "b" ： 222}
    m1.get('a')  // 111
    
    const m2 = new Map([['c', 3]])
    const m3 = new Map(m2)
    m3.get('c') // 3
    m3.has('c') // true
    m3.set('d', 555)
    m3.get('d') // 555

### 遍历方法 ###

***keys()：返回键名的遍历器  
values()：返回键值的遍历器  
entries()：返回键值对的遍历器  
forEach()：使用回调函数遍历每个成员***

const map = new Map([['a', 1], ['b',  2]])
    
    for (let key of map.keys()) {
      console.log(key)
    }
    // a 
    //b
    
    for (let value of map.values()) {
      console.log(value)
    }
    //1
    //2
    
    for (let item of map.entries()) {
      console.log(item)
    }
    // ["a", 1] 
    //["b", 2]
    
    // 或者
    for (let [key, value] of map.entries()) {
      console.log(key, value)
    }
    // a 1
    // b 2
    
    // for...of...遍历map等同于使用map.entries()
    
    for (let [key, value] of map) {
      console.log(key, value)
    }
    // a 1
    // b 2

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MzQ0Mg_size_16_color_FFFFFF_t_70]  
（补充：对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

let bar = { a: 1, b: 2 };
    let baz = { ...bar }; // { a: 1, b: 2 }

等价于：

let bar = { a: 1, b: 2 };
    let baz = Object.assign({}, bar); // { a: 1, b: 2 }

Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。(如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性)。同样，如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉）

## set ##

ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值  
Set对象允许存储任何类型的值，无论是原始值或者是对象引用。  
Set 本身是一个构造函数，用来生成Set 数据结构。Set函数可以接受一个数组作为参数，用来初始化。

### Set实例对象的属性 ###

size：返回Set实例的成员总数。

### Set实例对象的方法 ###

***add(value)：添加某个值，返回 Set 结构本身(可以链式调用)。  
delete(value)：删除某个值，删除成功返回true，否则返回false。  
has(value)：返回一个布尔值，表示该值是否为Set的成员。  
clear()：清除所有成员，没有返回值。***

const set = new Set(['a', 'a', 'b', 1, 2, 1])
    console.log(set)  // {'a', 'b', 1, 2}
    set.add('c').add(3);
    console.log(set) // {'a', 'b', 1, 2, 'c', 3}
    console.log(set.size) // 6
    
    console.log(set.has(2));// true

![在这里插入图片描述][20200302142951398.png]

### 遍历方法 ###

***keys()：返回键名的遍历器。  
values()：返回键值的遍历器。  
entries()：返回键值对的遍历器。  
forEach()：使用回调函数遍历每个成员***

此处可以借鉴map方法  
**ES6中Set对象与Map对象的区别**  
Set对象类似于数组，且成员的值都是唯一的  
Map 对象是键值对集合，和 JSON 对象类似，但是 key 不仅可以是字符串还可以是对象  
Set: Set类似于数组，可以存储任何类型的值，但是成员的值都是唯一的，没有重复的值  
Map: Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

## async ##

用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行  
**语法：**  
语法很简单，就是在函数前面加上async 关键字，来表示它是异步的  
async 函数也是函数，平时我们怎么使用函数就怎么使用它，直接加括号调用就可以了  
async function name(\[param\[, param\[, … param\]\]\]) \{ statements \}  
（name: 函数名称。  
param: 要传递给函数的参数的名称。  
statements: 函数体语句。）

async function hello(){
      return 'hello world';
    }
    console.log(hello());
    console.log('我是先执行的');

![在这里插入图片描述][20200302223125848.png]  
async 函数返回的是一个`promise` 对象，如果要获取到promise 返回值，我们应该用`then` 方法

async function hello(){
      return 'hello world';
    }
    hello().then(result=>{
      console.log(result);
    })
    console.log('我是先执行的');

![在这里插入图片描述][20200302223206872.png]  
***async 和 await 基于 promise 的。 使用 async 的函数将会始终返回一个 promise 对象。***

### await关键字(await:等待) ###

await 关键字仅在 async function 中有效。如果在 async function 函数体外使用 await ，你只会得到一个语法错误。

await 操作符用于等待一个 `Promise` 对象, 它只能在异步函数 `async function` 内部使用。

### 语法 ###

[return_value] = await expression;

（expression: 一个 Promise 对象或者任何要等待的值。）  
**await针对所跟不同表达式的处理方式：**

*  Promise 对象：await 会暂停执行，等待 Promise 对象 resolve，然后恢复 async 函数的执行并返回解析值。
 *  非 Promise 对象：直接返回对应的值。  
    ***注意await关键字，只能放在async函数里面！！！***

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MzQ0Mg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200302115902338.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MzQ0Mg==,size_16,color_FFFFFF,t_70
[20200302142951398.png]: https://img-blog.csdnimg.cn/20200302142951398.png
[20200302223125848.png]: https://img-blog.csdnimg.cn/20200302223125848.png
[20200302223206872.png]: https://img-blog.csdnimg.cn/20200302223206872.png