[ES6-Wissen] Iterator und Klasse

1. Iterator

1.1 Überblick über das Grundwissen

Iterator ist eine Schnittstelle, die einen einheitlichen Zugriffsmechanismus für verschiedene Datenstrukturen bietet. Jede Datenstruktur kann den Durchlaufvorgang abschließen, solange sie die Iterator-Schnittstelle bereitstellt.

ES6 hat einen neuen Durchlaufbefehl erstellt: die for...of-Schleife. Der Iterator wird hauptsächlich von for...of verwendet.

Natives JavaScriptScipt-Fallsammlung
JavaScript + DOM-Grundkenntnisse
JavaScript-Basis bis fortgeschrittene
Canvas-Spieleentwicklung

Die Datenstruktur der Iterator-Schnittstelle wird nativ bereitgestellt:

• Array-Array
• TypedArray typisiertes Array (ein Array-Typ, der den Elementtyp angibt, nicht den tatsächlichen Array-Typ. Die erstellte Instanz erstellt einen Array-Puffer im Speicher)
• String-String
• Argumentparameterobjekt (aktueller Parameter).
• NodeList-Knotenliste
• Datenstruktur festlegen
• Kartendatenstruktur

var arr = [1,2,3,4];
let iterator = arr[Symbol.iterator]();
 
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: undefined, done: true }

1.2 Funktionsprinzip

1. Erstellen Sie ein Zeigerobjekt, das auf die Startposition der aktuellen Datenstruktur zeigt
2. Beim ersten Aufruf der nächsten Methode des Objekts zeigt der Zeiger automatisch auf das erste Mitglied der Datenstruktur.
3. Als nächstes wird die nächste Methode kontinuierlich aufgerufen und der Zeiger bewegt sich zurück, bis er auf das letzte Mitglied zeigt.
4. Bei jedem Aufruf der nächsten Methode wird ein Objekt zurückgegeben, das die Eigenschaften „value“ und „done“ enthält.

let obj = {
    name:"张三",
    age:18,
    arr:[1,2,3,4,"壹","贰","叁","肆"]
}

Jetzt möchte ich die Daten des arr-Arrays im obj-Objekt abrufen. Da Object über keinen integrierten Iterator verfügt, meldet die Konsole einen Fehler, wenn for...of zum Durchlaufen verwendet wird.

let obj = {
    name:"张三",
    age:18,
    arr:[1,2,3,4,"壹","贰","叁","肆"]
}
for(value of obj){
    console.log(value)
}
//Uncaught TypeError: obj is not iterable

Was den Grund angeht, warum das Objekt keine Iteratorschnittstelle hat, frage ich mich, ob Sie den Film „Arrival“ gesehen haben, der auf „The Story of Your Life“ basiert. Die außerirdische Sprache im Film ist eine nichtlineare Sprache. Die Mitglieder der Arrays, Karten und anderen Strukturen, über die wir sprechen, sind alle in der richtigen Reihenfolge, das heißt, sie sind alle lineare Strukturen. Die Mitglieder der Objekte haben jedoch keine bestimmte Reihenfolge, sodass nicht sicher ist, wer zuerst durchlaufen werden soll und wer während der Durchquerung durchlaufen werden soll. Daher ist die Bereitstellung der Iteratorschnittstelle für ein Objekt tatsächlich eine lineare Transformation des Objekts. Wenn Sie diesen Bedarf haben, müssen Sie die Iteratorschnittstelle manuell für Ihr Objekt bereitstellen. wie folgt:

let obj = {
    name:"张三",
    age:18,
    arr:[1,2,3,4,"壹","贰","叁","肆"],
    [Symbol.iterator](){
        let index =0
        let _this = this
          return {
             next:function(){
                 if(index < _this.arr.length){
                      return { value:_this.arr[index++], done:false}      
                 }else{
                    return {value:undefined,done:true}
                 }
          	}
        }
    }
}
for(value of obj){
  console.log(value)
}
//1 2 3 4 "壹" "贰" "叁" "肆"

Wie Sie sehen können, gibt Symbol .iterator ein Objekt zurück, bei dem es sich um ein Traverser-Objekt handelt. Als Traverser-Objekt besteht seine unverzichtbare Eigenschaft darin, dass es über die Methode next() verfügen muss.

1.3 Symbol.iterator

Dieses Symbol kann ein spezielles Attribut für jedes Objekt sein. Der Sprachmechanismus findet automatisch eine Methode für dieses Attribut. Diese Methode erstellt einen Iterator, um den Wert dieses Objekts zu iterieren. Diese Methode ist die nächste Methode, ... Erweitern und für / Die of-Schleife verwendet es automatisch. **Wir können die Eigenschaft Symbol.iterator anpassen, um unsere eigene Iteratorlogik für jeden Objektwert zu definieren, die den Standarditerator überschreibt. **Es entspricht der Definition eines Metaprogrammierungsverhaltens, das anderen Teilen von Javascript (Operatoren und Schleifenstrukturen) zur Verwendung bei der Verarbeitung der definierten Objekte bereitgestellt wird.

• In JS implementiert das Iteratorobjekt das iterierbare Protokoll und das Iteratorobjekt wird durch den Wert der Eigenschaft Symbol.iterator zurückgegeben.
• Der Wert der Eigenschaft Symbol.iterator ist eine Funktion, die ein Iteratorobjekt zurückgibt.
• Ein Iterator verweist mit einer nächsten Methode auf ein Objekt.
• Die nächste Methode muss ein Objekt mit Wert zurückgeben und ist fertig.

1.4 Generatorfunktion zur Implementierung der Symbol.iterator-Schnittstelle

var yieldIterator = {};
yieldIterator[Symbol.iterator] = function* () {
    yield 1;
    yield 2;
    yield 3;
};
 
[...yieldIterator] // [1, 2, 3]

Beachten Sie, dass yield* eine traversierbare Struktur folgt, die die Traverser-Schnittstelle der Struktur aufruft.

Andere Operationen, die Traverser aufrufen, umfassen Destrukturierungszuweisungen, den Spread-Operator und alles andere, das ein Array als Parameter akzeptiert.

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

Sobald Sie die Iterator-Schnittstelle für Ihre Struktur bereitgestellt haben, können Sie for...of verwenden, um Ihre Struktur zu durchlaufen!

2. ES6-Klasse

2.1 Übersicht

Vor ES6 waren Klassen und Konstruktoren dasselbe und die aufgerufenen Funktionen mussten eingebunden werden (definiert durch den Prototyp des Konstruktoraufrufs). Dies ist für objektorientierte Sprachen sehr unfreundlich, daher bietet ES6 das Konzept von Klassen.

• Unterscheiden Sie zwischen Klassenklasse und Konstruktorkonstruktor
• Definieren Sie Methoden (Prototypmethoden, statische Methoden, Instanzmethoden) direkt in der Klassenklasse

class People {
    // 静态方法
    static sayHello(){
        return "Hello ES6继承！！";
    }

    // 通过 constructor 定义类的构造函数
    constructor(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;

        // 实例方法
        this.sayHi = function(){
            return "你好"
        }
    }

    // 原型方法，不需要 function 声明
    eat() {
        return "是人就得喝水...";
    }
}

// 通过 new 关键子定义一个类的对象
var p = new People("汉武帝", 1000, '男');

2.2 Vererbung in ES6

• erweitert das Schlüsselwort für die Vererbung
• super wird verwendet, um den Konstruktor in der übergeordneten Klasse (Superklasse, Basisklasse) auszuführen.

// 通过关键字 class 定义基类
class People {
    // 静态方法
    static sayHello(){
        return "Hello ES6继承！！";
    }

    // 通过 constructor 定义类的构造函数
    constructor(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;

        // 实例方法
        this.sayHi = function(){
            return "你好"
        }
    }

    // 原型方法，不需要 function 声明
    eat() {
        return "是人就得喝水...";
    }
}


class Doctor extends People {
    constructor(name, age, sex, clothes) {
        super(name, age, sex);

        this.clothes = clothes;
    }

    behavior() {
        return "救死扶伤";
    }
}

// 通过 new 关键子定义一个类的对象
var p = new People("汉武帝", 1000, '男');
var d = new Doctor("李时珍", 700, '男', '白大褂');

2.3 Objektorientierte Anwendungsreaktion

• Komponentisierung - Klasse

• JSX (JS-erweiterte Version) == babel == browser.js

• Laden Sie „react.js“, „react-dom.js“ und „browser.js“ herunter und führen Sie sie in das Projekt ein

• script-Tag-Typ type = „text/babel“ und kann nicht weggelassen werden

HTML Quelltext:

<div id="div1"></div>

JS-Code:

<script src="./libs/react.js"></script>
<script src="./libs/react-dom.js"></script>
<script src="./libs/browser.js"></script>
<script type="text/babel">
	// 自定义组件
	class Item extends React.Component{
		constructor(...args){
			super(...args)
		}
		
		render(){
			// 返回固定的值
			// return <li>123</li>
			// 返回通过属性动态传递的值
			return <li>{this.props.str}</li>
		}
	}
	
	class List extends React.Component{
		constructor(...args){
			super(...args)
		}
		
		render(){
		  	/*
		  	let aItems = [];
			for(let i = 0; i < this.props.arr.length; i++){
				aItems.push(<Item str={this.props.arr[i]}></Item>)
			}
			return <ul>
				// 数组映射
				{aItems}
			</ul>
			*/
			
			// map 优化
			let aItems = this.props.arr.map(a => <Item str={a}></Item>);
			/*			
			return <ul>
				{this.props.arr.map(a => <Item str={a}></Item>)}
			</ul>
			*/
			return <ul>
				{aItems}
			</ul>
		}
	}
	
	window.onload = function(){
		let oDiv = document.getElementById('div1');
		
		ReactDOM.render(
			// 常规标签渲染
			// <span>123</span>,
			// 自定义组件渲染
			<List arr="{['abc','def',ghi]}"></List>,
			oDiv
		)
	}
</script>