有关迭代器Iterator、Set、Map集合、数值扩展、async异步函数的知识点

最新推荐文章于 2024-02-18 17:24:17 发布

恬淡如雪

最新推荐文章于 2024-02-18 17:24:17 发布

阅读量499

点赞数

文章标签：数据结构 javascript

本文链接：https://blog.csdn.net/qq_48639265/article/details/126906399

版权

4.1 Number.isFinite(), Number.isNaN()

4.2 Number.parseInt(), Number.parseFloat()

4.3 Number.isInteger()

5. async异步函数

5.1概念

一、迭代器Iterator

1.1.概念

迭代器 (Iterator)是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator 接口，就可以访问容器中的元素，也可以完成遍历操作。

1.2.作用

为各种数据结构，提供一个统一的、简便的访问接口；
它可以把访问逻辑从不同类型的集合类中抽象出来，从而避免向客户端暴露集合的内部结构。
使数据结构的成员能够按某种次序排列；
ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。

例如，如果没有使用Iterator，遍历一个数组的方法是使用索引

for(let i=0; i<arr.length; i++) {  }

而访问一个链表（LinkedList）又必须使用while循环：

while((arr=arr.next())!=null) { ... arr.data() ... }

1.3Iterator 的遍历过程

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

1.迭代器实现了Iterator接口,只要有实现了Iterator就可以使用for-of遍历
let arr=[1,2,3,4,5];
console.log(arr.keys()); //Object [Array Iterator] {}
console.log(arr.values());  //Object [Array Iterator] {}
console.log(arr.entries());  //Object [Array Iterator] {}

 let [a] = '10'; //字符串实现了迭代器接口 就可以使用for ...of遍历
 console.log(a); //1
 let [a, b] = '10'; //[ '1', '0' ]
 let [a,b]=10; //报错10 is not iterable
 console.log([a, b]); 

let str='hello'; //实现了迭代器接口,可以遍历
for(let key of str){
    console.log(key); //h e l l o
}


// 以前遍历字符串
let [...a]=str;
console.log(a); //[ 'h', 'e', 'l', 'l', 'o' ]
let result=str.split("")
console.log(result);  //[ 'h', 'e', 'l', 'l', 'o' ]
for(i=0;i<str.length;i++){
    console.log(str.charAt(i));  //h e l l o
}

//遍历迭代器对象
let arr=[1,2,3,4,5];
let keys=arr.keys();
for(let key of keys){
    console.log(key); //0 1 2 3 4
}

let values=arr.values();
for(let value of values){
    console.log(value); // 1 2 3 4 5
}

let entries=arr.entries();
for(let entry of entries){
    console.log(entry); [ 0, 1 ][ 1, 2 ][ 2, 3 ][ 3, 4 ][ 4, 5 ]
}

for-of实现原理:调用迭代器的next()方法,第一次调用将指针指向数据结构的第一个成员，依次调用依次指向，直到没有成员可以指向，done为true则代表没有成员可遍历了。

迭代过程:创建一个指针对象，指向当前的数据结构起始位置;
第一次调用指针对象的next方法，指向数据结构的第一个成员；
第二次调用指针对象的next方法，指向数据结构的第二个成员;
直到done为true，指向数据结构的结束位置;

let arr = [1, 2, 3, 'hello'];
let values = arr.values();
let result;
while (!(result = values.next()).done) {
    console.log(result); 
    //{ value: 1, done: false }
    //{ value: 2, done: false }
    //{ value: 3, done: false }
    //{ value: 'hello', done: false }
}

let arr = [1];
let keys = arr.keys();
let values = arr.values();
let entries = arr.entries()
console.log(keys.next()); //{ value: 0, done: false }
console.log(keys.next()); //{ value: undefined, done: true }
console.log(values.next()); //{ value: 1, done: false }
console.log(values.next());//{ value: undefined, done: true }
console.log(entries.next());//{ value: [ 0, 1 ], done: false }
console.log(entries.next()); //{ value: undefined, done: true }

原生具备 Iterator 接口的数据结构如下：
Array、Map、Set、String、TypedArray、arguments、NodeList

2.Set

2.1概念

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

var set=new Set()
//创建Set集合 成员是唯一的，key-value是一样的
//添加元素
set.add('hello');
set.add('world');
set.add('world');
console.log(set);  //Set(2) { 'hello', 'world' }
// 删除元素
set.delete('hello');  
console.log(set);   Set(1) { 'world' }
// 遍历
let keys=set.keys()  //[Set Iterator] { 'hello', 'world' }
let values=set.values()  //[Set Iterator] { 'hello', 'world' }
let entries=set.entries(); //[Set Entries] { [ 'hello', 'hello' ], [ 'world', 'world' ] }
console.log(keys,values,entries);
set.forEach((value)=>{
    console.log(value); //hello world
})
//判断有没有某个成员
set.has('hello');返回布尔值true或者false，有返回true，没有返回false
//清空set
set.clear();  //Set(0) {}

//set应用 set构造函数可以接受数组或者其他可遍历的数据结构
//数组去重 
let set=new Set([1,2,3,4,1,2,3,4]);
console.log(set);  //Set(4) { 1, 2, 3, 4 }
//数组去重 
let arr=[1,2,3,5,3,2];
let result=new Set(arr);
console.log(result);  //Set(4) { 1, 2, 3, 5 }
//将字符串转换为数组
let [...arr1]='hello'; //[ 'h', 'e', 'l', 'l', 'o' ]
//将set集合转换为数组
let [...arr2]=result;
console.log(arr2);  //[ 1, 2, 3, 5 ]

console.log([...new Set(arr)]) //[ 1, 2, 3, 5 ]

let s = new Set();
s.add([1]);
s.add([1]);
console.log(s); //Set(2) { [ 1 ], [ 1 ] }
//返回set成员个数
console.log(s.size); //2

3.Map集合

3.1概念

Map类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。键不可以重复，值可以重复，键重复则后者覆盖前者，Map集合没有继承Collection接口。

let obj={
    name:"zhangsan",
    age:12
}
//遍历键值对组成的数组
let arr=Object.entries(obj);
console.log(arr); //[ [ 'name', 'zhangsan' ], [ 'age', 12 ] ]
//将数组作为参数放到Map中
let map=new Map(arr)
console.log(map); //Map(2) { 'name' => 'zhangsan', 'age' => 12 }

// 添加元素
map.set('1','1');
console.log(map); //Map(3) { 'name' => 'zhangsan', 'age' => 12, '1' => '1' }
// 删除元素
map.delete('name');
console.log(map); //Map(2) { 'age' => 12, '1' => '1' }
// 获取元素
console.log(map.get('age')); //12

let obj = {
    name: 'zhangsan',
    age: 12
};
let arr = Object.entries(obj);
let map = new Map(arr);
let keys = map.keys();
let values = map.values();
let entries = map.entries();
console.log(keys); //[Map Iterator] { 'name', 'age' }
console.log(values); //[Map Iterator] { 'zhangsan', 12 }
console.log(entries); //[Map Entries] { [ 'name', 'zhangsan' ], [ 'age', 12 ] }
// 遍历
map.forEach((value,key)=>{
    console.log(value,key); //zhangsan name  12 age
})

let obj = {
    name: 'zhangsan',
    age: 12
};
let arr = Object.entries(obj);
let map = new Map(arr);
for (let k of map) {
    console.log(k); //[ 'name', 'zhangsan' ] [ 'age', 12 ]
}
console.log(map.__proto__);//Object [Map] {}

3.2map和object区别?

map的键可以是任意数据类型，object的键只能是字符串或者symbol；
map是一个可迭代的数据结构长度，object不可以直接迭代；
map可以通过size属性获取数据结构长度，object不可以直接获取；
map循环遍历按照循序进行输出，object属性无序数据结构。

	Map	Object
意外的键	Map 默认情况不包含任何键。只包含显式插入的键。	一个 Object 有一个原型, 原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。
键的类型	一个 Map的键可以是任意值，包括函数、对象或任意基本类型。	一个Object 的键必须是一个 String 或是Symbol。
键的顺序	Map 中的 key 是有序的。因此，当迭代的时候，一个 Map 对象以插入的顺序返回键值。	一个 Object 的键是无序的。注意：自ECMAScript 2015规范以来，对象确实保留了字符串和Symbol键的创建顺序；因此，在只有字符串键的对象上进行迭代将按插入顺序产生键。
Size	Map 的键值对个数可以轻易地通过size 属性获取	Object 的键值对个数只能手动计算
迭代	Map 是 iterable 的，所以可以直接被迭代。	迭代一个Object需要以某种方式获取它的键然后才能迭代。
性能	在频繁增删键值对的场景下表现更好。	在频繁添加和删除键值对的场景下未作出优化。

4.数据扩展

4.1 Number.isFinite(), Number.isNaN()

与isFinite、isNaN不同，这两个新方法只对数值有效，Number.isFinite()对于非数值一律返回false, Number.isNaN()只有对于NaN才返回true，非NaN一律返回false。

Number.isFinite(0.8); // true
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
Number.isNaN(NaN) // true
Number.isNaN(15) // false

4.2 Number.parseInt(), Number.parseFloat()

ES6 将全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变。

Number.parseInt('12.34') // 12
Number.parseFloat('123.45#') // 123.45

4.3 Number.isInteger()

Number.isInteger()用来判断一个数值是否为整数。

Number.isInteger(25) // true
Number.isInteger(25.1) // false

5. async异步函数

5.1概念

async函数是使用async关键字声明的函数。 async函数是AsyncFunction构造函数的实例，并且其中允许使用await关键字。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise。

await关键字只在async函数内有效。如果你在async函数体之外使用它，就会抛出语法错误 SyntaxError 。async/await的目的为了简化使用基于promise的API时所需的语法。async/await的行为就好像搭配使用了生成器和promise。async函数一定会返回一个promise对象。如果一个async函数的返回值看起来不是promise，那么它将会被隐式地包装在一个promise中。

简单来说是一个函数，是一个异步编程解决方案，内部封装了generator函数，是一个语法糖，内部自带执行器，与await配合使用；异步编程，同步处理;

  async function loadAll() {
            // 发送一个请求 get
            try {
                let res = await axios.get('http://121.199.0.35:8898/index/article/findCategoryArticles');
                console.log(res);
            } catch (error) {
                // console.log(error);
                // throw 抛出错误
                throw new Error;
            } finally {
                console.log('最终请求');
            }
            // try catch finally
            // 捕获异常

        }
        loadAll();

forEach、for in、for of三者区别

forEach更多用来遍历数组

for in 一般常用来遍历对象或json

for of数组对象都可以遍历，遍历对象需要通过和Object.keys()

恬淡如雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
有关迭代器Iterator、Set、Map集合、数值扩展、async异步函数的知识点

迭代器 (Iterator)是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator 接口，就可以访问容器中的元素，也可以完成遍历操作。
复制链接

扫一扫