Web-Frontend
js-Tutorial
Neue Funktionen von ES6 – detaillierte Code-Einführung in Datenstrukturen vom Typ Set und WeakSet in JavaScript
Neue Funktionen von ES6 – detaillierte Code-Einführung in Datenstrukturen vom Typ Set und WeakSet in JavaScript
ES6 stellt eine neue Datenstruktur Set bereit. Das Set-Objekt ist kein Array und kann zum Speichern von Objekten oder Grundtypen aller gespeicherten Werte verwendet werden sind Die einzigen , Chrome-Browser>38 und FF>13 sowie nodeJS, die Set gut unterstützen. Einige der folgenden Codes können auf die Konsole kopiert werden und direkt ausführen;
Die grundlegende Methode zum Erstellen einer Set-Instanz ist:
let set = new Set(); //或者 new Set(null); console.log(set);
oder so:
let set = new Set([1,2,3,4,4,4,4,4]); console.log( Array.from(set) ); //输出：[ 1, 2, 3, 4 ]
Wie Sie sehen können, wiederholt sich das oben Gesagte 4 ist in setEs wird nur eines darin gespeichert, daher kann das Set-Objekt zum Deduplizieren des Arrays verwendet werden;
Set kann auch zum Speichern von NaN und verwendet werden undefiniert. Wenn es doppelte NaNs gibt, betrachtet Set sie als NaN (eigentlich NaN!=NaN);
Das Objekt nach dem Instanz-Set hat diese Eigenschaften und Methoden :
Eigenschaften
Set.prototype
Set.prototype.size
Methoden
Set.prototype.add()
Set.prototype.clear()
Set.prototype.delete()
Set.prototype.entries()
Set.prototype.forEach( )
Set.prototype.has()
Set.prototype.values()
Set.prototype[@@iterator]()
SetTatsächlich Wir können Arrays direkt für diese Art von Datenstruktur verwenden. Das simulierte kann zwar nicht mit dem Original verglichen werden, es kann jedoch nur einige der Methoden und simulieren Attribute in der obigen Liste (es gibt auch einige Funktionen, die nicht realisiert werden können, z. B. [Symbol. species] zeigt auf sich selbst, aber so etwas wie [Symbol.species] gibt es in Chrome nicht ...)
Verwenden Sie ein Array, um einen Set-Konstruktor zu simulieren:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
"use strict";
class Set {
//对_set进行去重;
static refresh () {
let _this = this;
let __set = []
this._set.forEach(function(obj) {
if( __set.indexOf(obj) === -1 && obj!=undefined) {
__set.push(obj);
}
});
_this._set =__set;
this.size = _this._set.length;
}
constructor(arg) {
this.size = 0;
this[Symbol.species] = this;
this._set = Array.isArray(arg)&&arg||[];
Set.refresh.call(this)
}
add (obj) {
this._set.push(obj);
Set.refresh.call(this)
return this;
}
clear () {
this._set.length = 0;
return this;
}
delete (obj) {
if( this._set.indexOf(obj)!=-1 ) {
this._set[this._set.indexOf(obj)] = undefined;
};
Set.refresh.call(this);
return this;
}
/**
* @desc
* @return Entries [[],[],[],[]]
* */
entries () {
let result = [];
this.forEach(function(key, value) {
result.push([key,value]);
});
return result;
}
has () {
if( this._set.indexOf(obj)!=-1 ) return true;
}
keys () {
return this[Symbol.iterator]();
}
values () {
return this[Symbol.iterator]();
}
//直接使用数组的forEach方便啊;
forEach (fn, context) {
let _this = this;
this._set.forEach((value) => fn.call(context||value, value, value, _this) );
}
//必须支持生成器的写法;
*[Symbol.iterator] (){
let index = 0;
let val = undefined;
while(index<this.size) {
val = this._set[index];
yield val;
index++;
}
}
}
var set = new Set([0,0]);
//对Set进行基本的操作;
set.add(1).add(2).add(3).add({1:1})
set.delete(1);
set.add(1);
//使用Set的forEach方法;
set.forEach(function(key,value,s){console.log(key,value,s,"this")},{this:"this"})
//检测生成器是否正常运行;
for(let s of set) {
console.log(s)
}
//因为这个对象有Symbol.iterator， 所以使用扩展符也是好使的；
console.log([...set]);
</script>
</body>
</html>Attribute der Set-Instanz:
Größenattribut: Größe bezieht sich auf die Länge dieses Sets, das dasselbe hat Wirkung als Länge des Arrays. „
Konstruktorattribut: Dieses Attribut zeigt auf den Set-Konstruktor, und dieser Code kann implementiert werden (neues Set).constructor === Set //Ausgabe: true
Instanzmethoden festlegen:
Methode hinzufügen, Daten zum Satz hinzufügen;
<script>
Array.from((new Set([1,2])).add(3)); // 输出：[1, 2, 3]
</script>Methode löschen, Daten im Satz löschen; Löschen Sie die angegebenen Daten im Satz:
let set = (new Set([1,2,3,4])); set.clear(); Array.from(set);
Entries-Methode:
let set = (new Set([1,2,3,4])); set.delete(1); Array.from(set); //输出：[2, 3, 4]
forEach-Methode: Der Satz forEach hat zwei Parameter, der erste Parameter ist eine Funktion und der zweite Parameter ist optional. Wenn der zweite Parameter übergeben wird, ist der Kontext der Funktion der zweite Parameter, den wir übergeben:
let set = (new Set([1,2,3,4])); Array.from(set.entries());
Ausgabe:
<script>
let set = (new Set([1,2,3,4]));
set.forEach(function() {
console.log(arguments);
console.log(this)
},"1111");
</script>has-Methode, has wird verwendet, um zu bestimmen, ob diese Menge einen angegebenen Wert hat und false oder true zurückgibt; >
@@iterator()-Methode, @iterator-Methode ist der Standarditerator von set;
<script> let set = (new Set([1,2,3,4])); console.log(set.has(1)) //输出：true; console.log(set.has(5)) //输出：false </script>
Gesamte DEMO:
<script>
let set = new Set([1,2,3,4]);
console.log(set.keys());
console.log(set.values());
var keys = set.keys();
for(let key of keys) {
console.log(key);
};
</script>Die tatsächliche Verwendung von Set:
<script> let set = new Set([1,2,3,4]); let setIner = set[Symbol.iterator](); console.log(setIner.next().value) //输出：1 console.log(setIner.next().value) //输出：2 console.log(setIner.next().value) //输出：3 console.log(setIner.next().value) //输出：4 </script>
var mySet = new Set();
//往mySet里面添加数据， 1 ， 5
mySet.add(1);
mySet.add(5);
mySet.add("some text");
//添加对象
var o = {a: 1, b: 2};
mySet.add(o);
mySet.has(1); // 返回：true
mySet.has(3); // 返回：false
mySet.has(5); // 返回：true
mySet.has(Math.sqrt(25)); // 返回：true
mySet.has("Some Text".toLowerCase()); // t返回：rue
mySet.has(o); // 返回：true
mySet.size; // 4
mySet.delete(5); // 从mySet里面删除5
mySet.has(5); // 输出：false, 5 已经被删除了
mySet.size; // 现在的长度为：3
// 通过 for...or循环获取数据;
// 输出: 1, "some text"
for (let item of mySet) console.log(item);
// 输出: 1, "some text"
for (let item of mySet.keys()) console.log(item);
// 输出: 1, "some text"
for (let item of mySet.values()) console.log(item);
// 输出: 1, "some text"， 对于Set来说：key和value是一样的
for (let [key, value] of mySet.entries()) console.log(key);
// 把迭代器转化为数组的第一种方式；
var myArr = [v for (v of mySet)]; // [1, "some text"]
// 把迭代器转化为数组的第二种方式；
var myArr = Array.from(mySet); // [1, "some text"]
// 也可以用next()方法，手动去获取每一个值;Der folgende Code ist kürzer, also cool. Diese Methode stammt von: http://es6.ruanyifeng.com/#docs/set-map;
Weakly referencedvar union = (setA, setB) => {
//[...setA]这种方式目前只有babel才支持
return new Seet([...setA,...setB]);
};
var union = (setA, setB) => {
return new Set(Array.from(setA).concat(Array.from(setB)));
}var intersect = (set1, set2) => {
//return [x for (x of set1) if (set2.has(x))]; 这种写法完全不行嘛....
var resultSet = new Set();
for(let set of set1) {
if(set2.has(set)) {
resultSet.add(set);
};
};
return resultSet;
};WeakSet
-Objekt ist eine Sammlung von Objektwerten, und jeder Objektwert darin kann nur einmal vorkommen. WeakSet kann nur Elemente vomvar intersect = (set1, set2) => {
return new Set([...set1].filter(x => set2.has(x)));
}
console.log(intersect(new Set([1,2,3,4]), new Set([2,3,4,5]))); //输出：Set {2,3,4}speichern, wie zum Beispiel: Objekt,
Array, Funktion usw.; mit schwachen Referenzen WeakSet müssen Sie sich keine Sorgen über Speicherverluste machen Objekte verweisen nicht auf das Objekt, das Objekt wird automatisch vom Garbage Collection-Mechanismus recycelt. Das WeakSet-Objekt verfügt über kein Größenattribut >weakSet.add();
<script>
console.log(new WeakSet([{},[],()=>({1:1})]));
</script>weakSet.has();
Wenn das Objekt keine Referenz hat, dann ist das WeakSet-Objekt Der von nicht referenzierten Objekten belegte Speicher recycelt. Sie können die folgende Demo ausführen und sich dann nach einer Weile die Konsole ansehen (ich werde den Effekt in meinem Chrome-Browser
10S sehen): -
weakSet
kann zum Speichern von DOM-Knoten verwendet werden, wenn in weakSet
Das Obige ist eine detaillierte Einführung in den Code der neuen Funktionen von ES6 – Datenstrukturen vom Typ Set und WeakSet in JavaScript. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn). )!
<script>
var ws = new WeakSet()
var obj = {}; ws.add(obj);
ws.add([])
setInterval(()=>{
console.log(ws);
},1000)
</script>
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript
Dec 17, 2023 pm 02:54 PM
So implementieren Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem. Einführung: Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Spracherkennungstechnologie zu einem wichtigen Bestandteil des Bereichs der künstlichen Intelligenz geworden. Das auf WebSocket und JavaScript basierende Online-Spracherkennungssystem zeichnet sich durch geringe Latenz, Echtzeit und plattformübergreifende Eigenschaften aus und hat sich zu einer weit verbreiteten Lösung entwickelt. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem implementieren.
WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen
Dec 17, 2023 pm 05:30 PM
WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie
So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript
Dec 17, 2023 am 09:39 AM
So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript. Im heutigen digitalen Zeitalter müssen immer mehr Unternehmen und Dienste Online-Reservierungsfunktionen bereitstellen. Es ist von entscheidender Bedeutung, ein effizientes Online-Reservierungssystem in Echtzeit zu implementieren. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Reservierungssystem implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist eine Vollduplex-Methode für eine einzelne TCP-Verbindung.
Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems
Dec 17, 2023 pm 12:09 PM
Einführung in die Verwendung von JavaScript und WebSocket zur Implementierung eines Online-Bestellsystems in Echtzeit: Mit der Popularität des Internets und dem Fortschritt der Technologie haben immer mehr Restaurants damit begonnen, Online-Bestelldienste anzubieten. Um ein Echtzeit-Online-Bestellsystem zu implementieren, können wir JavaScript und WebSocket-Technologie verwenden. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine bidirektionale Kommunikation zwischen Client und Server in Echtzeit realisieren kann. Im Echtzeit-Online-Bestellsystem, wenn der Benutzer Gerichte auswählt und eine Bestellung aufgibt
JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems
Dec 17, 2023 pm 05:13 PM
JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das tägliche Leben und die Entscheidungsfindung von großer Bedeutung. Mit der Weiterentwicklung der Technologie können wir genauere und zuverlässigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir
Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode
Jan 05, 2024 pm 06:08 PM
JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest
So verwenden Sie insertBefore in Javascript
Nov 24, 2023 am 11:56 AM
Verwendung: In JavaScript wird die Methode insertBefore() verwendet, um einen neuen Knoten in den DOM-Baum einzufügen. Diese Methode erfordert zwei Parameter: den neuen Knoten, der eingefügt werden soll, und den Referenzknoten (d. h. den Knoten, an dem der neue Knoten eingefügt wird).
So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript
Jan 05, 2024 pm 01:37 PM
Einführung in die Methode zum Abrufen des HTTP-Statuscodes in JavaScript: Bei der Front-End-Entwicklung müssen wir uns häufig mit der Interaktion mit der Back-End-Schnittstelle befassen, und der HTTP-Statuscode ist ein sehr wichtiger Teil davon. Das Verstehen und Abrufen von HTTP-Statuscodes hilft uns, die von der Schnittstelle zurückgegebenen Daten besser zu verarbeiten. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript HTTP-Statuscodes erhalten, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist ein HTTP-Statuscode? HTTP-Statuscode bedeutet, dass der Dienst den Dienst anfordert, wenn er eine Anfrage an den Server initiiert
