Als Kind, das Code gerne von Hand eingibt, denke ich, dass der Code selbst eingegeben werden sollte, um ihn besser auswendig zu lernen. Deshalb werde ich heute die Funktionen von ES6 ~ ES12 vorstellen. Wenn Sie bei der Verwendung von ES blinde Flecken haben oder nicht viel über die neuen Funktionen wissen , sollte Ihnen dieser Artikel meiner Meinung nach sehr gut helfen ~
Zum besseren Verständnis werden wir es im Fallmodus erklären Zum besseren Verständnis unterstützt das Gehäuse gleichzeitig auch das Debuggen im Entwicklermodus. Ich hoffe, Sie können es unterstützen. ~
ECMAScript ist eine Skript-Programmiersprache, die von Ecma International (ehemals European Computer Manufacturers Association) durch ECMA standardisiert wurde -262 . Man kann auch sagen, dass es in der Welt der Programmierer nur zwei Versionen von JavaScript als Standard gibt
: ES5 und ES6 . Es heißt, dass ES6 tatsächlich im Jahr 2015 veröffentlicht wurde, was auch die Zeit ist, in der offiziell die große Front-End-Ära begann Das heißt, 2015 wird als Grenze verwendet, vor 2015 wurde es als ES5 bezeichnet ES6
Informationen zu ES6 Funktionen finden Sie unter „Einführung in die ES6-Standards“. Lehrer Ruan Yifeng.
Der Unterschied zwischen let, const und var:
wenn ein Objekt mit const deklariert wird, können die Eigenschaften des Objekts geändert werden, weil: obj, das von const deklariert wird, nur die Referenzadresse seines Objekts speichert Solange die Adresse unverändert bleibt, tritt
... dekonstruiert werden, um alle verbleibenden darzustellenundefined sein. a, b, c] = [1, 2, 3] console.log(a, b, c) // 1 2 3 sei [a, , c] = [1, 2, 3] console.log(a, , c) // 1 3 sei [a, b, ...c] = [1, 2, 3, 4, 5] console.log(a, b, c) // 1 2 [3, 4, 5] sei [a, b, ...c] = [1] console.log(a, b, c) // 1 undefiniert [] sei [a = 1, b = a] = [] const.log(a, b) // 1 1 sei [a = 1, b = a] = [2] const.log(a, b) // 2 2
undefined: Andere Äquivalente zum Aliaslet { a, b } = { a: 1, b: 2 };
console.log(a, b); // 1 2
sei { a } = { b: 2 };
console.log(a); // undefiniert
sei { a, b = 2 } = { a: 1 };
console.log(a, b); // 1 2
sei { a: b = 2 } = { a: 1 };
console.log(a); // Die Variable a existiert nicht console.log(b); // 1 length entspricht. , repräsentiert die Zahllet [a, b, c, d, e] = „Hallo“
console.log(a, b, c, d, e) // Hallo
let { length } = "Hallo"
console.log(length) // 5 let { toString: s } = 123;
console.log(s === Number.prototype.toString) // true
let { toString: s } = true;
console.log(s === Boolean.prototype.toString) // echte let arr = [[1,2], [3, 4]]
sei res = arr.map([a, b] => a + b)
console.log(res) // [3, 7]
sei arr = [1, undefiniert, 2]
let res = arr.map((a = 'test') => a);
console.log(res) // [1, 'test', 2]
sei func = ({x, y} = {x: 0, y: 0}) => {
return[x, y]
}
console.log(func(1, 2)) // [undefiniert, undefiniert]
console.log(func()) // [0, 0]
console.log(func({})) // [undefiniert, undefiniert]
console.log(func({x: 1})) // [1, undefiniert]
sei func = ({x=0, y=0}) => {
return[x, y]
}
console.log(func({x:1,y:2})) // [1, 2]
console.log(func()) // Fehler
console.log(func({})) // [0, 0]
console.log(func({x: 1})) // [1, 0] Die Regelmäßigkeit ist tatsächlich ein sehr schwer zu verstehender Wissenspunkt. Wenn jemand ihn vollständig beherrschen kann, ist er wirklich sehr mächtig Hier ist es zunächst
in zwei Stile unterteilt: JS分格und perl 分格
: RegExp()
let re = new RegExp('a');
let re = new RegExp('a', 'i'); //Das erste ist das Suchobjekt, das zweite ist die Option perl style: / Rule/Option und kann unabhängig von der Reihenfolge von mehreren gefolgt werden
let re = /a/; //Finde heraus, ob ein String vorhanden ist let re = /a/i;//Das erste ist das zu suchende Objekt, das zweite ist die Option
Hier stellen wir einen Online-Test für reguläre Ausdrücke vor (mit gängigen regulären Ausdrücken): Reguläre Online-Testzeichenfolgenerweiterung
大括号包含die Unicode-Zeichen//Unicode
console.log("a", "u0061");
console.log("d", "u{4E25}"); // d strict let str = 'Domesy'
//codePointAt()
console.log(str.codePointAt(0)) // 68
//String.fromCharCode()
console.log(String.fromCharCode(68)) // D
//String.raw()
console.log(String.raw`Hin${1 + 2}`); // Hin3
console.log(`Hin${1 + 2}`); // Hallo 3
let str = 'Domesy'
//startsWith()
console.log(str.startsWith("D")) // true
console.log(str.startsWith("s")) // false
//endsWith()
console.log(str.endsWith("y")) // true
console.log(str.endsWith("s")) // false
//repeat(): Der übergebene Parameter wird automatisch aufgerundet. Wenn es sich um eine Zeichenfolge handelt, wird er in eine Zahl umgewandelt console.log(str.repeat(2)) // DomesyDomesy
console.log(str.repeat(2.9)) // DomesyDomesy
// Durchquerung: for-of
for(let Code von str){
console.log(code) // D omesy einmal zurückgeben
}
//includes()
console.log(str.includes("s")) // true
console.log(str.includes("a")) // false
// trimStart()
const string = " Hallo Welt! ";
console.log(string.trimStart()); // „Hallo Welt!“
console.log(string.trimLeft()); // „Hallo Welt!“
// trimEnd()
const string = " Hallo Welt! ";
console.log(string.trimEnd()); // „Hallo Welt!“
console.log(string.trimRight()); // „Hallo Welt!“ let str = `Dome
sy`
console.log(str) //Wende Zeilen automatisch um//Dome
// sy- const str = {
Name: „Kleiner Dudu“,
Info: „Hallo zusammen“
}
console.log(`${str.info}, ich bin `${str.name}`) // Hallo zusammen, ich bin Xiao Dudu . 1, 2, 3, 4, 5]
//Array.of()
let arr1 = Array.of(1, 2, 3);
console.log(arr1) // [1, 2, 3]
//copyWithin(): drei Parameter (Ziel, Start = 0, Ende = this.length)
// Ziel: die Position des Ziels // Start: die Startposition, die weggelassen werden kann und eine negative Zahl sein kann.
// Ende: Endposition, kann weggelassen werden, kann eine negative Zahl sein, die tatsächliche Position ist Ende-1.
console.log(arr.copyWithin(0, 3, 5)) // [4, 5, 3, 4, 5]
//finden()
console.log(arr.find((item) => item > 3 )) // 4
//findIndex()
console.log(arr.findIndex((item) => item > 3 )) // 3
//keys()
for (let index of arr.keys()) {
console.log(index); // 0 1 2 3 4 auf einmal zurückgeben
}
// Werte()
for (let index of arr.values()) {
console.log(index); // 1 2 3 4 5 auf einmal zurückgeben
}
// Einträge()
for (let index of arr.entries()) {
console.log(index); // Einmal [0, 1] [1, 2] [2, 3] [3, 4] [4, 5] zurückgeben
}
sei arr = [1, 2, 3, 4, 5]
// Array.from(): Der Durchlauf kann ein Pseudo-Array sein, z. B. String, Set-Struktur, Knotenknoten let arr1 = Array.from([1, 3, 5], (item) => {
Rückgabeartikel * 2;
})
console.log(arr1) // [2, 6, 10]
// fill(): drei Parameter (Ziel, Start = 0, Ende = this.length)
// Ziel: die Position des Ziels // Start: die Startposition, die weggelassen werden kann und eine negative Zahl sein kann.
// Ende: Endposition, kann weggelassen werden, kann eine negative Zahl sein, die tatsächliche Position ist Ende-1.
console.log(arr.fill(7)) // [7, 7, 7, 7, 7]
console.log(arr.fill(7, 1, 3)) // [1, 7, 7, 4, 5]
sei arr = [1, 2, 3, 4]
//includes()
console.log(arr.includes(3)) // true
console.log([1, 2, NaN].includes(NaN)); // true // Seine Funktion besteht darin, das Array zu erweitern let arr = [3, 4, 5] console.log(...arr) // 3 4 5 sei arr1 = [1, 2, ...arr] console.log(...arr1) // 1 2 3 4 5
for-in//Object.is()
console.log(Object.is('abc', 'abc')) // true
console.log(Object.is([], [])) // false
//Traverse: for-in
let obj = { Name: 'Domesy', Wert: 'React' }
for(obj eingeben lassen){
console.log(key); // Der Reihe nach den Attributwert name value zurückgeben
console.log(obj[key]); // Die Attributwerte der Reihe nach zurückgeben Domesy React
}
//Object.keys()
console.log(Object.keys(obj)) // ['name', 'value']
//Object.assign()
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const result = Object.assign(target, source)
console.log(result) // {a: 1, b: 4, c: 5}
console.log(target) // {a: 1, b: 4, c: 5} let a = 1;
sei b = 2;
sei obj = { a, b }
console.log(obj) // { a: 1, b: 2 }
let method = {
Hallo() {
console.log('Hallo')
}
}
console.log(method.hello()) // Hallo- let a = „b“
sei obj = {
[a]: „c“
}
console.log(obj) // {b: „c“} // Seine Funktion besteht darin, das Array let { a , b zu erweitern , ...c } = { a: 1, b: 2, c: 3, d: 4};
console.log(c) // {c: 3, d: 4}
sei obj1 = { c: 3 }
sei obj = { a: 1, b: 2, ...obj1}
console.log(obj) // { a: 1, b: 2, c: 3} 0b oder 0B , was binäres00 oder 0O , was binäres angeben正数为1 ,负数为-1 ,正零0 ,负零-0 , NaNparseIntparseFloat//Binary console.log(0b101) // 5
console.log(0o151) //105
//Number.isFinite()
console.log(Number.isFinite(7)); // true
console.log(Number.isFinite(true)); // false
//Number.isNaN()
console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN("true" / 0)); // true
console.log(Number.isNaN(true)); // false
//Number.isInteger()
console.log(Number.isInteger(17)); // true
console.log(Number.isInteger(17.58)); // false
//Number.isSafeInteger()
console.log(Number.isSafeInteger(3)); // true
console.log(Number.isSafeInteger(3.0)); // true
console.log(Number.isSafeInteger("3")); // false
console.log(Number.isSafeInteger(3.1)); // false
//Math.trunc()
console.log(Math.trunc(13.71)); // 13
console.log(Math.trunc(0)); // 0
console.log(Math.trunc(true)); // 1
console.log(Math.trunc(false)); // 0
//Math.sign()
console.log(Math.sign(3)); // 1
console.log(Math.sign(-3)); // -1
console.log(Math.sign(0)); // 0
console.log(Math.sign(-0)); // -0
console.log(Math.sign(NaN)); // NaN
console.log(Math.sign(true)); // 1
console.log(Math.sign(false)); // 0
//Math.abrt()
console.log(Math.cbrt(8)); // 2
//Number.parseInt()
console.log(Number.parseInt("6.71"));
console.log(parseInt("6.71"));
//Number.parseFloat()
console.log(Number.parseFloat("6.71@")); // 6.71
console.log(parseFloat("6.71@")); // 6.71 //Dem Parameter wird standardmäßig ein bestimmter Wert zugewiesen
Funktion fun(x, y = x){
console.log(x, y)
}
Funktion fun1(c, y = x){
console.log(c, x, y)
}
Spaß(2); //2 2
fun1(1); //1 1 1 function fun(...arg){
console.log(arg) // [1, 2, 3, 4]
}
fun(1, 2, 3, 4)
let Arrow = (v) => v + 2 console.log(arrow(1)) // 3
Der Unterschied zwischen Pfeilfunktionen und gewöhnlichen Funktionen
ist eine neue Datenstruktur in ES6, die einem Array ähnelt. aber der Wert des Mitglieds ist eindeutig und es gibt keine wiederholten Wertdeklarationen
: const set = new Set()
Attribute:
Methode:
spezifisch
iterator . In der Reihenfolge der Einfügunglet list = new Set()
//hinzufügen()
list.add("1")
list.add(1)
console(list) // Set(2) {1, "1"}
//Größe
console(list.size) // 2
//löschen()
list.delete("1")
console(list) // Set(1) {1}
//hat()
list.has(1) // wahr
list.has(3) // false
//klar()
list.clear()
console(list) // Set(0) {}
let arr = [{id: 1}, {id: 2}, {id: 3}]
let list = new Set(arr)
//keys()
for (let key of list.keys()) {
console.log(key); // Dies drucken: {id: 1} {id: 2} {id: 3}
}
//Werte()
for (let key of list.values()) {
console.log(key); // Dies drucken: {id: 1} {id: 2} {id: 3}
}
//Einträge()
for (let data of list.entries()) {
console.log(data); // Dies drucken: [{id: 1},{id: 1}] [{id: 2},{id: 2}] [{id: 3},{id: 3 } ]
}
//forEach
list.forEach((item) => {
console.log(item)//Drucken Sie dies: {id: 1} {id: 2} {id: 3}
}); Anwendung:
new Set keine Objekte entfernen kann. undefiniert, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a']; console.log([...new Set(arr)]) //oder console.log(Array.from(new Set(arr))) // [1, 'true', true, 15, false, undefiniert, null, NaN, 'NaN', 0, 'a']
let a = new Set([1, 2 , 3])
sei b = new Set([2, 3, 4])
//Union console.log(new Set([...a, ...b])) // Set(4) {1, 2, 3, 4}
//Intersection console.log(new Set([...a].filter(v => b.has(v)))) // Set(2) {2, 3}
//Differenz set new Set([...a].filter(v => !b.has(v))) // Set(1) {1} let set = new Set([1,2, 3])
console.log(new Set([...set].map(v => v * 2))) // Set(3) {2, 4, 6} Definition: Die gleiche Struktur wie Set, aber das Mitglied Werte sind nur Kann
für das Objekt deklariert werden: const set = new WeakSet()
Methode:
Hinweis:
⭐️⭐️
ist eine neue Datenstruktur in ES6, bei der es sich um ein ähnliches Objekt handelt key ist eine Wertdeklaration eines beliebigen Typs
: const map = new Map()
-Attribute:
Methode:
Besonderer Hinweis:
let map = new Map()
//Satz()
map.set('a', 1)
map.set('b', 2)
console.log(map) // Map(2) {'a' => 1, 'b' => 2}
//erhalten
map.get("a") // 1
//Größe
console.log(map.size) // 2
//löschen()
map.delete("a") // true
console.log(map) // Map(1) {'b' => 2}
//hat()
map.has('b') // true
map.has(1) // false
//klar()
map.clear()
console.log(map) // Map(0) {}
sei arr = [["a", 1], ["b", 2], ["c", 3]]
let map = new Map(arr)
//keys()
for (let key of map.keys()) {
console.log(key); // Drucken Sie dies: abc
}
//Werte()
for (let value of map.values()) {
console.log(value); // Dies ausdrucken: 1 2 3
}
//Einträge()
for (let data of map.entries()) {
console.log(data); // Dies drucken: ["a", 1] ["b", 2] ["c", 3]
}
//forEach
map.forEach((item) => {
console.log(item)//Drucken Sie dies: 1 2 3
}); Definition: und Kartenstruktur, aber Mitgliedswerte können nur
für Objekte deklariert werden: const set = new WeakMap()
-Methode:
Symbol ist ein in ES6 eingeführter primitiver Datentyp, der独一无二darstellt
: const sy = Stmbol()
Parameter: string (optional)
Methode:
Symbol值Dieser Parameter ist vorhanden, gibt den ursprünglichen Symbol值zurück (zuerst suchen und dann erstellen, in der globalen Umgebung registriert)Symbol值zurück (nur key von Symbol.for() kann zurückgegeben werden)Symbol值zurück, die als Eigenschaftsnamen im Objekt verwendet werden// Deklarieren let a = Symbol();
sei b = Symbol();
console.log(a === b); // false
//Symbol.for()
let c = Symbol.for("domesy");
let d = Symbol.for("domesy");
console.log(c === d); // true
//Symbol.keyFor()
const e = Symbol.for("1");
console.log(Symbol.keyFor(e)); // 1
//Symbol.description
let symbol = Symbol("es");
console.log(symbol.description); //es
console.log(Symbol("es") === Symbol("es")); // false
console.log(symbol === symbol); // true
console.log(symbol.description === "es"); // true Proxy wird verwendet, um das Standardverhalten bestimmter Vorgänge zu ändern, was dem Vornehmen von Änderungen auf Sprachebene entspricht, es handelt sich also um eine Art „Meta“. Programmierung"), das heißt, das Programmieren in einer Programmiersprache
kann auf diese Weise verstanden werden. Proxy ist eine拦截die vor dem Zielobjekt gesetzt wird. Die Außenwelt muss diese Abfangschicht durchlaufen, wenn sie darauf zugreifen möchte. Daher gilt: Es wird ein Mechanismus zum Filtern und Filtern des Zugriffs von außen bereitgestellt.
Proxy kann hier als代理器
Deklaration verstanden werden: const proxy = new Proxy(target, handler)
die Abfangmethode:
let obj = {
Name: 'domesy',
Uhrzeit: '27.01.2022',
Wert: 1
}
let data = new Proxy(obj, {
//erhalten()
get(Ziel, Schlüssel){
return target[key].replace("2022", '2015')
},
//Satz()
set(Ziel, Schlüssel, Wert) {
if (key === "name") {
return (Ziel[Schlüssel] = Wert);
} anders {
return target[key];
}
},
// hat()
has(target, key) {
if (key === "name") {
return target[key];
} anders {
return false;
}
},
//deleteProperty()
deleteProperty(target, key) {
if (key.indexOf("_") > -1) {
Ziel[Schlüssel] löschen;
return true;
} anders {
return target[key];
}
},
// ownKeys()
ownKeys(target) {
return Object.keys(target).filter((item) => item != "time");
},
})
console.log(data.time) // 27.01.2015
data.time = '2020'
data.name = 'Reagieren'
console.log(data) //Proxy {Name: 'React', Zeit: '27.01.2022', Wert: 1}
//Intercept has()
console.log("name" in data) // true
console.log("time" in data) // false
// Löschen deleteProperty()
delete data.time; // true
// Durchquere ownKeys()
console.log(Object.keys(data)); //['name', 'value']
//anwenden()
let sum = (...args) => {
sei num = 0;
args.forEach((item) => {
num += item;
});
Rückgabenummer;
};
sum = new Proxy(sum, {
apply(target, ctx, args) {
return target(...args) * 2;
},
});
console.log(sum(1, 2)); // 6
console.log(sum.call(null, 1, 2, 3)); // 12
console.log(sum.apply(null, [1, 2, 3])); // 12
//Konstruktor()
let User = class {
Konstruktor(Name) {
this.name = Name;
}
}
Benutzer = neuer Proxy(Benutzer, {
construction(target, args, newTarget) {
return new target(...args);
},
});
console.log(new User("domesy")); // User {name: 'domesy'} Reflect ähnelt Proxy, außer dass es das Standardverhalten von Object beibehält und
umzuwandeln und Die Methoden von Proxy entsprechen eins zu eins, daher werden wir sie hier nicht vorstellen.
: Abstraktion einer Klasse von Dingen mit gemeinsamen Merkmalen (Konstruktor-Syntax-Zucker),
.
Konstruktor(name = 'es6'){
this.name = Name
}
}
let data = new Parent('domesy')
console.log(data) // Parent { name: 'domesy'} die Klasse Parent {
Konstruktor(name = 'es6'){
this.name = Name
}
}
// Gewöhnliche Vererbungsklasse Child erweitert Parent {}
console.log(new Child()) // Child { name: 'es6'}
// Parameter übergeben class Child erweitert Parent {
Konstruktor(name = "child") {
super(Name);
this.type = "child";
}
}
console.log(new Child('domesy')) // Child { name: 'domesy', type: 'child'} Die beiden Methoden Parent {
Konstruktor(name = 'es6'){
this.name = Name
}
// Getter
get getName() {
gib 'sy' + this.name zurück
}
// Setter
set setName(value){
this.name = Wert
}
}
let data = new Parent()
console.log(data.getName) // syes6
data.setName = 'domesy'
console.log(data.getName) // domesy class Parent {
static getName = (name) => {
zurück: „Hallo! ${name}`
}
}
console.log(Parent.getName('domesy')) // Hallo! Domesy Parent {}
Parent.type = "test";
console.log(Parent.type); //test Promise besteht darin, das Problem der „Rückrufhölle“ zu lösen. Es kann die Verarbeitung asynchroner Vorgänge sehr elegant machen.
Promise kann mehrere gleichzeitige Anforderungen unterstützen und Daten in gleichzeitigen Anforderungen abrufen. Dieses Promise Promise kann nicht als asynchrone
Definition bezeichnet werden: Objektstatus, der asynchrone Operationsergebnisse enthält
:
Hinweis:
//Normale Definition let ajax = ( Rückruf) => {
console.log('≈')
setTimeout(() => {
Rückruf && callback.call();
}, 1000)
}
ajax(() => {
console.log('timeout')
})
// Zuerst wird gedruckt, um die Ausführung zu starten, dann wird nach 1 Sekunde ein Timeout gedruckt.
//Versprechen
sei ajax = () => {
console.log("Ausführung starten");
neues Versprechen zurückgeben((auflösen, ablehnen) => {
setTimeout(() => {
lösen();
}, 1000);
});
};
ajax().then(() => {
console.log("timeout");
});
// Zuerst wird gedruckt, um die Ausführung zu starten, dann wird nach 1 Sekunde ein Timeout gedruckt.
//Dann()
sei ajax = () => {
console.log("Ausführung starten");
neues Versprechen zurückgeben((auflösen, ablehnen) => {
setTimeout(() => {
lösen();
}, 1000);
});
};
ajax()
.then(() => {
neues Versprechen zurückgeben((auflösen, ablehnen) => {
setTimeout(() => {
lösen();
}, 2000);
});
})
.then(() => {
console.log("timeout")
})
// Zuerst wird eingegeben, um die Ausführung zu starten, dann wird Timeout nach 3 Sekunden (1+2) eingegeben.
// fangen()
let ajax = (num) => {
console.log("Ausführung starten");
neues Versprechen zurückgeben((auflösen, ablehnen) => {
if (num > 5) {
lösen();
} anders {
throw new Error("Ein Fehler ist aufgetreten");
}
});
};
Ajax(6)
.then(function () {
console.log("timeout"); // Startet zuerst die Ausführung, dann wird das Timeout nach 1 Sekunde gedruckt
})
.catch(function (err) {
console.log("catch", err);
});
Ajax(3)
.then(function () {
console.log("timeout");
})
.catch(function (err) {
console.log("catch"); // Startet zuerst die Ausführung und fängt dann nach 1 Sekunde ab.
}); .
Neues Versprechen zurückgeben (Resolve, ablehnen) => {
lass img = document.createelement ("img");
img.src = src;
img.onload = function () {
Resolve (IMG);
};
img.onError = function (err) {
ablehnen (err);
};
});
}
const showimgs = (IMGS) => {
imgs.foreach ((img) => {
document.body.appendchild (IMG);
})
}
Versprechen.all ([
loadimg ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/item/71cf3bc79f3df8dcc655159cd11728b461028899.jpg")))))))))))
loadimg ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/item/71cf3bc79f3df8dcc655159cd11728b461028899.jpg")))))))))))
loadimg ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/item/71cf3bc79f3df8dcc655159cd11728b461028899.jpg")))))))))))
] )
. Dann (Showimgs
{
Neues Versprechen zurückgeben (Resolve, ablehnen) => {
lass img = document.createelement ("img");
img.src = src;
img.onload = function () {
Resolve (IMG);
};
img.onError = function (err) {
ablehnen (err);
};
});
}
const showimgs = (IMGS) => {
sei p = document.createelement ("p");
P.Appendchild (IMG);
document.body.appendchild (p);
}
Versprechen.RACE ([
loadimg ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/item/71cf3bc79f3df8dcc655159cd11728b461028899.jpg")))))))))))
loadimg ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/item/71cf3bc79f3df8dcc655159cd11728b461028899.jpg")))))))))))
loadimg ("https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/item/71cf3bc79f3df8dcc655159cd11728b461028899.jpg")))))))))))
]) dann ( ,
die Funktion, mit der der Iterator gesteuert werden kann , ist auch eine asynchrone Programmierlösung, die mehrere interne Zustände enthält
done valuedone value)
恢复aufgenommen.
ergeben "a";
ergeben "B";
zurück "C" zurückgeben
}
let Generator = data ();
console.log (Generator.Next ()) // {value: 'a', fertig: false}
console.log (Generator.Next ()) // {value: 'b', fertig: false}
console.log (generator.next ()) // {value: 'c', fertig: true}
console.log (generator.next ()) // {value: undefined, erledigt: true} Iterator ist eine Schnittstelle, die einen einheitlichen Zugriffsmechanismus für verschiedene Datenstrukturen bietet. Solange jede Datenstruktur die Iterator -Schnittstelle bereitstellt, kann sie den Traversal -Betrieb abschließen (dh alle Mitglieder der Datenstruktur nacheinander verarbeiten).
Die Funktionen des Iterators:
Hinweis standardisiert wird:
数组Set Map结构某些类似数组的对象Map结构.// Verwenden Sie im Grunde genommen let arr = ["Hallo", "Welt"];
map = arr [symbol.iterator] ();
console.log (map.next ());
console.log (map.next ());
console.log (map.next ());
// für Schleife let arr = ["Hallo", "Welt"];
für (lass den Wert von arr) {
console.log (Wert);
}
// Objektverarbeitung let obj = {
Start: [1, 5, 2],
Ende: [7, 9, 6],
[Symbol.iterator](){
sei index = 0;
Sei arr = this.start.concat (this.end)
zurückkehren {
nächste(){
if (index <arr.length) {
zurückkehren {
Wert: arr [index ++],
Fertig: Falsch
}
}anders{
zurückkehren {
Wert: arr [index ++],
erledigt: stimmt
}
}
}
}
}
}
für (lass Schlüssel von obj) {
Konsole.log (Schlüssel);
} core-decorators@ das Verhalten der Klasse zu erweitern und zu ändern.
target.name = "domeny"
}
@Name
Klassentest {}
console.log (test.name) // Domeny In den frühen Tagen war es eine übliche Methode, um sofortige Ausführungsfunktionen zu verwenden, um die Modularisierung zu
erreichen der Verwendung von Modularisierung:
-Lösungen:
export default Indexexport { name as newName }import Index from './Index'import * as Index from './Index'import { name, value, id } from './Index'import { name as newName } from './Index'import './Index'import Index, { name, value, id } from './Index'export命令und import命令werden in einer Zeile kombiniert und geschrieben. .
-LET arr = [1, 2, 3, 4]gefunden werden soll.
// include () ES6 console.log (arr.includes (3)) // true console.log ([1, 2, nan] .includes (nan)); // include () ES7 console.log (arr.includes (1, 0)) // true console.log (arr.includes (1, 1)) // Falsch
// Power
** Math.pow()console.log (math.pow (2, 3)) // 8 console.log (2 ** 8) // 256
Sei Str = 'Domesy'
// Padstart (): Wird es in Form von Räumen gefüllt? "0"));
console.log ("8-27" .Padstart (10, "yyyy-0m-0d"));
// Padend (): Gleiche Verwendung wie ));
, ob obj = {name: 'domeny', value: 'react'}
//Object.values ()
console.log (Object.Values (obj)) // ['React', 'React']
//Object.entries ()
console.log (Object.ententriies (OBJ)) // ['Name', 'Wert'], ['React', 'React'] die Funktion: Ändern Sie die asynchrone Funktion in synchroner Funktion (Generatorsyntaxzucker)
const func = async () => {
lass drequill = New Promise ((Resolve, ablehnen) => {
setTimeout(() => {
Resolve ("ausführen");
}, 1000);
});
console.log (warte auf Versprechen);
console.log (warte 0);
console.log (warte versprach. Resolve (1));
console.log(2);
Return Promise.Resolve (3);
}
func (). Dann (val => {
console.log (val);
}
)
forEach()Promise thenasync/await for-of Promise.all()try catch reject, ob es
sich um ein Versprechensobjekt handelt.
Diese Nicht-Promise-Sache ist erwartet.
Wenn es auf ein Versprechensobjekt wartet, wird auch den Code hinter Async pausieren, den Synchronisationscode außerhalb von Async ausführen, warten, bis das Versprechen -Objekt erfüllt wird, und verwenden Sie dann die Auflösungsparameter als Betriebsergebnis des erwarteten Ausdrucks.
Vorteile und:
der
undefined werden zurückgegeben, wenn die illegale String -Flucht auftritt, und die ursprüngliche Zeichenfolge kann von raw erhalten werden.// String -Beschränkungen const test = (value) => {
console.log (Wert)
}
Testen Sie `Domeny` // ['Domeny', RAW: [" Domeny "] Promise.Finally ()
lass func => {
Neues Versprechen zurückgeben ((res, rej) => {
setTimeout(() => {
if (Zeit <500) {
res (Zeit)
}anders{
rej (Zeit)
}
}, Zeit)
})
}
Spaß (300)
.then ((val) => console.log ('res', val))
.Catch ((erro) => console.log ('rej', erro))
.Finally (() => console.log ('fertig'))
// Ausführungsergebnis: Res 300 Fertiger Func (700)
.then ((val) => console.log ('res', val))
.Catch ((erro) => console.log ('rej', erro))
.Finally (() => console.log ('fertig'))
// Ausführungsergebnis: REJ 700 Fertig -AWAIT-OF: Asynchroner Iterator wartet, dass die Loop darauf wartet, dass jedes Promise对象resolved状态bevor Sie den nächsten Schritt eingeben lassen,
lassen Sie GetTime = (Sekunden) => {
Neues Versprechen zurückgeben (res => {
setTimeout(() => {
res (Sekunden)
}, Sekunden)
})
}
Async Function test () {
Sei arr = [GetTime (2000), GetTime (500), Gettime (1000)]
für auf wartung (sei x von arr) {
console.log (x);
}
}
test () // 2000 500 1000 //json.stringify ( ) Upgrade console.log (json.stringify (" ud83d ude0e"));
console.log json.stringify (" u {d800}")) Infinity eingegeben wird))Sei arr = [1, 2, 3, 4] // flatMap () console.log (arr.map ((x) => [x * 2])); console.log (arr.flatmap ((x) => [x * 2]); console.log (arr.flatmap ((x) => [x * 2]]); const arr1 = [0, 1, 2, [3, 4]]; const arr2 = [0, 1, 2, [[3, 4]]]; console.log (arr1.flat ()); console.log (arr2.flat (2));console.log
arr2.flat (unendlich)
Object.entries()LET MAP = NEW MAP ([[[[
["a", 1],
["B", 2],
]);
obj = object.fromentries (map);
console.log (obj ;
["a", 1],
["B", 2],
]
obj = object.fromentries (arr);
(obj)
;
A: 1,
B: 2,
C: 3
}
Sei res = object.fromentries (
Object.Entries (OBJ) .Filter (([Schlüssel, val]) => Wert! == 3)
)
console.log (res) // {a: 1, b: 2} // toString ()
Funktionstest () {
Consople.log ('Domeny')
}
console.log (test.toString ());
// Funktion test () {
//consople.log('domesy '))
//} in ES10, Versuchen Sie Catch können die Fangparameter ignorieren,
lass Func = (Name) => {
versuchen {
return json.parse (Name)
} fangen {
gibt false zurück
}
}
console.log (func (1)) // 1
console.log (func ({a: '1'}) // false sicher
jedoch
console.log (2 ** 53) // 9007199254740992 console.log (number.max_safe_integer) // 9007199254740991 // Bigint const bigint = 9007199254740993n console.log (bigint) // 9007199254740993n console.log (typeof bigint) // bigint console.log (1n == 1) // true console.log (1n === 1) // false const bigintnum = bigint (9007199254740993n) console.log (bigintnum) // 9007199254740993n
in ES6, nämlich: srting , number boolean object null undefined symbol
Null
Function Array Date object RegExp
8. Sie sind: srting , number , boolean , object , null , undefined , symbol , BigInt
Promise.Allsettled ():
Promise.all()Versprechen.Allsettled ([[
Versprechen.Reject ({{
Code: 500,
MSG: "Service -Ausnahme",
}),
Promise.resolve ({{
Code: 200,
Daten: ["1", "2", "3"],
}),
Promise.resolve ({{
Code: 200,
Daten: ["4", "5", "6"],
}),
]). Dann ((res) => {
console.log (res) // [{Grund: {Code: 500, MSG: 'Service Exception'}, Status: "Abgelehnt"},
// {Grund: {Code: 200, Daten: ["1", "2", "3"]}, Status: "Abgelehnt"},
// {Grund: {Code: 200, Daten: ["4", "5", "6"]}, Status: "Abgelehnt"}]
const data = res.filter ((item) => item.status === "erfüllt");
console.log (Daten);
// {Grund: {Code: 200, Daten: ["4", "5", "6"]}, Status: "Abgelehnt"}]
}) import() require() Sie den require// dann ()
lass modulepage = "index.js";
import (modulepage) .then ((modul) => {
modul.init ();
});
// in Kombination mit Async erwarten
(async () => {
const modulepage = 'index.js'
const modul = wartet import (modulepage);
console.log (Modul)
}) // Browser Umgebungskonsole.log (Globalthis) // Fenster //Knoten console.log (globalthis) // global
,
// vor ES11 lass a = user && user.name // Jetzt B
"||." Standardwert "; "" Standardwert "; const b = 0; const a = b || 5; console.log (a); // 5 const b = null // undefiniert const a = b? 123; Konsole.log
(
let str = "Hi!, Dies ist eine neue Funktion von ES6 ~ ES12, derzeit ES12".
console.log (Str.Replace ("es", "Sy"); Dies ist ein neues Merkmal von Sy6 ~ ES12, derzeit ES12
console.log (Str.Replace (/es/g, "sy"); Dies ist ein neues Merkmal von Sy6 ~ Sy12, derzeit Sy12
console.log (str.replaceall ("es", "sy"); Dies ist ein neues Merkmal von Sy6 ~ Sy12, derzeit Sy12
console.log (str.replaceall (/es/g, "sy"); Dies ist ein neues Merkmal von Sy6 ~ SY12, derzeit Sy12 Promise.an ()
Versprechen.aner ([
Versprechen.Reject ("dritte"),
Versprechen.Resolve ("zweite"),
Versprechen.Resolve ("First"),
])
.then ((res) => console.log (res)) // Sekunde
.Catch ((err) => console.Error (err));
Versprechen.aner ([
Versprechen.Reject ("Fehler 1"),
Versprechen.Reject ("Fehler 2"),
Versprechen.Reject ("Fehler 3"),
])
.then ((res) => console.log (res))
.Catch ((err) => console.Error (err));
// AggregateError: Alle Versprechen wurden abgelehnt
Versprechen.aner ([
Versprechen.Resolve ("dritter"),
Versprechen.Resolve ("zweite"),
Versprechen.Resolve ("First"),
])
.then ((res) => console.log (res)) // dritter
.Catch (( err));
Sei WeaCref = new wewRef ({Name: 'Domeny', Jahr: 24})
Weapref.Deref () // {Name: 'Domeny', Jahr: 24}
wewRef.Deref (). Jahr // 24 let num1 = 5;
sei num2 = 10;
num1 && = num2;
console.log (num1);
// gleichwertig zu num1 && (num1 = num2);
if (num1) {
Num1 = Num2;
} let num1;
sei num2 = 10;
num1 || = num2;
console.log (num1);
// äquivalent zu num1 || (num1 = num2);
if (! num1) {
Num1 = Num2;
} sei num2 = 10; sei num3 = null; // undefiniert Num1 ?? = num2; console.log (num1); Num1 = falsch; Num1 ?? = num2; console.log (num1); Num3 ?? = 123; console.log (num3); // äquivalent zu // num1? (Num1 = num2
)
sei num2 = 100_000; console.log (num1); console.log (num2); const num3 = 10.12_34_56 console.log (num3);