c++ map iterator 获取key_ES6 系列之一文彻底弄懂 Iterator

最新推荐文章于 2022-08-13 23:56:26 发布
最新推荐文章于 2022-08-13 23:56:26 发布
阅读量329 收藏
点赞数
文章标签： c++ map iterator 获取key es6 阮一峰 iterator遍历

前言

本文主要来深入剖析 ES6 的 Iterator(迭代器/遍历器)，在了解它之前，我们首先要知道为什么需要 Iterator? 它出现的原因是什么?

从循环说起

平时开发中，我们经常会用到循环，拿最基本的来说，比如循环一个数组:

// for循环
var arr = [1, 2, 3, 4]
for (let i = 0; i   console.log(arr[i]) // 1 2 3 4
}

// 也可以用forEach循环
arr.forEach(item => {
  console.log(item) // 1 2 3 4
})

// 也可以用for in循环
for (let i in arr) {
  console.log(arr[i]) // 1 2 3 4
}

如果是循环输出字符串的每一个字符

// for循环
var str = 'abcde'
for (var i = 0; i   console.log(str[i]) // a b c d e
}

// for in循环
for (var k in str) {
  console.log(str[k]) // a b c d e
}

// forEach不能遍历字符串，如果硬要用则只能先把字符串转为数组再用数组方式循环

如果是循环输出一个 map 对象呢, 妥妥的就一个 foreach 循环，普通的 for 循环和 for...in 都不行

var map = new Map()
map.set('first', '第一')
map.set('second', '第二')
map.set('third', '第三')

// forEach循环
map.forEach((val, key) => {
  console.log(val, key)
  // 第一 first
  // 第二 second
  // 第三 third
})

对于上述各集合数据，我们发现没有一个循环方法是可以一次性解决的。

虽然 forEach 循环不能循环字符串，但字符串可以转为数组再使用 forEach 即可输出，但这操作并不舒服每次使用都要转换。而且 forEach 循环存在缺点：不能使用break，continue语句跳出循环，或者使用return从函数体返回。

而 for 循环在有些情况写代码会增加复杂度，而且不能循环对象。

相比下，for...in 的缺点是不仅遍历数字键名，还会遍历手动添加的自定义键，甚至包括原型链上的键。for...in 主要还是为遍历对象而设计的，并不太适用于遍历数组。

如下代码

Array.prototype.protoValue = 'hello'
var arr = [1, 2, 3, 4]
arr.test = 'test'
for (let i in arr) {
  console.log(arr[i]) // 1 2 3 4 test hello
}

话说回来，有没有一种更好的循环能一统上述循环问题？ES6 就有了，用 for...of 循环

for...of 循环出现

它的出现解决了什么问题呢？首先是当然是能解决了上述我们的问题

对上述数据进行循环输出

for (let v of arr) {
  console.log(v) // 1 2 3 4
}
for (let v of str) {
  console.log(v) // a b c d e
}
for (let v of map) {
  console.log(v)
  // (2) ["first", "第一"]
  // (2) ["second", "第二"]
  // (2) ["third", "第三"]
}

来看看它的优点：

  1. 简洁直接的遍历数组语法
  2. 它避开了 for-in 循环的所有缺点
  3. 与 forEach 循环不同的是，它可以使用 break、continue 和 return 语句

阮一峰老师的《ECMAScript 6 入门》提到：

❝

ES6 中引入了 for...of 循环，作为遍历所有数据结构的统一的方法。

❞
❝

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

❞

一个数据结构只要具有 iterator 接口，就可以用 for...of 循环遍历它的成员。

也就是说，并不是所有的对象都能使用 for...of 循环，只有实现了 Iterator 接口的对象，才能够 for...of 来进行遍历取值。

那么，Iterator 是什么呢？我们接着说

Iterator 迭代器

概念

❝

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

❞

作用

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

现在明白了，Iterator 的产生主要是为了使用 for...of 方法。但具体 Iterator 概念还是有些抽象，如果要直接具体的描述的话：

Iterator 其实就是一个具有 next()方法的对象，并且每次调用 next()方法都会返回一个结果对象，这个结果对象有两个属性, 如下

{
    value: 表示当前的值,
    done: 表示遍历是否结束
}

这里多了一些概念，我们来梳理一下：

Iterator 是一个特殊的对象：

  1. 它具有 next()方法，调用该方法就会返回一个结果对象
  2. 结果对象有两个属性值：value和done。
  3. value表示具体的返回值；done 是布尔类型，表示集合是否完成遍历，没有则返回 true，否则返回 false
  4. 内部有一个指针，指向数据结构的起始位置。每调用一次 next()方法，指针都会向后移动一个位置，直到指向最后一个位置。

模拟 Iterator

根据上述描述，我们来模拟一个迭代器，代码如下

function createIterator(items) {
  var i = 0
  return {
    next: function () {
      var done = i >= item.length
      var value = !done ? items[i++] : undefined

      return {
        done: done,
        value: value,
      }
    },
  }
}

// iterator 就是一个迭代器对象
var iterator = createIterator([1, 2, 3])

console.log(iterator.next()) // { done: false, value: 1 }
console.log(iterator.next()) // { done: false, value: 2 }
console.log(iterator.next()) // { done: false, value: 3 }
console.log(iterator.next()) // { done: true, value: undefined }
console.log(iterator.next()) // { done: true, value: undefined }
console.log(iterator.next()) // { done: true, value: undefined }

过程:

  1. 创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。
  2. 第一次调用指针对象的 next 方法，next 方法内部通过闭包来保存指针i 的值，每次调用i都会+1，指向下一个。故第一次指针指向数据结构的第一个成员，输出 1。
  3. 第二次调用指针对象的 next 方法，指针就指向数据结构的第二个成员，输出 2。
  4. 第三次调用指针对象的 next 方法，数组长度为 3，此时数据结构的结束位置，输出 3。
  5. 第四次调用指针对象的 next 方法，此时已遍历完成了，输出 done 为 true 表示完成，value 为 undefined，此后第 n 次调用都是该结果。

看到这里大家大概知道Iterator了，但 Iterator 接口主要供 for...of 消费。我们试着用 for...of 循环上面创建 Iterator 对象

var iterator = createIterator([1, 2, 3]);

for (let value of iterator) {
    console.log(value); // Uncaught TypeError: iterator is not iterable
}

结果报错，说明我们生成的 iterator 对象并不是可遍历的，这样的结构还不能够被 for...of 循环

那什么样的结构才是可遍历的呢？

可迭代对象 Iterable

如何实现

ES6 还引入了一个新的 Symbol 对象，symbol 值是唯一的。

一个数据结构只要部署了 Symbol.iterator 属性，就被视为具有 iterator 接口；调用这个接口，就会返回一个遍历器对象。这样的数据结构才能被称为可迭代对象(Iterator)，该对象可被 for...of 遍历。

照着上面的规定来创建一个可迭代对象

var arr = [1, 2, 3]

arr[Symbol.iterator] = function () {
  var _this = this
  var i = 0
  return {
    next: function () {
      var done = i >= _this.length
      var value = !done ? _this[i++] : undefined
      return {
        done: done,
        value: value,
      }
    },
  }
}

// 此时可以for...of遍历
for (var item of arr) {
  console.log(item) // 1 2 3
}

由此，我们也可以知道 for...of 遍历的其实是对象的 Symbol.iterator 属性。

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

在 ES6 中，所有的集合对象，包括数组，类数组对象(arguments 对象、DOM NodeList 对象)，Map 和 Set，还有字符串都是可迭代的，都可以被 for...of 遍历，因为他们都有默认的迭代器。

下面就挑其中几个类型来举例子：

数组
var arr = [1, 2, 3]

var iteratorObj = arr[Symbol.iterator]()

console.log(iteratorObj.next())
console.log(iteratorObj.next())
console.log(iteratorObj.next())
console.log(iteratorObj.next())

输出结果：944146ca7412c4e3420f28c923b61d98.png由上述对迭代器的概念认识，输出结果也完全符合我们预期。

arguments

我们知道普通对象是默认没有部署这个接口的，所以 arguments 这个属性没有在原型上，而是在对象自身的属性上。

function test() {
  var obj = arguments[Symbol.iterator]()
  console.log(arguments)
  console.log(obj.next())
  console.log(obj.next())
  console.log(obj.next())
}

test(1, 2, 3)

输出结果：

01101c6d6654419ef30c5a9e6c3e139a.png
NodeList
<div class="test">1div>
<div class="test">2div>
<div class="test">3div>
const nodeList = document.getElementsByClassName('test')
for (const node of nodeList) {
  console.log(node)
}

输出结果：

256b2a185a9c949f3ae97674de538679.png
map

这次直接从原型上找来证明

console.log(Map.prototype.hasOwnProperty(Symbol.iterator)) // true

至于其他类型的可迭代对象大家可举一反三。

调用 Iterator 接口的场合

有一些场合会默认调用 Iterator 接口(即 Symbol.iterator 方法)

解构赋值

let set = new Set().add('a').add('b').add('c')

let [x, y] = set
console.log(x, y) // a b

扩展运算符

扩展运算符(...)也会调用默认的 Iterator 接口，可以将当前迭代对象转换为数组。

var str = 'hello'
console.log([...str]) // ["h", "e", "l", "l", "o"]

let arr = ['b', 'c']
console.log(['a', ...arr, 'd']) // ["a", "b", "c", "d"]

yield*

yield*后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。

let generator = function* () {
  yield 1
  yield* [2, 3, 4]
  yield 5
}

var iterator = generator()

console.log(iterator.next()) // { value: 1, done: false }
console.log(iterator.next()) // { value: 2, done: false }
console.log(iterator.next()) // { value: 3, done: false }
console.log(iterator.next()) // { value: 4, done: false }
console.log(iterator.next()) // { value: 5, done: false }
console.log(iterator.next()) // { value: undefined, done: true }

关于 yield 之后会再写一篇专题

其他场合

例如：for...of、Set()、Map()、Array.from()等。我们主要是为了证明调用上面这些函数时着实是用到了 Iterator 接口。

我们贴出上面的实现可迭代对象的代码，进行改动。想一想，尽管我们没有手动添加 Symbol.iterator 属性，但因为 ES6 默认部署了 Symbol.iterator，数组还是可以遍历成功，那当然我们也可以手动修改这个属性，重新部署也可以。

如果我们手动修改生效，影响了输出，证明某方法调用需要用到 Iterator 接口

var arr = [1, 2, 3]

arr[Symbol.iterator] = function () {
  var _this = this
  var i = 0
  return {
    next: function () {
      var done = i >= _this.length
      var value = !done ? _this[i++] : undefined
      return {
        done: done,
        value: value + ' 手动添加的属性', // 添加自定义值
      }
    },
  }
}

// 输出结果显示手动修改生效，证明for...of调用了Iterator接口
for (var item of arr) {
  console.log(item)
  // 1 手动添加的属性
  // 2 手动添加的属性
  // 3 手动添加的属性
}

var set = new Set(arr)
console.log(set) // Set(3) {"1 手动添加的属性", "2 手动添加的属性", "3 手动添加的属性"}

上述其他方法证明也是如此，就不一一列出了。

计算生成的数据结构

有些数据结构是在现有数据结构的基础上，计算生成的。比如，ES6 的数组、Set、Map 都部署了以下三个方法，调用后都返回遍历器对象。

  1. entries() 返回一个遍历器对象，用来遍历[键名,键值]组成的数组。对于数组，键名就是索引值。
  2. keys() 返回一个遍历器对象，用来遍历所有的键名。
  3. values() 返回一个遍历器对象，用来遍历所有的键值。
var arr = ['first', 'second', 'third']

for (let index of arr.keys()) {
  console.log(index)
}

// 0
// 1
// 2

for (let color of arr.values()) {
  console.log(color)
}

// first
// second
// third

for (let item of arr.entries()) {
  console.log(item)
}

// [ 0, "first" ]
// [ 1, "second" ]
// [ 2, "third" ]

判断对象是否可迭代

const isIterable = obj => obj != null && typeof obj[Symbol.iterator] === 'function'
console.log(isIterable(new Set())) // true
console.log(isIterable(new Map())) // true
console.log(isIterable([1, 2, 3])) // true
console.log(isIterable('hello world')) // true

for...of 循环不支持遍历普通对象

梳理了半天，回到最初，Iterator 的产生主要是为了使用 for...of 方法。而对象不像数组的值是有序的，遍历的时候根本不知道如何确定他们的先后顺序，所以要注意的是 for...of 循环不支持遍历对象。

如果非要遍历对象，同理对象也必须包含[Symbol.iterator]的属性并实现迭代器方法，可以通过手动利用 Object.defineProperty 方法添加该属性。

var obj = { a: 2, b: 3 }
for (let i of obj) {
  console.log(i) // Uncaught TypeError: obj is not iterable
}

关于 Iterator 就写到这里了，下一篇会讲解 ES6 的 Generator 生成器。

❝

欢迎关注我掘金账号和Github技术博客：

  • 掘金：https://juejin.im/user/1257497033714477
  • Github：https://github.com/Jacky-Summer
  • 觉得对你有帮助或有启发的话欢迎 star，你的鼓励是我持续创作的动力~
  • 如需在微信公众号平台转载请联系作者授权同意，其它途径转载请在文章开头注明作者和文章出处。
❞

0bd6aa2033b3796344abab85f0c800aa.png

weixin_39562606
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
C++用迭代器遍历map的key值方法
m0_67392273的博客
08-13 3660
代码】C++用迭代器遍历map的key值方法。
【C++】STL——map的介绍和使用、map的构造函数、map的迭代器、map的容量和访问函数、map的增删查改函数
最新发布
Crocodile1006的博客
08-22 6106
STL、map的介绍、map的使用、map的构造函数、map的迭代器、map的容量和访问函数、empty、size、operator[]、map的增删查改函数、insert、erase
c++ map iterator 获取key_大数据学习路线分享大数据之Map接口
weixin_39854730的博客
11-28 291
　　大数据学习路线分享大数据之Map接口，Collection:直接存储的是值. Map:本身是接口,存储的是键值对,一个元素就是一个键(key)值(value)对,key必须是唯一的,值随意,即可以重复。Map:接口 HashMap:底层是哈希表,线程不安全的 TreeMap:底层是二叉树,线程不安全的介绍Map接口的方法 Map<String, String> map = new...
c++ 的map、iterator用法
m0_59092234的博客
08-13 568
背景：指针可以用来遍历存储空间连续的数据结构，但是对于存储空间费连续的，就需要寻找一个行为类似指针的类，来对非数组的数据结构进行遍历。定义：迭代器是一种检查容器内元素并遍历元素的数据类型。迭代器提供对一个容器中的对象的访问方法，并且定义了容器中对象的范围。迭代器（Iterator）是指针（pointer）的泛化，它允许程序员用相同的方式处理不同的数据结构（容器）。（1）迭代器类似于C语言里面的指针类型，它提供了对对象的间接访问。（2）指针是C语言中的知识点，迭代器是C++中的知识点。...
C++map迭代器最全最容易理解
热门推荐
qq_53547805的博客
12-25 1万+
最简单易懂的map迭代器
C++迭代器介绍（iterator、const_iterator、reverse_interator、const_reverse_interator）
08-25
在C++编程语言中，迭代器（iterator）是访问标准模板库（STL）容器内元素的关键工具。迭代器提供了一种类似于指针的方式，但更加强大和灵活，能够遍历并操作容器中的数据。根据不同的功能，迭代器分为几个不同类型。...
C++_Iterator_迭代器_介绍
02-27
除了使用下标来访问 vector 对象的元素外，标准库还提供了另一种访问元素的方法：使用迭代器（iterator）。迭代器是一种检查容器内元素并遍历元素的数据类型。 标准库为每一种标准容器（包括vector）定义了一种迭代...
ES6_es6_
09-30
**ES6（ECMAScript 2015）**是JavaScript语言的一个重要更新版本，引入了许多新特性，极大地提升了开发效率和代码质量。本总结将详细介绍ES6的关键知识点。 1. **变量声明与作用域** - **let 和 const**：替代了...
ES6入门教程之Iterator与for...of循环详解
08-30
【ES6入门教程之Iterator与for...of循环详解】 在ES6中，Iterator（遍历器）是一个重要的概念，它提供了一种通用的遍历数据结构的方法，使得无论是数组、对象还是其他数据类型，都能通过相同的接口进行遍历。遍历器...
使用iterator遍历map——C++新手上机疑难点总结⑦
weixin_43868032的博客
04-20 1194
使用iterator遍历map——C++新手上机疑难点总结⑦1. iterator遍历：2. 值为默认值的key一定不会被iterator遍历吗？ 我们知道，map<int, int> mymap中，mymap[ i ] 的默认值为0；但当我们使用 iterator 遍历mymap时，默认值为0的这些记录会被遍历到吗？ 1. iterator遍历： #include <iostr...
c++ map iterator 获取key_C++STL : unordered_map详解
weixin_39751453的博客
11-22 1742
转载详细介绍C++STL：unordered_map - 追逐梦想的苦行僧 - 博客园​www.cnblogs.com尝试联系文章作者，但是联系不上了。（侵删）加入了自己的一点解释和理解。C++ 11标准中加入了unordered系列的容器。unordered_map记录元素的hash值，根据hash值判断元素是否相同。map相当于java中的TreeMap，unordered_map相当于Has...
【一天一个C++小知识】013.std:map-不存在的key查找其value
kevin_zhao_zl的博客
04-27 4491
1、在map中，由key查找value时，首先要判断map中是否包含key。 2、如果不检查，直接返回map[key]，可能会出现意想不到的行为。如果map包含key，没有问题，如果map不包含key，使用下标有一个危险的副作用，会在map中插入一个key的元素，value取默认值，返回value。也就是说，map[key]不可能返回null。 3、map提供了两种方式，查看是否包含key，m.count(key)，m.find(key)。 4、m.count(key)：由于map不包含重复的key，因此m
Java—Map集合详解（HashMap/Hashtable/LinkedHashMap/Properties/TreeMap/WeakHashMap/IdentityHashMap/EnumMap）
Andya_net的博客
04-08 568
Map Map集合介绍   Map（也称为字典、关联数组）是用于保存具有映射关系的数据，保存两组值，key和value，这两组值可以是任何应用类型的数据。   Map的key不允许重复（底层Map的keySet()返回的是key的Set集合，所以key不会重复），即Map中对象的任意两个key通过equals()方法得到的都是false。而，Map的value值是可以重复的（Map的底层value...
C/C++ Map 关于insert、iterator、erase、char * key总结
机器学习
02-22 2062
本文主要讲解了STL map常用方法insert，及与之相关的pair、make_pair，同时简明阐述了iterator+erase结合使用时可能出现的问题。
List、Map、Set
qq_43743402的博客
10-25 174
一、List、Map、Set三个接口，存取元素时，各有什么特点？ （1）Set集合的add有一个boolean类型的返回值，当集合中没有某个元素时，则可以成功加入该 元素，返回结果为true；当集合中存在与某个元素equals方法相等 的元素时，则无法加入该元素， 取元素时只能用Iterator接口取得所有元素，在逐一遍历各个元素； （2）List表示有先后顺序的集合，调用add()方法，指定当前对象在集合中的存放位置；一个对象可 以被反复存进集合中；每调用一次add()方法，该对象就会被插入集合中一次，其
c++ iterator(迭代器)分类及其使用
a3192048的博客
10-03 3141
　　总所周知,c++的stl中提出了iterator的概念,这是C所没有的.在一般的使用中,iterator的行为很像c内建的指针.而在java和c#中索性就直接取消了指针,而采用类似iterator的做法来代替了指针.很多编程人员在使用iterator的时候也仅仅把他当作了指针的一个变体而没有多加注意。 　　不过既然是学习,那我们在使用的时候也要知道其存在的原因,其分类以及用法吧. 　　首先...
iterator （C++）
Reality
05-07 1967
      &lt;iterator&gt;是C++标准程序库中的一个头文件，定义了C++ STL标准中的一些迭代器模板类，这些类都是以std::iterator为基类派生出来的。迭代器提供对集合(容器)元素的操作能力。迭代器提供的基本操作就是访问和遍历。迭代器模拟了C++中的指针，可以有++运算，用*(解引用算符，deference)或-&gt;算符来访问容器中的元素。容器中元素如果改变了所用内...
java集合中Iterator的使用
yanchao_yc的博客
06-26 730
import java.util.ArrayList;import java.util.HashMap;import java.util.Iterator;import java.util.List;import java.util.Map;import java.util.Map.Entry;public class List_Map_Iterator { public static void ...
c++将iterator转为reverse_iterator
06-01
可以使用STL中的reverse_iterator适配器来将iterator转为reverse_iterator。具体实现方法如下： ```c++ #include #include #include using namespace std; int main() { vector<int> vec{1, 2, 3, 4, 5}; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值