2020-11-12 Set和Map数据结构以及Promise

最新推荐文章于 2024-06-07 10:18:22 发布

努力学习前端的小朋友

最新推荐文章于 2024-06-07 10:18:22 发布

阅读量418

点赞数

文章标签： es6

本文链接：https://blog.csdn.net/weixin_45665275/article/details/109644624

版权

Set

它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成 Set 数据结构。
Set函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。

// Set() 构造函数
// set 是Set的一个实例对象
// 可快速对数组进行去重
let arr = [2,3,4,5,3,5,6,8]
let set = new Set(arr)
console.log(set)    //Set { 2, 3, 4, 5, 6, 8 }

// let arr = [2,3,4,5,3,5,6,8]
// let set = new Set()
// arr.forEach((item)=>{
//     set.add(item)
// })
// console.log(set)    //Set { 2, 3, 4, 5, 6, 8 }

Set实例的属性和方法：
属性：

Set.prototype.constructor：构造函数，默认就是Set函数。
Set.prototype.size：返回Set实例的成员总数。

方法：

方法	含义
add(value)	添加某个值，返回Set结构本身
delete(value)	删除某个值，返回一个布尔值，表示删除是否成功
has(value)	返回一个布尔值，表示该值是否为Set的成员
clear()	清除所有成员，没有返回值
keys()	返回键名的遍历器
values()	返回键值的遍历器
entries()	返回键值对的遍历器(for in)
forEach()	使用回调函数遍历每个成员
size	获取成员个数

let set = new Set()
set.add(10)
set.add(20)
set.add(30)
set.add(20)
console.log(set)    //Set { 10, 20, 30 }
console.log(set.size)   //3 长度
console.log(set.has(40))    //false 判断是否有改值
console.log(set.keys())     //[Set Iterator] { 10, 20, 30 }
console.log(set.values())   //[Set Iterator] { 10, 20, 30 }
console.log(set.entries())  //[Set Entries] { [ 10, 10 ], [ 20, 20 ], [ 30, 30 ] }
set.clear() //清空set对象
console.log(set)    //被清空 Set {}

Map

类似于对象，里面保存的数据是键值对的形式
但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键
和Object的区别是Map的键名可以为值
参数必须是数组，数据项也要为数组

//参数必须为数组，数组项也要为数组
let map = new Map([['name','tom'],['age',12]])
console.log(map)    //Map { 'name' => 'tom', 'age' => 12 }

Map实例的属性和方法：
属性：

Set.prototype.size：返回 Map 结构的成员总数

方法：

方法	含义
set(key, value)	set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键
get(key)	get方法读取key对应的键值，如果找不到key，返回undefined
has(key)	has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中
delete(key)	delete方法删除某个键，返回true。如果删除失败，返回false
clear()	清除所有成员，没有返回值
keys()	返回键名的遍历器
values()	返回键值的遍历器
entries()	返回键值对的遍历器
forEach()	使用回调函数遍历每个成员
size	获取成员个数

let map = new Map([['name','tom'],['age',12]])
console.log(map)    //Map { 'name' => 'tom', 'age' => 12 }
map.set('gender','male')
console.log(map.get('name'))    //tom
console.log(map.has('age'))    //true
console.log(map)    //Map { 'name' => 'tom', 'age' => 12, 'gender' => 'male' }
map.delete('age')
console.log(map)    //Map { 'name' => 'tom', 'gender' => 'male' }
console.log(map.size)   //2

Iterator

它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）
作用：

为各种数据结构，提供一个统一的、简便的访问接口
使得数据结构的成员能够按某种次序排列
ES6创造了一种新的遍历命令for…of循环，Iterator接口主要供for…of消费

遍历过程：

创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。
第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。
第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。
不断调用指针对象的next方法，直到它指向数据结构的结束位置。

原生具备 Iterator 接口的数据结构：Array、Map、Set、String、函数的 arguments 对象、NodeList 对象

let s = new Set([10,20,30,40,50])
let values = s.values()
// console.log(values)     //[Set Iterator] { 10, 20, 30, 40, 50 }
console.log(values.next())  //{ value: 10, done: false }
console.log(values.next())  //{ value: 20, done: false }
console.log(values.next())  //{ value: 30, done: false }
console.log(values.next())  //{ value: 40, done: false }
console.log(values.next())  //{ value: 50, done: false }
console.log(values.next())  //{ value: undefined, done: true }  done判断当前数据是否遍历完

Promise

本身是一个同步方法，用来优化异步(主要是.then()进行异步操作)
是一个承诺对象
简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理

实例方法

定义在Promise.prototype中的方法，通过Promise实例可以直接调用

Promise.prototype.then()
当状态由pending变为fulfilled的时候执行该回调函数，
参数：回调函数，回调函数的参数为resolve函数传递过来的值
返回值：返回一个新的Promise实例对象，因此可以使用链式调用
Promise.prototype.catch()
当状态由pending变为rejected的时候执行该回调函数
参数：回调函数，回调函数的参数为reject函数传递过来的值
返回值：返回一个新的Promise实例对象，因此可以使用链式调用
Promise.prototype.finally()
当状态由pending变为fulfilled或者rejected的时候都执行该回调函数，
参数：回调函数
返回值：返回一个新的Promise实例对象

基本用法

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

resolve：将Promise对象的状态从“未完成”变为“成功”（即从 Pending 变为 Resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去
reject：将Promise对象的状态从“未完成”变为“失败”（即从 Pending 变为 Rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

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

let promise = new Promise(function(resolve,reject){
        let a = 10
        if(a>=5){
            resolve()   //执行.then方法
        }else{
            reject()    //执行.catch方法
        }
    })
    promise.then(function(r){
        //resolve
    }).catch(function(e){
        //reject
    }).finally(function(){
        //不管是什么状态，都会被执行
    })

Promise.all()

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

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

上面代码中，Promise.all方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，p 的状态由p1、p2、p3共同决定

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

Promise.race()

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

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

上面代码中，Promise.all方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，p 的状态由p1或p2或p3决定

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

Generator

优化异步异步函数的同步化
返回值是一个遍历器对象
Generator函数有两个特征：

function关键字与函数名之间有个星号；
函数内部使用yield表达式

调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个迭代器对象，调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。

// Generator函数
// function关键字和函数名之间有 * 
function* test(){
    console.log(1)
    yield 'a'
    console.log(2)
    yield 'b'
    console.log(3)
    yield 'c'   //yield进行阻塞、分层的效果
    console.log(4)
    return 'endding'    
}
let res = test()
console.log(res)    //Object [Generator] {}
console.log(res.next()) //1 { value: 'a', done: false }
console.log(res.next()) //2 { value: 'b', done: false }
console.log(res.next()) //3 { value: 'c', done: false }
console.log(res.next()) //4 { value: 'endding', done: true }
console.log(res.next()) //{ value: undefined, done: true }