ES6（迭代器、Set、Map、数组去重）

努力的旋转菠萝

于 2022-03-27 00:01:37 发布

阅读量1.5k

点赞数

文章标签： es6

本文链接：https://blog.youkuaiyun.com/qq_48108860/article/details/123723492

版权

本文介绍了ES6中的迭代器接口Iterator，详细讲解了其作用、原生支持的数据结构及遍历过程。此外，文章还探讨了Set和Map数据结构的特性，并列举了多种数组去重的方法，包括使用双层for循环、indexOf()、includes()以及Set的独特去重功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

迭代器Iterator

Iterator 的作用

原生具备 Iterator 接口的数据结构

Iterator 的遍历过程

迭代器实现了Iterator接口，只要实现了Iterator就可以使用for-of遍历

for-of实现原理就是调用迭代器的next()方法

使用双层for循环+splice()进行数组去重（删除数组中重复的元素）

利用indexOf()+push()进行数组去重（在新数组中添加新数组查找不到的元素）

利用includes()+push()进行数组去重（在新数组中添加新数组不包含的元素）

利用set进行数组去重（set成员唯一的，数组转set再转数组）

迭代器Iterator

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

Iterator 的作用

一是为各种数据结构，提供一个统一的、简便的访问接口；

二是使得数据结构的成员能够按某种次序排列；

三是ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。

原生具备 Iterator 接口的数据结构

Array、Map、Set、String、TypedArray、arguments、NodeList

// 数组的实例方法

let arr = ['hello', 12, true, null, undefined];

// keys values entries 当前变量是迭代器对象

let keys = arr.keys();

let values = arr.values();

let entries = arr.entries();

console.log(keys,values,entries,'数组');

Iterator 的遍历过程

1、创建一个指针对象，指向当前数据结构的起始位置。即遍历器对象本质上就是一个指针对象。

2、第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。

3、第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。

4、不断调用指针对象的next方法，直到它指向数据结构的结束位置。

迭代器实现了Iterator接口，只要实现了Iterator就可以使用for-of遍历

//数组的遍历 let arr = ['hello', 12, true, null, undefined]; // keys values entries 当前变量是迭代器对象 let keys = arr.keys(); let values = arr.values(); let entries = arr.entries(); console.log(keys, values, entries, '数组'); // 只要实现了迭代器接口就可以使用for...of遍历 for (let key of keys) { // 返回的数组的索引 console.log(key,'数组的索引'); }; for (let value of values) { //数组的每一项元素 console.log(value,'数组的元素'); }; for (let entry of entries) { console.log(entry,'数组的键值对'); };	// 字符串的遍历 let str = 'world'; for (let key of str) { console.log(key); };

以前的遍历方法
补充：字符串变数组 // 法一 let str = 'world'; let result=str.split(); console.log(result,'split()'); // 法二 let [...a] = str; console.log(a,'拓展运算符');	let str = 'world'; for (let key in str) { console.log(str[key],'法一：for...in'); }; for (let i = 0; i < str.length; i++) { console.log(str.charAt(i),'法二：charAt()'); }

for-of实现原理就是调用迭代器的next()方法

迭代过程:创建一个指针对象，指向当前的数据结构起始位置;

第一次调用指针对象的next方法，指向数据结构的第一个成员；

第二次调用指针对象的next方法，指向数据结构的第二个成员;

直到没有成员可以指向，done为true，指向数据结构的结束位置;

//数组的实例方法

let arr = ['hello', 12, true, null, undefined];

// keys values entries 当前变量是迭代器对象

let keys = arr.keys();

let values = arr.values();

let entries = arr.entries();

console.log(keys, values, entries);

console.log(keys.next());

console.log(values.next());

console.log(entries.next());

遍历迭代器对象

//数组的实例方法

let arr = ['hello', 12, true, null, undefined];

// keys values entries 当前变量是迭代器对象

let keys = arr.keys();

let values = arr.values();

let entries = arr.entries();

console.log(keys, values, entries);

let result; //接收迭代器对象

while (!(result = keys.next()).done) {

console.log(result, 'keys');

}

while (!(result = values.next()).done) {

console.log(result, 'values');

}

while (!(result = entries.next()).done) {

console.log(result, 'entries');

}

Set

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

// 创建一个set let set = new Set(); console.log(set,'set数据解构');
// 添加set成员 set.add('hello'); set.add('world'); set.add('world'); console.log(set, 'set添加元素');
// 删除set成员 set.delete('hello'); console.log(set,'set删除元素');
// 查看set的长度 console.log(set.size,'set的长度');
// 查看set是否含有成员 console.log(set.has('hello1'),'set元素判断是否存在');
// 清空set成员的方法 set.clear(); console.log(set,'set清空元素');
// 遍历set set的key和value是一样 console.log(set.keys()); console.log(set.values()); console.log(set.entries()); set.forEach((key, value) => { console.log(key, value); });

Map

Map类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。Map 可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。

let obj = { name: "zhangsan", age: '12', }; console.log(typeof obj.name,'对象中属性的类型'); console.log(typeof obj.age,'对象中属性的类型'); console.log(obj,'对象');
let entries = Object.entries(obj); console.log(entries,'对象转数组');
// 创建map集合 let map = new Map(entries); console.log(map,'数组转Map集合');
// 添加map集合成员 // map的键可以使用任意数据类型 map.set('{name:"李四"}', '我不是李四'); map.set('1', '1'); console.log(map,'添加map集合成员');
// 删除map集合成员 map.delete('name');//键的名称 console.log(map,'删除map集合成员');
// 获取map集合成员 console.log(map.get('age'),'获取map集合成员'); // 获取map集合的长度 console.log(map.size, '获取map集合的长度');
// 遍历map集合 console.log(map.keys(),'遍历map集合'); console.log(map.values(),'遍历map集合'); console.log(map.entries(),'遍历map集合'); map.forEach((value, key) => { console.log(value, key,'遍历map集合'); }); map.forEach((key, value) => { console.log(key, value,'遍历map集合'); })