扩展1:Iterator(遍历器)

1、迭代器模式:

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示。在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺序访问其中的每个元素。

2、Iterator的概念

表示“集合”的数据结构有很多,比如 Array、Map、Set、String、arguments、NodeList等。这样就需要一种统一的接口机制,来处理遍历所有不同的数据结构。

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

以上数据类型,都有 Symbol.iterator 属性,属性值是一个函数,执行这个函数就会返回一个迭代器。这个迭代器就有 next 方法可顺序迭代子元素。

作用:

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

3、Iterator 的遍历过程

(1)创建一个指针对象,指向起始位置。遍历器对象本质上,就是一个指针对象

(2)第一次调用指针对象的 next 方法,指向第一个成员。

(3)第二次调用指针对象的 next 方法,指向第二个成员。

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

每一次调用next方法,都会返回数据结构的当前成员的信息。具体来说,就是返回一个包含 value 和done 两个属性的对象。其中,value 属性是当前成员的值,done 属性是一个布尔值,表示遍历是否结束。
es6语法模拟:

class MakeIterator {
  constructor(list) {
    this.list = list;
    this.index = 0;
  }

  next() {
    if (this.index < this.list.length) {
      return {
        value: this.list[this.index++],
        done: false
      }
    } else {
      return {
        value: undefined,
        done: true
      }
    }
  }
}

// 测试
let iterator = new MakeIterator([1,2,3]);
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

4、默认 Iterator 接口

数据结构只要部署了 Iterator 接口,我们就称这种数据结构是“可遍历的”(iterable)。

默认的 Iterator 接口部署在数据结构的 Symbol.iterator 属性,或者说,一个数据结构只要具有 Symbol.iterator 属性,就可以认为是“可遍历的”(iterable)。

Symbol.iterator 属性本身是一个函数,这个函数是当前数据结构默认的遍历器生成函数。执行这个函数,就会返回一个遍历器。 因为属性名 Symbol.iterator 是一个表达式,这是一个预定义好的、类型为 Symbol 的特殊值,所以要放在方括号内。

可以运行 Array.prototype[Symbol.iterator] 来测试,如图所示

可以进行自定义:

const obj = {
  [Symbol.iterator]: function () {
    return {
      next: function () {
        return {value: 0, done: false}
      }
    }
  }
}

// 测试
let iterator = obj[Symbol.iterator]();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

结果如下:

对象 obj 是可遍历的(iterable),因为具有 Symbol.iterator 属性。执行这个属性,会返回一个遍历器对象,对象中有next方法

ES6 的有些数据结构原生具备 Iterator 接口(比如数组),不用任何处理。原因在于,这些数据结构原生部署了Symbol.iterator属性,另外一些数据结构没有(比如对象)

凡是部署了Symbol.iterator属性的数据结构,就称为部署了遍历器接口。调用这个接口,就会返回一个遍历器对象。

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

Array
Map
Set
String
TypedArray
函数的 arguments 对象
NodeList 对象


下面的例子是数组的 Symbol.iterator 属性(在原型链 Array.prototype 上),调用这个属性,就得到遍历器对象

let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();

iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }

但是如果 Symbol.iterator 方法对应的不是遍历器生成函数(即会返回一个遍历器对象),解释引擎将会报错遍历器对象的根本特征就是具有 next 方法。 每次调用 next 方法,都会返回一个代表当前成员的信息对象,具有 value 和 done 两个属性。当我们使用 for of 循环遍历的时候,打印的就是 value 属性

// 测试 5。正常运行------------------------------------------
var obj5 = {};

obj5[Symbol.iterator] = function () {
  let index = 0;
  return {
    next: function () {
      if (index < 4) {
        return {value: index++, done: false}
      }
      return {value: undefined,done: true}
    }
  }
}

for (let item of obj5) {
  console.log(item);
}

4、for…of循环

来源:可以利用 Symbol.iterator 自己封装一个遍历方法:

function each(data) {
  let iterator = data[Symbol.iterator]();

  let item = iterator.next();
  while (!item.done) {
    console.log(item.value);
    item = iterator.next();
  }
}

介绍: 一个数据结构只要部署了 Symbol.iterator 属性,就被视为具有 iterator 接口,就可以用 for...of 循环遍历它的成员

for…of 循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象(比如arguments对象、DOM NodeList 对象)、Generator 对象,以及字符串

对于原生部署 Iterator 接口的数据结构,不用自己写遍历器生成函数,for...of循环会自动遍历它们。除此之外,其他数据结构(主要是对象)的 Iterator 接口,都需要自己在Symbol.iterator属性上面部署,这样才会被for…of循环遍历。
 

1、数组

数组原生具备 iterator 接口(即默认部署了 Symbol.iterator 属性),for...of 循环本质上就是调用这个接口产生的遍历器

let arr = ['red','green','blue'];
for (let item of arr) {
  console.log(item); // red green blue
}

空对象obj部署了数组arr的Symbol.iterator属性,结果obj的for…of循环产生了与arr完全一样的结果
let obj = {};
obj[Symbol.iterator] = arr[Symbol.iterator].bind(arr);
for (let item of obj) {
  console.log(item); // red green blue
}

另外,for...of 循环调用遍历器接口,数组的遍历器接口只返回具有数字索引的属性。这一点跟 for...in 循环不一样。 

let arr = [1,2,3];
arr.foo = 'webchang';

for (let i in arr) {
  console.log(i); // "0" "1" "2" "foo"
}

for (let i of arr) {
  console.log(i); // 1 2 3
}

2、Set 和 Map 结构

Set 和 Map 结构也原生具有 Iterator 接口,可以直接使用 for…of 循环

Set:

// 遍历 Set 结构
let names = new Set(['小明','webchang','小红','webchang']);
for (let item of names) {
  console.log(item); // 小明 webchang 小红
}

Map: 

// 遍历 Map 结构
let students = new Map();
students.set('001','小明');
students.set('002','webchang');
students.set('003','小红');
for (let item of students) {
  console.log(item);
}

for (let [num,name] of students) {
  console.log(num,name);
}

 结果如下

 注意:

1、遍历的顺序是按照各个成员被添加进数据结构的顺序

2、Set 结构遍历时,返回的是一个值

 Map 结构遍历时,返回的是一个数组,该数组的两个成员分别为当前 Map 成员的键名和键值

3、计算生成的数据结构 

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

1、entries() 返回一个遍历器对象,用来遍历 [键名, 键值] 组成的数组。对于数组,键名就是索引值;对于 Set,键名与键值相同。Map 结构的 Iterator 接口,默认就是调用 entries 方法。
2、keys() 返回一个遍历器对象,用来遍历所有的键名。
3、values() 返回一个遍历器对象,用来遍历所有的键值。
这三个方法调用后生成的遍历器对象,所遍历的都是计算生成的数据结构

let arr = ['a', 'b', 'c'];
for (let pair of arr.entries()) {
  console.log(pair);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']

Object.entries()

方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环还会枚举原型链中的属性)。

const object1 = {
  a: 'somestring',
  b: 42
};
for (const [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}
// "a: somestring"
// "b: 42"


for (const item of Object.entries(object1)) {
  console.log(item);
}
> Array ["a", "somestring"]
> Array ["b", 42]


const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

 

4、类似数组的对象

类似数组的对象包括好几类。for...of 循环用于字符串、DOM NodeList 对象、arguments 对象

// 字符串
let str = "hello";
for (let s of str) {
  console.log(s); // h e l l o
}

// DOM NodeList对象
let paras = document.querySelectorAll("p");
for (let p of paras) {
  p.classList.add("test");
}

// arguments对象
function printArgs() {
  for (let x of arguments) {
    console.log(x);
  }
}
printArgs('a', 'b');
// 'a'
// 'b'

 注意:并不是所有类似数组的对象(存在数值键名和length属性)都具有 Iterator 接口

// 这是一个类似数组的对象,但是它没有 Iterator 接口
let arrayLike = { length: 2, 0: 'a', 1: 'b' };

但是可以对这些类似数组的对象部署 Iterator 接口,有一个简便方法,就是 Symbol.iterator 方法直接引用数组的 Iterator 接口

NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
// 或者
NodeList.prototype[Symbol.iterator] = [][Symbol.iterator];

NodeList 对象是类似数组的对象,本来就具有遍历接口,可以直接遍历。上面代码中,我们将它的遍历接口改成数组的Symbol.iterator属性,没有任何影响。 

类似数组的对象调用数组的 Symbol.iterator 方法

let iterable = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3,
  [Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {
  console.log(item); // 'a', 'b', 'c'
}

注意,普通对象部署数组的 Symbol.iterator 方法,无效

let iterable = {
  a: 'a',
  b: 'b',
  c: 'c',
  length: 3,
  [Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (let item of iterable) {
  console.log(item); // undefined, undefined, undefined
}

5、对于普通的对象,for…of 结构不能直接使用


对于普通的对象,for…of 结构不能直接使用,会报错,必须部署了 Iterator 接口后才能使用。

对象(Object)之所以没有默认部署 Iterator 接口,是因为对象的哪个属性先遍历,哪个属性后遍历是不确定的,需要开发者手动指定。本质上,遍历器是一种线性处理。

let obj = {
  name: 'webchang',
  age: 18
}

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

 一个对象如果要具备可被 for…of循环调用的 Iterator 接口,就必须在Symbol.iterator 的属性上部署遍历器生成方法(原型链上的对象具有该方法也可)。

class RangeIterator {
  constructor(start, end) {
    this.value = start;
    this.stop = end;
  }

  [Symbol.iterator]() {
    return this;
  }

  next() {
    let value = this.value;
    if (value < this.stop) {
      this.value++;
      return {value: this.value, done: false};
    }

    return {value: undefined, done: true}
  }
}

let range = new RangeIterator(0,3);
for (let item of range) {
  console.log(item);
}
console.log(range);

为对象添加 Iterator 接口

let obj = {
  data: ['web', 'chang'],
  [Symbol.iterator]: function () {
    let self = this;
    let index = 0;
    return {
      next: function () {
        if (index < self.data.length) {
          return {value: self.data[index++], done: false}
        }
        return {value: undefined, done: true}
      }
    }
  }
}
for (let item of obj) {
  console.log(item); // "web" "chang"
}

 案例:

// 想要通过 for of 循环直接遍历出 price 对象中 a、b、c 三个属性对应数组的最小值
let price = {
  a: [1, 2, 3],
  b: [6, 5, 4],
  c: [8, 7, 9],
  [Symbol.iterator]() {

    let arr = []
    for (let [key, value] of Object.entries(this)) {
      arr.push(Math.min(...value));
    }

    let index = 0;

    return {
      next() {
        if (index < arr.length) {
          return {value: arr[index++], done: false}
        }
        return {value: undefined, done: true}
      }
    }
  }
}

for (let item of price) {
  console.log(item); // 1 4 7
}

6、与其他遍历语法的比较 

(1)以数组为例,最原始的写法就是for循环。

for (var index = 0; index < myArray.length; index++) {
  console.log(myArray[index]);
}

(2)数组提供内置的forEach方法 

无法中途跳出forEach循环,break命令或return命令都不能奏效

myArray.forEach(function (value) {
  console.log(value);
});

(3)for...in 循环可以遍历数组的键名 

for (var index in myArray) {
  console.log(myArray[index]);
}

for...in 缺点:

数组的键名是数字,但是 for...in 循环是以字符串作为键名的,“0”、“1”、“2”等等
for...in 循环不仅遍历数字键名,还会遍历手动添加的其他键,甚至包括原型链上的键。

for...in 循环主要是为遍历对象而设计的,不适用于遍历数组。

for...of优点:

  • 有着同for…in一样的简洁语法,但是没有for…in那些缺点。
  • 不同于forEach方法,它可以与break、continue和return配合使用。
  • 提供了遍历所有数据结构的统一操作接口。

for  ....in 和for  ....of  的区别

for…in:是为遍历对象属性而构建的,它以任意顺序遍历一个对象的除Symbol以外的可枚举属性,可用break或者throw跳出

let obj = {
  name: '张三',
  age: 18
}

for(let item in obj) {
  console.log(item)
}
// 输出 name age

数组也是对象的一种,所以数组也是可以使用for...in遍历

let arr = ['a', 'b', 'c']

for(let item in arr) {
  console.log(item)
}

> "0"
> "1"
> "2"

for…of 在可迭代对象上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句(包括ArrayMapSetStringTypedArrayarguments等等,不包括Object),可用break或者throw跳出。

let arr = ['a', 'b', 'c']

let obj = {
  name: '张三',
  age: 18,
  sex: '男'
}

for (let i of arr) {
  console.log(i)
}// 输出 a b c

for (let i of obj) {
  console.log(i)
}// 报错 obj is not iterable (obj不是可迭代的)

区别: 

都是迭代一些东西,主要区别在迭代方式

  • for...in语句以任意顺序迭代对象的可枚举属性

  • for...of语句遍历可迭代对象定义要迭代的数据

    let arr = ['a', 'b', 'c']
    Array.prototype.ufo = '张三'
    
    for(let item in arr) {
      console.log(item)
    }// 输出 0 1 2 ufo
    
    for(let item of arr) {
      console.log(item)
    }// 输出 a b c
    

    Array.prototype添加了ufo属性,由于继承和原型链,所以arr也继承了ufo属性,属于可枚举属性,所以for...in会遍历出来,而for...of则不会

 

https://blog.csdn.net/weixin_43974265/article/details/113483241   https://blog.csdn.net/pdd11997110103/article/details/119676477

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在C++中,`std::vector<std::wstring>::iterator` 是一个随机访问迭代。它的主要功能是遍历和操作 `std::vector<std::wstring>` 容中的元素。 以下是获取迭代位置的方法: 1. **迭代的基本操作** - **初始化**:迭代通常通过调用容的 `begin()` 或 `end()` 函数来初始化,例如 `auto it = vec.begin();`。 - **递增/递减**:可以使用 `++` 或 `--` 运算符来移动迭代到下一个或上一个元素。 - **比较**:可以使用 `==` 或 `!=` 运算符来比较两个迭代是否相等或不相等。 2. **获取迭代的位置** - **距离计算**:使用 `std::distance` 函数可以计算两个迭代之间的距离,这可以用来确定迭代的当前位置。 - **索引访问**:由于 `std::vector<std::wstring>::iterator` 是随机访问迭代,因此可以直接使用下标操作符 `[]` 来访问指定位置的元素。 3. **迭代的特性** - **随机访问能力**:这种类型的迭代提供了随机访问的能力,可以在任何位置进行快速的插入和删除操作。 - **元素读写**:迭代不仅可以用来读取元素,还可以用来修改元素的值。 4. **与指针的关系** - **相似性**:迭代在很多方面都类似于指针,它可以指向容中的一个位置。 - **差异性**:与普通指针不同,迭代是一个更抽象的概念,它封装了容的内部结构。 此外,在使用 `std::vector<std::wstring>::iterator` 时,需要注意以下几点: - **异常安全**:在进行插入或删除操作时,需要确保代码的异常安全性,避免在异常发生时造成数据不一致。 - **边界检查**:在使用迭代访问元素时,需要进行边界检查,确保不会访问超出容范围的元素。 - **性能考虑**:虽然 `std::vector<std::wstring>::iterator` 提供了随机访问的能力,但在进行大量的插入和删除操作时,可能会导致性能下降。 综上所述,`std::vector<std::wstring>::iterator` 提供了一种方便、灵活的方式来遍历和操作 `std::vector<std::wstring>` 容中的元素。通过使用迭代,可以在不暴露容内部实现细节的情况下,对容中的元素进行高效的访问和修改。在实际编程中,合理地使用迭代可以大大提高代码的效率和可读性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值