迭代器Iterator

Iterator 的作用

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

Iterator 的遍历过程

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

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

遍历迭代器对象

Set

Map

数组去重

使用双层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集合'); })

数组去重

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

核心思想：对比数组的前一项和后一项，如果相等，删除后一项，后面元素的下标缩减1

let arr = [1, 2, 3, 2, 5, 4, 5, 4, 6];

let unique = (arr) => {

// 数组的前一项

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

// 数组的后一项

for (j = i + 1; j < arr.length; j++) {

// [1,1,2,3,]

if (arr[i] === arr[j]) {

// 删除数组的重复的后一项

arr.splice(j, 1);

// 修正下标

j--;

}

unique(arr);

console.log(arr);

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

核心思想：声明一个空数组，利用空数组查找数组元素，找不到添加到空数组，返回空数组

indexOf()：查找数组元素，返回的索引或者-1

let arr=[1,2,3,2,5,4,5,4,6];

let unique = (arr) => {

// 声明一个新数组

let res = [];

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

// 如果新数组中查找不到原数组的元素，则添加到新数组中

if ((res.indexOf(arr[i])) === -1) {

res.push(arr[i]);

}

return res;

}

console.log(unique(arr));

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

核心思想：声明一个空数组，利用空数组查看数组元素是否包含在里面，不包含添加，返回空数组

let arr = [1, 2, 3, 2, 5, 4, 5, 4, 6];

let unique = (arr) => {

// 声明新数组

let res = [];

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

// 不包含在新数组中的元素添加到新数组中

if (!res.includes(arr[i])) {

res.push(arr[i])

}

return res

}

console.log(unique(arr));

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

let arr=[1,2,3,2,5,4,5,4,6];

// 先将arr转换为set，set成员唯一的，没有重复的

let set=new Set(arr);

console.log(set,'arr转set');

// 将set转换为去重后的数组

let [...a]=set;

console.log(a,'set转arr');

// 两步合并

let result=[...new Set([1,2,3,2,5,4,5,4,6])];

console.log(result,'两步合并');

ES6（迭代器、Set、Map、数组去重）相关推荐

ES6最简单的数组去重方式
let arr1 = [1,2,4,4,22,22,33,33] let set = new Set(arr1); Array.from(set) console.log(set);
ES6数组去重的三个简单办法
ES6数组去重的三个简单办法简单说一下利用ES6实现数组去重的三个办法. 第一种: 利用Map对象和数组的filter方法贴上相关代码打印后的结果通过打印我们发现,确实实现了我们想要的效果.那 ...
Js中数组去重的几种方法
前几天在看前端面试题的时候,其中js部分有个问题是实现数组去重的算法,一开始就想了一两种方法,后来仔细回忆了下这个题,觉得该问题实现方法确实不止局限于一两种方法 ,从不同的角度去看待该问题就会有多种实 ...
js 数组去重的方法大全
1.使用双重for循环,再利用数组的splice方法去重(ES5常用) let arr = [1, 5, 6, 0, 7, 3, 0, 5, 9, 5]; function unique(arr) { ...
js 数组去重的几种方法
1. new Set 的两种方法 let arr = [1, 0, 0, 2, 9, 8, 3, 1];function unique(arr) {return Array.from(new Set( ...
JavaScript之数组去重
数组去重是我们工作以及面试中经常会碰到得一道编程题,说明它对于我们而言具有非常重要的意义,所以我们必须得掌握它,以下是我总结得一些常见数组去重的方法: 1.indexOf() 返回某个指定的字符串值在 ...
es6通过Map对象对数组去重
关于js数组去重的方法有很多,我以前居然用的是嵌套两层for循环来加一层if来判断数组里面的重复数据,当我了解了es的方法之后,才发现我的方法是有多蠢(笑哭). 首先关于数组去重我们先简单介绍一下es ...
es6数组去重（连重复的对象也可以去掉）
1,去除简单类型 //ES6中新增了Set数据结构,类似于数组,但是它的成员都是唯一的 ,其构造函数可以接受一个数组作为参数,如: let array = [1, 1, 1, 1, 2, 3, 4, ...
js中ES6新增的数组方法reduce()，和数组去重，降维。
js中ES6新增的数组方法reduce() js数组reduce()详解基本概念: reduce()方法接收一个函数作为累加器,数组中的每一值(从左到右)开始缩减,最后成为一个值 reduce()为 ...

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

迭代器Iterator

Iterator 的作用

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

Iterator 的遍历过程

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

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

遍历迭代器对象

Set

Map

数组去重

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

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

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

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

ES6（迭代器、Set、Map、数组去重）相关推荐

最新文章

热门文章