ES6 —— 2、Map、各种遍历、Symbol、Promise

小咪咪 2022-10-10 11:14 104阅读 0赞

# （8）map（键唯一性） #

## 1.定义 ##

JavaScript 的对象（Object），本质上是键值对的集合，但是传统上只能用字符串当作键。这给它的使

用带来了很大的限制。

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

const m = new Map();
        m.set('name','value').set('age',18).set('a','a');	
        var a = {id:2};
        m.set(a,'value');
    
        //另一种添加方式
        let m1 = new Map([['a',1],['b',2],['c',3],['id',4]]);
        //{"a" => 1, "b" => 2, "c" => 3, "id" => 4}

## 2.Map实例的属性和方法 ##

### （1）size属性 ###

返回 Map 结构的成员总数

const m = new Map();
        m.set('a','a').set('b','b');
        m.size 	//2（长度）

### （2）set(key, value) ###

const m = new Map();
        m.set('qq', '2429462491') 	//键是字符串qq
        m.set(100, 'jindu') 			//键是数值100
        m.set(undefined, 'value') 	//键是 undefined

### （3）get(key) 读取 key 对应的键值，如果找不到 key，返回 undefined  ###

const m = new Map();
        var a = {id:2};
        m.set(a,'value');
        m.set('name','jindu');
    
        m.get(a); 		//'value'  通过变量a来获取
        m.get('name'); 	//jindu 	 通过'name'属性获取

### （4）has(key) 返回一个布尔值，表示某个键是否在当前 Map 对象之中 ###

const m = new Map();
        var a = {id:2};
        m.set(a,'value');
        m.set('name','jindu');
    
        m.has('name') 	//true
        m.has('a') 		//false（因为a是变量）
        m.has(a) 		//true

### （5）delete(key) 删除某个键，返回 true 。如果删除失败，返回 false ###

const m = new Map();
        var a = {id:2};
        m.set(a,'value');
        m.set('name','jindu');
        m.delete('name')
        m.has('name') 	//false

### （6）clear() 清除所有成员，没有返回值 ###

const m = new Map();
        var a = {id:2};
        m.set(a,'value');
        m.set('name','jindu');
        m.clear();	//全部为0

## 3.Map遍历 ##

const m1 = new Map([['a',1],['b',2],['c',3]]); //必须二维数组
        for(let k of m1.keys()){
        		console.log(k) 	// a,b,c
        }
    -----------------------------------------------------------------------------------
        for(let v of m1.values()){
        		console.log(v) 	// 1,2,3
        }
    -----------------------------------------------------------------------------------
        for(let [k,v] of m1){
        		console.log(k,v)	//a 1, b 2, c 3
        };

![20210628001216984.png][]

## 4.类型转换 ##

### （1）map类型转为数组 ###

const m1 = new Map([['a',1],['b',2],['c',3]]); //必须二维数组
        [...m1.keys()];		//["a", "b", "c"]
        [...m1.values()];		//[1, 2, 3]
        [...m1];   //["a", 1] ["b", 2] ["c", 3]

![20210628001241582.png][]

### （2）map类型转为object ###

const m1 = new Map([['a',1],['b',2],['c',3]]);	//必须二维数组
        var o = {};
        for (let [k,v] of m1){
        		o[k]=v;
        };
        console.log(o)	//{a: 1, b: 2, c: 3}

### （3）object转为数组 ###

var obj = {'a':1,'b':2,'c':3};
        Object.keys(obj);  	//["a", "b", "c"]
        Object.values(obj); 	//[1, 2, 3]
        Object.entries(obj)	//[Array(2), Array(2), Array(2)]

### （4）object转为map ###

//方式一
        let obj = {"name": "jindu", "qq": "2429462491"};
        const m2 = new Map();
        for (let k in obj) {
            m2.set(k, obj[k])
        };
        console.log(m2)	//Map(2) {"name" => "jindu", "qq" => "2429462491"}
    -----------------------------------------------------------------------------------
        //方式二
        let obj = {"name": "jindu", "qq": "2429462491"};
        const m2 = new Map(Object.entries(obj));	//entries是键和值都打印
        console.log(m2)	//Map(2) {"name" => "jindu", "qq" => "2429462491"}

# （9）for...of遍历 #

ES6 借鉴 C++、Java、C\# 和 Python 语言，引入了 for...of 循环，作为遍历所有数据结构的统一的方 法。

for...of 循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如 arguments 对 象、DOM NodeList 对象）、后文的 Generator 对象，以及字符串。

**of** **与 in 区别：**

>     const arr = ['red', 'green', 'blue'];
>         for (let v of arr) {
>             console.log(v);	//但是不能拿到下标
>         }
> 
> ![20210628001447905.png][]      //值

>     const arr = ['red', 'green', 'blue'];
>         for (let v in arr) {
>             console.log(v);
>         }
> 
> ![20210628001509283.png][] //下标

![20210628001522726.png][]![20210628001524462.png][]

![20210628001526516.png][]**//entries**

for...of循环可以代替数组实例的forEach方法

arr.forEach(function (item, index) {
            console.log(item); 	// red green blue
            console.log(index); 	// 0 1 2
        });

## 1.set遍历 ##

var set = new Set([1, 2, 3, 4, 5]);
        for (let v of set) {
            console.log(v) //1,2,3,4,5
        };

## 2.map遍历 ##

>     var m = new Map();
>         m.set('name', 'value').set('age', 18).set('a', 'a');
>     	//第一种：
>         for (let [k,v] of m) {
>             console.log(k) //name,age,a
>             console.log(v) //value,18,'a'
>         };
> 
> //第二种：
> 
> ![20210628001655840.png][]

## 1.对象遍历 ##

对于普通的对象，for...of结构不能直接使用，会报错

>     var obj = {
>             id: 1,
>             name: 'abc'
>         };
>         //方式一
>         for (let k in obj) {
>             console.log(k);		//键
>             console.log(obj[k]);	//值
>         }
> 
> ![20210628001731679.png][]
> 
>     //方式二
>         for (let k of obj) {
>             console.log(k);	//TypeError: es6[Symbol.iterator] is not a function
>         }	
>         //解决的办法
>         for (let [k,v] of Object.entries(obj)) {	//entries是键和值都打印
>             console.log(k); //获取键
>             console.log(v); //获取值
>         }
> 
> ![20210628001751140.png][]

## 4.其他遍历 ##

### （1）for ###

>     var arr = [1, 2, 3, 4, 5];
>         for (var i = 0; i < arr.length; i++) {
>             console.log(arr[i]);
>         }
> 
> ![20210628001826315.png][]

### （2）forEach ###

这种写法的问题在于，无法中途跳出forEach循环，break命令或return命令都不能奏效。

>     arr.forEach(function (item, index) {
>             console.log(item);
>         });
> 
> ![20210628001848485.png][]

### （3）for...in ###

>     for (let i in arr) \{ 
> 
>         console.log(i);      //0 1 2 3    获取索引
> 
>         console.log(arr\[i\])   //![20210628001909499.png][]获取键名
> 
>     \}

### （4）for...of ###

>     for (let v of arr) {
>             if (v == 3) {
>                 break; //用于跳出循环，会继续执行该循环之后的代码（如果有的话）
>                 //continue; //如果指定了条件，中断当前的迭代，然后继续循环中的下一个迭代。
>             }
>             console.log(v);
>         }
> 
> ![2021062800194231.png][]

# 重写留言板1： #

.html不动

index.js

**ES6****写法：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70][]

![20210628002039320.png][]=====================================================================

方式二：

复制上面index.js

index2.js（面向对象方式）

这里面的箭头函数内部用this？不懂

![20210628002100656.png][]

# （10）Symbol（符号） #

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值

解决问题：如果添加的属性名出现重复，如何保证属性名的唯一性，解决属性名的冲突

凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突

![2021062800212328.png][]//获取结果：\{id: 3, name: "jindu"\}

## 1.独一无二 ##

![20210628002140365.png][]

![20210628002142446.png][]

## 2.返回的类型 ##

let s = Symbol();
    typeof s; 	//"symbol"

Symbol函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述

主要是为了在控制台显示，或者转为字符串时，比较容易区分

let s3 = Symbol('jindu');		//括号内的只是描述
    let s4 = Symbol('jindu');
    s3 === s4 	//false
    //注意，Symbol函数的参数只是表示对当前 Symbol 值的描述，因此相同参数的Symbol函数的返回值是不相等的。

## 3.获取描述信息 ##

let s = Symbol('jindu');
    s.description 	//jindu

## 4.类型转换 ##

//1、转成布尔值
    let s = Symbol();
    Boolean(s) 	//true
    //2、不能转成数值
    Number(s) 	//Cannot convert a Symbol value to a number

## 5.实际的运用 ##

注意 symbol作为对象属性名，不能用点运算符

var id = Symbol();
        var o = {
            [id]: 'hello world',
            id: 'abc'
        }
        o.id    	//'abc'
        o['id']	//'abc'
        o[id]   	//'hello world'

**注意：**如果用symbol作用属性名后，Object.keys()、for in不能输出symbol的属性名

Object.keys(o) 		//["id"]
    -----------------------------------------------------------------------------------
        for (let v in o) {
            console.log(v) 	//id
        }
    -----------------------------------------------------------------------------------
        Object.getOwnPropertyNames(o) //["id"]

## 6.Symbol.for() ##

由于symbol()每次调用都会返回一个不同的值,希望重新使用同一个 Symbol值, Symbol.for() 方法可以做到这一点

>     let s1 = Symbol.for('jindu');
>     let s2 = Symbol.for('jindu');
>     s1 === s2 	//true
> 
> ![20210628002400160.png][]

s1和s2都是 Symbol 值，但是它们都是由同样参数的 Symbol.for方法生成的，所以实际上是同一个值。

## 7.Symbol.for() 与 Symbol()的区别： ##

Symbol.for()与Symbol()这两种写法，都会生成新的 Symbol。区别是，前者会被登记在全局环境中供搜 索，后者不会。Symbol.for()不会每次调用就返回一个新的 Symbol 类型的值，而是会先检查给定的key 是否已经存在，如果不存在才会新建一个值。比如，如果你调用Symbol.for("cat")30 次，每次都会返回 同一个 Symbol 值，但是调用Symbol("cat")\`30 次，会返回 30 个不同的 Symbol 值。

## 8.Symbol.keyFor() ##

定义：返回一个已登记的 Symbol 类型值的key

var s = Symbol.for('abc');
    Symbol.keyFor(s); 	//abc

# （11）Promise（承诺） #

解决 JS中多个异步（如ajax）回调难以维护和控制的问题

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。 所谓 Promise简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的 结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API， 各种异步操作都可以用同样的方法进行处理。

**同步与异步：**

![20210628002522306.png][]

> 同步在主线程上运行的代码，异步被放在任务队列中
> 
> js运行机制   同步运行结束   然后异步处理
> 
> 异步里边有宏任务和微任务，有微任务先执行微任务，把宏任务放到事件队列中，没有微任务，再去执行宏任务，这样就形成一个事件轮询eventloop

## 1.基本用法 ##

Promise 对象是一个构造函数，用来生成 Promise 实例

Promise 构造函数接受一个函数作为参数，该函数的两个参数分别是 resolve 和 reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

resolve 函数的作用是将 Promise 对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去

reject 函数的作用是将 Promise 对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去

Promise 实例生成以后，可以用 then 方法分别指定 resolved 状态和 rejected 状态的回调函数。

then 方法可以接受两个回调函数作为参数。

第一个回调函数是 Promise 对象的状态变为 resolved 时调用，

第二个回调函数是 Promise 对象的状态变为 rejected 时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受 Promise 对象传出的值作为参数。

var p = new Promise(function (resolve, reject) {	//成功与失败
            if (true) { 	//请求成功
                resolve('ok')
            } else {
                reject('error')
            }
        });
        p.then(function (res) {
            console.log(res)	//成功
        }, function (res) {
            console.log(res)	//失败
        })
        //执行了resolve或reject，then中，res值就为ok或error

## 2.回调陷阱 ##

$.ajax({
            url: '',
            data: {},
            success: function (data) {
                //......		//拿到数据，执行一下
                $.ajax({
                    url: '',
                    data: {},
                    success: function (data) {
                        //......		//拿到数据，执行一下
                        $.ajax({
                            url: '',
                            data: {},
                            success: function (data) {
                                //......		//拿到数据，执行一下……
                            }
                        });
                    }
                });
            }
        });

Promise 对象有以下两个特点。

（1）对象的状态不受外界影响。 Promise 对象代表一个异步操作，有三种状态： pending （进行中）、 fulfilled （已成功）和 rejected （已失败）。只有异步操作的结果，可以决定当前是哪一种 状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是“承 诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。 Promise 对象的状态改变，只有两种可能：从 pending 变为 fulfilled 和从 pending 变为 rejected 。只要这两种情况发生，状态就凝 固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点 是，如果你错过了它，再去监听，是得不到结果的。

## 3.解决回调陷阱（链式写法） ##

## 4.用Promise对象实现的 Ajax ##

>     const getJSON = function (url, type, data) {
>             const promise = new Promise(function (resolve, reject) {
>                 const xmlHttp = new XMLHttpRequest();
>                 xmlHttp.open(type, url);
>                 if (type == 'get') {
>                     xmlHttp.send();
>                 } else {
>                     xmlHttp.setRequestHeader("Content-Type", "application/json");
>                     xmlHttp.send(JSON.stringify(data));
>                 };
>                 xmlHttp.responseType = "json";
>                 xmlHttp.onreadystatechange = function () {
>                     if (xmlHttp.readyState !== 4) return;
>                     if (xmlHttp.status === 200) {
>                         resolve(xmlHttp.response);
>                     } else {
>                         reject(new Error(xmlHttp.statusText));
>                     }
>                 };
>             });
>             return promise;
>         };
>         //win中调用，随便写
> 
> ![20210628002705688.png][]

## 5.Promise.all() ##

Promise.all() 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

const p = Promise.all([p1, p2, p3]);

Promise.all() 方法接受一个数组作为参数， p1 、 p2 、 p3 都是 Promise 实例，如果不是，就会先调用下面讲到的 Promise.resolve 方法，将参数转为 Promise 实例，再进一步处理。另外， Promise.all() 方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。

p 的状态由p1、 p2、p3决定，分成两种情况。

（1）只有p1、 p2、p3的状态都变成 fulfilled ， p 的状态才会变成 fulfilled ，此时 p1 、 p2 、 p3 的返回值组成一个数组，传递给 p 的回调函数。

（2）只要p1、 p2、p3之中有一个被 rejected ， p 的状态就变成 rejected ，此时第一个被 reject 的实例的返回值，会传递给 p 的回调函数。

>     var p1 = new Promise((resolve, reject) => {
>             setTimeout(() => {
>                 resolve('1111')
>             }, 1000)
>         });
>         var p2 = new Promise((resolve, reject) => {
>             setTimeout(() => {
>                 resolve('22222')
>             }, 4000)
>         });
>         Promise.all([p1, p2])
>             .then(([d1, d2]) => {
>                 console.log(d1, d2);
>             }, err => {
>             });
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 1][]

## 6.Promise.race() ##

const p = Promise.race([p1, p2, p3]);

只要 p1 、 p2 、 p3 之中有一个实例率先改变状态， p 的状态就跟着改变。那个率先改变的 Promise 实 例的返回值，就传递给 p 的回调函数。

Promise.race() 方法的参数与 Promise.all() 方法一样，如果不是 Promise 实例，就会先调用下面讲到的 Promise.resolve() 方法，将参数转为 Promise 实例，再进一步处理。

>     var p1 = new Promise((resolve, reject) => {
>             setTimeout(() => {
>                 resolve('1111')
>             }, 1000)
>         });
>         var p2 = new Promise((resolve, reject) => {
>             setTimeout(() => {
>                 resolve('22222')
>             }, 4000)
>         });
>         Promise.race([p1, p2])
>             .then(d => {
>                 console.log(d);
>             }, err => {
>             });
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 2][]

[20210628001216984.png]: /images/20221005/d2a1a015e2dc49bc86804ebd4a19ad7b.png
[20210628001241582.png]: /images/20221005/3ae8d49cb37a410ab8b7cf63440ef760.png
[20210628001447905.png]: /images/20221005/8c4e7bf2c9584adfbea9ccb2519fd579.png
[20210628001509283.png]: /images/20221005/cacc415f51e046c9814b4a93923f4f4b.png
[20210628001522726.png]: https://img-blog.csdnimg.cn/20210628001522726.png
[20210628001524462.png]: /images/20221005/bfa65a7002644fbcac9427aeade18541.png
[20210628001526516.png]: /images/20221005/626d61f47fef41b78b4667dcf8bc39c9.png
[20210628001655840.png]: /images/20221005/54aba0dc8f3d444f99957e43e61dee9d.png
[20210628001731679.png]: /images/20221005/1c8db54624ad4c27b0ad5effcf38a050.png
[20210628001751140.png]: /images/20221005/4ae84088c8de40d2b7c87b62e7e51528.png
[20210628001826315.png]: /images/20221005/8d004df0dbaa462f933da329d5614c12.png
[20210628001848485.png]: /images/20221005/0c0c439154fe4097be5c7e9ea1364707.png
[20210628001909499.png]: /images/20221005/2ba2a04beee344268288829f1e46a2a8.png
[2021062800194231.png]: /images/20221005/7cebcd81cbf54a53914a3f3bc6f647c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70]: /images/20221005/7b1321a6e8284610bf9dd4bf1decbe54.png
[20210628002039320.png]: /images/20221005/884f078629d44afcb2d73f90b2637c94.png
[20210628002100656.png]: /images/20221005/9dd28618d03a4a1f880b1322d52f17d6.png
[2021062800212328.png]: /images/20221005/aeee4bcf6cc44b0b84eed648268bba8f.png
[20210628002140365.png]: /images/20221005/1613c6e3cff94d048fa357bf2e3d28c7.png
[20210628002142446.png]: /images/20221005/cc2c536a4a5a4c1c82124d805360c905.png
[20210628002400160.png]: /images/20221005/67dabf7d6b474538a16555c4bc67bf4e.png
[20210628002522306.png]: /images/20221005/b3ade236e2a840cf8c5395cae579c42a.png
[20210628002705688.png]: /images/20221005/49ec80c0cacf44819aa17c169160c085.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/1adff5e1f5314633a75318bb215d8be5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 2]: /images/20221005/b8f60ade3a934437a781f42142cae31d.png