ES6-Iteratoren und for.of-Schleifen (ausführliches Tutorial)

In diesem Artikel wird hauptsächlich die Lernzusammenfassung des ES6-Iterators (Iterator) und der Verwendung der for.of-Schleife vorgestellt. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.

1. Was ist ein Iterator?

Das Generatorkonzept 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

Datenstruktur Solange die Iterator-Schnittstelle bereitgestellt wird, machen wir diese Datenstruktur „durchquerbar“ ( Iterierbar). 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

1. Array

2. Map

3. Set

4. String

5. TypedArray (ein generischer Puffertyp mit fester Länge, der das Lesen von Binärdaten aus dem Puffer ermöglicht )

6. Das Argumentobjekt in der Funktion

7. 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.

kann wie folgt verarbeitet werden, um das Objekt für den Verbrauch verfügbar zu machen von:

// 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

2 Wenn die Iterator-Schnittstelle aufgerufen wird

(1) Destrukturierungszuweisung

// 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'];

(2) Erweiterungsoperator

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

(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 }

(4) Andere Gelegenheit

1. für..von

2. Array.von

3. Karte( ), Set( ), WeakMap(), WeakSet()

4. Promise.all()

5. Promise.race()

3. Vorteile der for...of-Schleife

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

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

Das Problem bei dieser Schreibmethode besteht darin, dass es unmöglich ist, mittendrin aus der forEach-Schleife auszubrechen, 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]);
};

1. Der Schlüsselname des Arrays ist eine Zahl, aber der for... in-Schleife basiert auf Strings als Schlüsselnamen, „0“, „1“, „2“ usw. Die

2. for...in-Schleife kann nicht nur numerische Schlüsselnamen durchlaufen, sondern auch manuell hinzugefügte Punktempfehlungen, sogar Schlüssel in der Prototypenkette.

3. In einigen Fällen durchläuft die for...in-Schleifensitzung Schlüsselnamen in beliebiger Reihenfolge

4. 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?

1. hat die gleiche prägnante Syntax wie for...in, weist aber nicht die Nachteile von for...in auf

2. Anders als die forEach-Methode. Sie kann mit break, continue und return verwendet werden

3. Bietet eine einheitliche Operationsschnittstelle zum Durchlaufen aller Datenstrukturen

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

4. Wie verwende ich die for...of-Schleife für jeden Datentyp?

(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
}

for...of-Schleifenaufrufe Traverser-Schnittstelle, Array Die 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"
}

(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

Wie aus dem obigen Code ersichtlich ist, for...of Schleifen durch Map und Set Beim Durchlaufen einer Struktur basiert die Durchlaufreihenfolge auf der Reihenfolge, in der jedes Element 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 ein Array. Die beiden Mitglieder des Arrays sind die aktuellen Map-Mitglieder. Der Schlüsselname und der Schlüsselwert.

(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'

DOM NodeList-Objekt

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

Argumente-Objekt

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

Keine Iterator-Schnittstellenklasse Array-Objekt-Traversal-Verarbeitung

leiht sich die Array.from-Methode aus, um

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);
}

(4) Objekt

zu verarbeiten. Für gewöhnliche Objekte kann for...of Traversal nicht direkt verwendet werden. Andernfalls wird ein Fehler gemeldet. Die Iterator-Schnittstelle muss bereitgestellt werden, bevor sie verwendet werden kann. Stellen Sie es auf zwei Arten 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

三、迭代器应用实例

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
}

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
}

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vue中如何实现微信分享朋友圈,发送朋友

详解如何实现vuex（详细教程）

通过vue.js实现微信支付

Das obige ist der detaillierte Inhalt vonES6-Iteratoren und for.of-Schleifen (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!