So verwenden Sie den ES6-Iterator (Iterator) und die for.of-Schleife-js-Tutorial-php.cn

Dieser Artikel führt Sie hauptsächlich in die Lernzusammenfassung des ES6-Iterators (Iterator) und der Verwendung der for.of-Schleife ein. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. Was ist ein Iterator?

Das Konzept der Generatoren ist in Java, Python und anderen Sprachen verfügbar, und ES6 wurde auch zu JavaScript hinzugefügt. Mit Iterator können wir die Notwendigkeit vermeiden, die Sammlungs- und Indexvariablen zu initialisieren. Stattdessen verwenden wir die nächste Methode des Iteratorobjekts, um den Wert des nächsten Elements in der Sammlung zurückzugeben, was auf die Programmierung ausgerichtet ist.

Iteratoren sind Objekte mit einer speziellen Schnittstelle. Enthält eine next()-Methode, und der Aufruf gibt ein Objekt zurück, das zwei Attribute enthält, nämlich value und done. Wert stellt den Wert der aktuellen Position dar, und done stellt dar, ob die Iteration abgeschlossen ist. Wenn es wahr ist, ist der Aufruf von next ungültig.

Das Durchlaufen von Sammlungen in ES5 verwendet normalerweise eine for-Schleife. Arrays verfügen auch über eine forEach-Methode, und in ES6 wurden Objekte „for-in“ hinzugefügt, und Iteratoren können alle Sammlungsdaten auf einheitliche Weise verarbeiten. Iterator ist eine Schnittstelle. Solange Ihre Datenstruktur eine Iteratorschnittstelle bereitstellt, kann die Iteration abgeschlossen werden. ES6 hat einen neuen Durchlaufbefehl für die Schleife „for...of“ erstellt, und die Iterator-Schnittstelle wird hauptsächlich für die Verwendung durch „for…of“ verwendet.

2. Wie verwende ich Iteratoren?

1. Standard-Iterator-Schnittstelle

Solange die Iterator-Schnittstelle in der Datenstruktur bereitgestellt wird, nennen wir diese Datenstruktur „Iterable“. ES6 legt fest, dass die Standard-Iterator-Schnittstelle in der Symbol.iterator-Eigenschaft der Datenstruktur bereitgestellt wird. Mit anderen Worten: Solange eine Datenstruktur Symbol.iterator-Daten enthält, kann sie als „durchlaufbar“ (iterierbar) betrachtet werden.

Native Datenstruktur, die von for...of

Array
Map
Set
String
TypedArray (ein generischer Puffertyp mit fester Länge, der das Lesen von Binärdaten aus dem Puffer ermöglicht )
Das Argumentobjekt in der Funktion
NodeList-Objekt

ist oben zu sehen ist kein Objekt (Object) in der nativen Datenstruktur. Warum?

Das liegt daran, dass die Reihenfolge der Durchquerung von Objekteigenschaften unsicher ist und vom Entwickler manuell angegeben werden muss. Im Wesentlichen ist der Traverser ein linearer Prozess. Für jede nichtlineare Datenstruktur entspricht die Bereitstellung der Traverser-Schnittstelle der Bereitstellung einer linearen Transformation.

Führen Sie die folgende Verarbeitung aus, um das Objekt für den Verbrauch verfügbar zu machen bis:

// code1
function Obj(value) {
  this.value = value;
  this.next = null;
}
Obj.prototype[Symbol.iterator] = function() {
  var iterator = {
    next: next
  };
  var current = this;
  function next() {
    if (current) {
      var value = current.value;
      current = current.next;
      return {
        done: false,
        value: value
      };
    } else {
      return {
        done: true
      };
    }
  }
  return iterator;
}
var one = new Obj(1);
var two = new Obj(2);
var three = new Obj(3);
one.next = two;
two.next = three;
for (var i of one) {
  console.log(i);
}
// 1
// 2
// 3

Nach dem Login kopieren

2. Wenn die Iterator-Schnittstelle aufgerufen wird

(1) Dekonstruktionszuweisung

// code2
let set = new Set().add('a').add('b').add('c');
let [x,y] = set;
// x='a'; y='b'
let [first, ...rest] = set;
// first='a'; rest=['b','c'];

Nach dem Login kopieren

(2) Erweiterungsoperator

// code3
// 例一
var str = 'hello';
[...str] // ['h','e','l','l','o']
// 例二
let arr = ['b', 'c'];
['a', ...arr, 'd']
// ['a', 'b', 'c', 'd']

Nach dem Login kopieren

(3) Yield*-Ausdruck in der Generatorfunktion (im nächsten Kapitel vorgestellt)

// code4
let generator = function* () {
yield 1;
yield* [2,3,4];
yield 5;
};
var iterator = generator();
iterator.next() // { value: 1, done: false }
iterator.next() // { value: 2, done: false }
iterator.next() // { value: 3, done: false }
iterator.next() // { value: 4, done: false }
iterator.next() // { value: 5, done: false }
iterator.next() // { value: undefined, done: true }

Nach dem Login kopieren

(4) Andere Anlässe

für..von
Array.von
Map (), Set(), WeakMap(), WeakSet()
Promise.all()
Promise.race( )

3. Vorteile der for...of-Schleife

Sehen wir uns zunächst die Nachteile der Array-forEach-Methode an:

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

Nach dem Login kopieren

Das Problem bei dieser Schreibmethode besteht darin, dass sie nicht mittendrin aus der forEach-Schleife ausbrechen kann und weder der Break-Befehl noch der Return-Befehl wirksam werden.

Schauen Sie sich noch einmal an, die Mängel des Objekts for...in-Schleife:

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

Nach dem Login kopieren

Der Schlüsselname des Arrays ist eine Zahl, aber der for. ..in der Schleife werden Zeichenfolgen als Schlüsselnamen verwendet, „0“, „1“, „2“ usw. Die
for...in-Schleife kann nicht nur numerische Schlüsselnamen durchlaufen, sondern auch manuell hinzugefügte Punktempfehlungen, sogar Schlüssel in der Prototypenkette.
In einigen Fällen durchläuft die for...in-Schleifensitzung Schlüsselnamen in beliebiger Reihenfolge
for...in-Durchquerung erfolgt hauptsächlich for Entwickelt für das Durchqueren von Objekten, ist es nicht zum Durchqueren von Arrays geeignet

Was sind also die wesentlichen Vorteile von for...of?

hat die gleiche prägnante Syntax wie for...in, weist aber nicht die Nachteile von for...in auf
Anders als die forEach-Methode. Sie kann mit break, continue und return verwendet werden
Bietet eine einheitliche Operationsschnittstelle zum Durchlaufen aller Datenstrukturen

for (var n of fibonacci) {
 if (n > 1000) {
  break;
  console.log(n);
 }
}

Nach dem Login kopieren

4. Wie verwende ich eine for...of-Schleife für Datentypen?

(1) Array

for...of-Schleife ermöglicht das Durchlaufen des Arrays, um Schlüsselwerte zu erhalten

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

Nach dem Login kopieren

for...of-Schleife Ruft die Traverser-Schnittstelle auf, die Array-Traverser-Schnittstelle gibt nur Werte mit numerischen Indizes zurück

let arr = [3, 5, 7];
arr.foo = 'hello';
for (let i in arr) {
  console.log(i); // "0", "1", "2", "foo"
}
for (let i of arr) {
  console.log(i); // "3", "5", "7"
}

Nach dem Login kopieren

(2) Map- und Set-Strukturen

var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]);
for (var e of engines) {
  console.log(e);
}
// Gecko
// Trident
// Webkit
var es6 = new Map();
es6.set("edition", 6);
es6.set("committee", "TC39");
es6.set("standard", "ECMA-262");
for (var [name, value] of es6) {
  console.log(name + ": " + value);
}
// edition: 6
// committee: TC39
// standard: ECMA-262

Nach dem Login kopieren

Wie aus ersichtlich ist Der obige Code for ...of durchläuft die Map- und Set-Strukturen in der Reihenfolge, in der jedes Mitglied zur Datenstruktur hinzugefügt wird. Beim Durchlaufen der Set-Struktur wird ein Wert zurückgegeben, während beim Durchlaufen der Map-Struktur ein Wert zurückgegeben wird. Es wird ein Array zurückgegeben. Die beiden Mitglieder sind der Schlüsselname und der Schlüsselwert des aktuellen Map-Mitglieds.

(3) Array-ähnliches Objekt

String

// 普通的字符串遍历
let str = "yuan";
for (let s of str) {
 console.log(s); // y u a n
}

// 遍历含有 32位 utf-16字符的字符串
for (let x of 'a\uD83D\uDC0A') {
 console.log(x);
}
// 'a'
// '\uD83D\uDC0A'

Nach dem Login kopieren

DOM NodeList-Objekt

let paras = document.querySelectorAll("p");
for (let p of paras) {
 p.classList.add("test");
}

Nach dem Login kopieren

Argumentobjekt

function printArgs() {
 for (let x of arguments) {
  console.log(x);
 }
}
printArgs("a", "n");
// "a"
// "n"

Nach dem Login kopieren

Traversal-Verarbeitung von Array-Objekten ohne Iterator-Schnittstellenklasse

Array.from-Methode zur Verarbeitung ausleihen

let arrayLike = {
  length: 2,
  0 : 'a',
  1 : 'b'
};
// 报错
for (let x of arrayLike) {
  console.log(x);
}
// 正确
for (let x of Array.from(arrayLike)) {
  console.log(x);
}

Nach dem Login kopieren

(4 ) Objekt

Bei gewöhnlichen Objekten können Sie for...of nicht direkt zum Durchlaufen verwenden. Andernfalls wird ein Fehler gemeldet und die Iterator-Schnittstelle muss bereitgestellt werden, bevor sie verwendet werden kann. Stellen Sie es mit den folgenden zwei Methoden bereit:

// 方法一：使用 Object.keys 方法讲对象的键名生成一个数组
for (var key of Object.keys(someObject)) {
 console.log(key + ": " + someObject[key]);
}

// 方法二：使用Generator 函数将对象重新包装一下
function * entries(obj) {
  for (let key of Object.keys(obj)) {
    yield[key, obj[key]];
  }
}
for (let[key, value] of entries(obj)) {
  console.log(key, "->", value);
}
// a -> 1
// b -> 2
// c -> 3

Nach dem Login kopieren

3. Iterator-Anwendungsbeispiele

1、斐波那契数列

下面我们就使用迭代器来自定义自己的一个斐波那契数列组，我们直到斐波那契数列有两个运行前提，第一个前提是初始化的前两个数字为0，1,第二个前提是将来的每一个值都是前两个值的和。这样我们的目标就是每次都迭代输出一个新的值。

var it = { [Symbol.iterator]() {
    return this
  },
  n1: 0,
  n2: 1,
  next() {
    let temp1 = this.n1,
    temp2 = this.n2;
    [this.n1, this.n2] = [temp2, temp1 + temp2]
    return {
      value: temp1,
      done: false
    }
  }
}

for (var i = 0; i < 20; i++) {
  console.log(it.next())
}

// 
  "value": 0,
  "done": false
} {
  "value": 1,
  "done": false
} {
  "value": 1,
  "done": false
} {
  "value": 2,
  "done": false
} {
  "value": 3,
  "done": false
} {
  "value": 5,
  "done": false
}... {
  "value": 2584,
  "done": false
} {
  "value": 4181,
  "done": false
}

Nach dem Login kopieren

2、任务队列迭代器

我们可以定义一个任务队列，该队列初始化时为空，我们将待处理的任务传递后，传入数据进行处理。这样第一次传递的数据只会被任务１处理，第二次传递的只会被任务２处理… 代码如下：

var Task = {
  actions: [],
  [Symbol.iterator]() {
    var steps = this.actions.slice();
    return { [Symbol.iterator]() {
        return this;
      },
      next(...args) {
        if (steps.length > 0) {
          let res = steps.shift()(...args);
          return {
            value: res,
            done: false
          }
        } else {
          return {
            done: true
          }
        }
      }
    }
  }
}

Task.actions.push(function task1(...args) {
  console.log("任务一：相乘") return args.reduce(function(x, y) {
    return x * y
  })
},
function task2(...args) {
  console.log("任务二：相加") return args.reduce(function(x, y) {
    return x + y
  }) * 2
},
function task3(...args) {
  console.log("任务三：相减") return args.reduce(function(x, y) {
    return x - y
  })
});

var it = Task[Symbol.iterator]();
console.log(it.next(10, 100, 2));
console.log(it.next(20, 50, 100)) console.log(it.next(10, 2, 1))
 // 
任务一：相乘 {
  "value": 2000,
  "done": false
}任务二：相加 {
  "value": 340,
  "done": false
}任务三：相减 {
  "value": 7,
  "done": false
}

Nach dem Login kopieren

3、延迟执行

假设我们有一个数据表，我们想按大小顺序依次的获取数据，但是我们又不想提前给他排序，有可能我们根本就不去使用它，所以我们可以在第一次使用的时候再排序，做到延迟执行代码：

var table = {
  "d": 1,
  "b": 4,
  "c": 12,
  "a": 12
}
table[Symbol.iterator] = function() {
  var _this = this;
  var keys = null;
  var index = 0;

  return {
    next: function() {
      if (keys === null) {
        keys = Object.keys(_this).sort();
      }

      return {
        value: keys[index],
        done: index++>keys.length
      };
    }
  }
}

for (var a of table) {
  console.log(a)
} 
// a b c d

Nach dem Login kopieren

四、结语

本章内容，重点是明白 Iterator 接口的机制，以及 for...of 循环的使用方法。